Laravel mix 4 Amcharts 动态导入问题

Question

我正在使用 Laravel Mix，但在后台它使用 Webpack 4。无论我做什么，我都无法摆脱这个错误。

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

看起来 Amchart 正在做动态导入所以我安装了@babel/plugin-syntax-dynamic-import 但没有帮助。这个插件之前没有安装，Amcharts 工作得很好。以下是所有加载的 babel 包：

"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",

这是我的 .babelrc

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

我在这里做错了什么？我应该编译 node_modules/@amcharts 吗？这没有任何意义，节点模块不应该已经编译了吗？

npm -v 6.4.1 node -v 10.14.1

Answer 1

检查你的 webpack 版本，如果它高于 4.28.4 你就不走运了。 Webpack 维护者现在已经意识到这个问题，下一个版本的 NPM 版本应该会解决这个问题。不知何故，包在 NPM 树中的提升不正确。与此同时，对我有用的快速修复：

删除node_modules并销毁锁定文件

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

将 webpack 降级到最后一个已知的工作版本（将其锁定在那里，以便您可以运行 npm update 其他包）：

npm install webpack@4.28.4

如果你的 NPM 找不到它，请安装 acorn 6.0（这是 NPM 提升问题）

npm install acorn@^6.0.0

你应该可以开始了！

Laravel mix 4 Amcharts 动态导入问题

Laravel mix 4 Amcharts dynamic import issue

javascript

amcharts

webpack

laravel-mix