Loschcode / vue-mixpanel

A simple Vue.js plugin for Mixpanel
https://laurent.tech
MIT License
38 stars 4 forks source link

Cannot use import statement outside a module #5

Closed laszukdawid closed 3 years ago

laszukdawid commented 3 years ago

Hi, I had a problem with using your module in Nuxt.js (2.14.0) and Vue (2.6.12). I'm relatively new to nuxt.js, vue and mixpanel so the proper solution might be different.

As I understand, and I can see it done with other plugins, in Nuxt.js one defines a plugin file in ~/plugins directory and then import it in nuxt config. For example:

~/plugins/vue-mixpanel.js


import Vue from 'vue'
import VueMixpanel from 'vue-mixpanel'

Vue.use(VueMixpanel, { token: 'xxxxxxx' })

> ~/nuxt.config.js
```js

module.exports = {
  plugins: [
    '~/plugins/vue-mixpanel',
 ],
}

Long story short, it didn't work and was crashing with "Cannot use import statement outside a module". Copy-paste of your index.js file into the vue-mixpanel.js and replacing import with require fixed the issue.

Please consider updating to require or explaining others how to fix the issue properly.

SuperIbm commented 3 years ago

I have the same issue. And I tried your suggestion and it worked. Thank you.

Loschcode commented 3 years ago

Hey guys, I believe it's a Nuxt specific problem which can be solved by using their transpile functionality. Have you tried it?

If you get an Cannot use import statement outside a module error, you may need to add your package to the build > transpile option in nuxt.config.js for webpack loader to make your plugin available.

It's available from their plugins documentation.