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#673

[jpt]

@linkdesu according to that issue, it's now resolved (See #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.