Index is not defined

Question

I have installed Snipcart to my Nuxt app using npm install @nuxtjs/snipcart and added the below to nuxt.config.ts but when I try to start the server with npm run dev, I keep getting the below errors.

nuxt.config.ts (removed my key):

modules: [
        '@nuxtjs/snipcart'
      ],
      snipcart: {
        key: <my_snipcart_key>,
      },

package.json:

"dependencies": {
    "@nuxtjs/snipcart": "^1.3.1",
  }

Errors (removed my key and file structure for privacy):

 ERROR  Error compiling template:  {                                                                                                                                                              10:30:02
  src: '...\\wmm\\node_modules\\@nuxtjs\\snipcart\\lib\\plugin.js',
  options: {
    version: 'v3.0',
    path: {
      base: '...\\wmm\\snipcart',
      js: '...\\wmm\\snipcart\\customize.js',
      css: '...\\wmm\\snipcart\\customize.css'
    },
    snipcartCustomize: '',
    locales: '{}',
    attributes: '[["data-api-key",<my_snipcart_key>]]',
    key: <my_snipcart_key>
  },
  filename: 'lib.plugin.43b9bf08.js',
  dst: '.../wmm/.nuxt/lib.plugin.43b9bf08.js'
}

 ERROR  Cannot start nuxt:  index is not defined                                                                                                                                                  10:30:02

  at eval (eval at <anonymous> (node_modules\lodash.template\index.js:1550:12), <anonymous>:8:10)
  at compileTemplate (.../wmm/node_modules/@nuxt/kit/dist/index.mjs:558:45)
  at async .../wmm/node_modules/nuxt/dist/index.mjs:1841:22
  at async Promise.all (index 16)
  at async generateApp (.../wmm/node_modules/nuxt/dist/index.mjs:1840:3)
  at async _applyPromised (.../wmm/node_modules/perfect-debounce/dist/index.mjs:54:10)

 ERROR  [unhandledRejection] index is not defined                                                                                                                                                 10:30:02  

  at eval (eval at <anonymous> (node_modules\lodash.template\index.js:1550:12), <anonymous>:8:10)
  at compileTemplate (.../wmm/node_modules/@nuxt/kit/dist/index.mjs:558:45)
  at async .../wmm/node_modules/nuxt/dist/index.mjs:1841:22
  at async Promise.all (index 16)
  at async generateApp (.../wmm/node_modules/nuxt/dist/index.mjs:1840:3)
  at async _applyPromised (.../wmm/node_modules/perfect-debounce/dist/index.mjs:54:10)

When I remove the above modules from nuxt.config.ts it all starts up perfectly so definitely a Snipcart issue.

Really at a loss with this. I've tried searching the Snipcart documentation but finding it very unhelpful so far.

Any ideas why I'm getting these errors? Thanks

Answer 1

Solution found in this blogpost

@nuxtjs/snipcart is not supported by nuxt3 so to fix this, I removed that from modules and snipcart from nuxt.config.ts.

Instead,

1. Add the below to nuxt.config.ts

meta: {
    link: [
      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
      { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
      { href: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap', rel: 'stylesheet' },
      { rel: 'preconnect', href: "https://app.snipcart.com" },
      { rel: 'preconnect', href: "https://cdn.snipcart.com" },
      { rel: 'stylesheet', href: "https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.css" },

    ],
    script: [
      { src: 'https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.js', async: true }
    ],
  },

  publicRuntimeConfig: {
    API_URL: process.env.API_URL
  },

2. Create a default.vue file in layouts folder and add the below:

<div 
   id="snipcart" 
   data-api-key="MWM3MjhiM2ItMGQ5MS00NTY4LWE0M2UtZGVmNGZlZTk3ZTBkNjM3OTgzMzMzMTM1MDA5OTcy" 
   hidden>
</div>