SimulatedGREG / electron-vue

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
https://simulatedgreg.gitbooks.io/electron-vue/content/
MIT License
15.47k stars 1.54k forks source link

"Unexpected token import" from npm modules #284

Closed danilopolani closed 7 years ago

danilopolani commented 7 years ago
Describe the issue / bug.

When I try to install some npm modules, like vue-good-table or vuejs-datatables and I import them the error is an "unexpected token import".

How can I reproduce this problem?

For example we can use vue good table.

  1. npm install --save vue-good-table
  2. In router/index.js (it's probably the wrong place). The error will appear in the console of DevTools:
    
    import VueGoodTable from 'vue-good-table';

Vue.use(VueGoodTable);



##### Tell me about your development environment.
  * Node version: 8.0.0
  * NPM version: 5.0.3
  * Operating System: Ubuntu
zxc23 commented 7 years ago

In your renderer config, have you whitelisted them like:

let whiteListedModules = ['vue', 'vue-good-table']
danilopolani commented 7 years ago

Thank you!

SimulatedGREG commented 7 years ago

@DaniloPolani

Adding vue-good-table and others will be a quick fix, and is probably the easiest solution. But to explain a little about what's happening here, the module is distributed with import/export statements which don't work in a node@7 environment. By whitelisting these modules, this allows webpack to come in and handle the importing and exporting. In the end, usually third party libraries should avoid distributing code using import / export and should still follow the commonjs2 module syntax. Either way, glad you got this sorted out! Thank you @zxc23 for the suggestion.

0libre commented 7 years ago

@zxc23 Where do one place "let whiteListedModules = ['vue', 'vue-good-table']" ?

danilopolani commented 7 years ago

@0libre .electron-vue/webpack.renderer.config.js (L21)