Electron-vue: "Unexpected token import" from npm modules

[danilopolani]

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]

In your renderer config, have you whitelisted them like:

let whiteListedModules = ['vue', 'vue-good-table']

[danilopolani]

Thank you!

[SimulatedGREG]

@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]

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

[danilopolani]

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