Laravel mix 4 Amcharts 动态导入问题答案

【问题标题】：Laravel mix 4 Amcharts dynamic import issueLaravel mix 4 Amcharts 动态导入问题
【发布时间】：2019-06-15 12:11:16
【问题描述】：

我正在使用 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 吗？这没有任何意义，node模块不应该已经编译了吗？

npm -v 6.4.1 node -v 10.14.1

【问题讨论】：

这里的问题完全相同。曾经工作，但不再工作。在我的实时服务器上它仍在工作（只要我不更新 npm 包），但试图在我的开发和本地模仿这些版本，没有工作......npm -v / node -v 6.6.0 / 11.7.0 | 6.5.0/8.14.0 | 6.5.0|6.14.1。 12 月 13 日，它起作用了……
我也将此作为错误发布到 Amcharts github 问题页面，这可能会尽快得到答复。看起来 Amcharts 的某个人被分配到了这个问题上。这是链接：github.com/amcharts/amcharts4/issues/868

标签： javascript webpack amcharts laravel-mix

【解决方案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

你应该很高兴！

【讨论】：