Laravel mix 4 Amcharts动态导入问题

Question

I am using Laravel Mix but behind the scenes it uses Webpack 4. I cannot get rid of this error no matter what I do.

ERROR in ./node_modules/@amcharts/amcharts4/.internal/core/export/Export.js 3215:14
Module parse failed: Unexpected token (3215:14)
You may need an appropriate loader to handle this file type.
|             return [4
|             /*yield*/
>             , import(
|             /* webpackChunkName: "canvg" */
|             "canvg")];
 @ ./node_modules/@amcharts/amcharts4/core.js 74:0-56 74:0-56
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/modules/Reporting/components/index.vue?vue&type=script&lang=js&
 @ ./resources/assets/js/modules/Reporting/components/index.vue?vue&type=script&lang=js&
 @ ./resources/assets/js/modules/Reporting/components/index.vue
 @ ./resources/assets/js/routes.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/less/app.less

It looks like Amchart is doing dynamic import so I installed @babel/plugin-syntax-dynamic-import but no help. This plugin was not installed previously and Amcharts worked just fine. Here are all the babel packages loaded:

"devDependencies": {
  "@babel/cli": "^7.2.3",
  "@babel/core": "^7.2.2",
  "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
  "@babel/plugin-syntax-dynamic-import": "^7.2.0",
  "@babel/preset-env": "^7.2.3",

And here is my .babelrc

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-syntax-dynamic-import"
  ]
}

What am I doing wrong here? Should I be compiling node_modules/@amcharts ? That doesn't make any sense, shouldn't node modules be already compiled?

npm -v 6.4.1 node -v 10.14.1

Answer 1

Check your webpack version if it is higher than 4.28.4 you are out of luck. Webpack maintainers are now aware of this problem and the next version NPM version should solve the problem. Somehow packages are hoisting incorrectly in the NPM tree. In the meantime quick fix that worked for me:

Remove node_modules and destroy lock file

rm -fr node_modeles
rm -f package-lock.json

Downgrade webpack to last known working version (lock it there so you can run npm update for other packages):

npm install webpack@4.28.4

Install acorn 6.0 if your NPM cannot find it (this is NPM hoisting issue)

npm install acorn@^6.0.0

You should be good to go!