Uncaught SyntaxError: Unexpected token import

[newenter]

/node_modules/vue-particles/src/vue-particles/index.js:2 Uncaught SyntaxError: Unexpected token import at createScript (vm.js:74) at Object.runInThisContext (vm.js:116) at Module._compile (module.js:533) at Object.Module._extensions..js (module.js:580) at Module.load (module.js:503) at tryModuleLoad (module.js:466) at Function.Module._load (module.js:458) at Module.require (module.js:513) at require (internal/module.js:11) at eval (external "vue-particles"?c47c:1) createScript @ vm.js:74 runInThisContext @ vm.js:116 Module._compile @ module.js:533 Module._extensions..js @ module.js:580 Module.load @ module.js:503 tryModuleLoad @ module.js:466 Module._load @ module.js:458 Module.require @ module.js:513 require @ internal/module.js:11 (anonymous) @ external "vue-particles"?c47c:1 (anonymous) @ renderer.js:1055 webpack_require @ renderer.js:680 fn @ renderer.js:90 (anonymous) @ main.js?3b76:1 (anonymous) @ renderer.js:900 webpack_require @ renderer.js:680 fn @ renderer.js:90 (anonymous) @ renderer.js:817 webpack_require @ renderer.js:680 (anonymous) @ renderer.js:726 (anonymous) @ renderer.js:729

[newenter]

package.json write: "dependencies": { "axios": "^0.16.1", "iview": "^2.0.0-rc.8", "vue": "^2.3.3", "vue-particles": "^1.0.9", "vue-router": "^2.5.3", "vuex": "^2.3.1", "js-cookie": "^2.2.0" },

main.js

import VueParticles from 'vue-particles' Vue.use(VueParticles)

[eykrehbein]

+1

[Lie8466]

Resolved by set ssr as false

plugins: [
    { src: '@/plugins/vue-particles', ssr: false }
  ],

And wrapping the component with <no-ssr/>

<no-ssr>
    <vue-particles
            color="#66a6ff"
             ....>
    </vue-particles>
</no-ssr>

[linkdesu]

@Lie8466 THX, this works for me. The problem is particlesjs can not be load with ssr, for more info : nuxt/nuxt.js#673

[jpt]

@linkdesu according to that issue, it's now resolved (See https://github.com/creotip/vue-particles/pull/3), but oddly I'm still getting the Unexpected token import error with Nuxt.

[jpt]

@creotip (cc @Atinux I know you did the initial patch on this one to get it working with Nuxt), I wonder why I get this error:

/node_modules/vue-particles/src/vue-particles/index.js:2
import particles from './vue-particles.vue'
^^^^^^

SyntaxError: Unexpected token import

@Lie8466's suggestion above is not working.

[jpt]

The issue only comes up on a hard reload, btw. If I access a different page that has the <vue-particles> component, and then click a link to that page, it works, but if I try to load that URL directly, I get the "Unexpected token import" error.

[jean-airoldie]

@jpt By default, nuxt's server webpack excludes all external modules from being transpiled in build. You should try whitelisting vue-particles.

// file : nuxt.config.js
module.exports = {
  ...
  build: {
    extend(config, ctx) {
      if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vue-particles/]
          })
        ]
      }
    }
  },
  ...
}

Where /^vue-particles/ is a regex expression that will match vue-particles and its subpaths.