Uncaught SyntaxError: Unexpected token import
newenter opened this issue · comments
/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
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)
+1
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>
@Lie8466 THX, this works for me. The problem is particlesjs can not be load with ssr, for more info : nuxt/nuxt#673
@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.
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.
@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.