Question

将npm软件包react-monaco-editor包含到我的项目中之后，我的webpack构建开始失败。

ERROR in ./node_modules/react-monaco-editor/src/diff.js 108:12
Module parse failed: Unexpected token (108:12)
You may need an appropriate loader to handle this file type.
|   }
|
>   assignRef = (component) => {
|     this.containerElement = component;
|   };
 @ ./node_modules/react-monaco-editor/src/index.js 2:0-38 4:0-53
 @ ./Scripts/Editor/Components/CodePreview.tsx
 @ ./Scripts/Editor/Components/Editor.tsx
 @ ./Scripts/Editor/main.tsx

我正在使用babel加载程序，这是我的.babelrc文件。

{
    "presets": [
        "@babel/react",
        "@babel/typescript",
        "@babel/env",
    ],
    "plugins": [
        "transform-class-properties",
    ]
}

当我看到此错误时，我的第一个念头是我缺少箭头功能插件，该插件在添加错误后仍然存在，并且由于我已经在使用transform-class-properties插件，而大多数相关的解决方案都指向该插件，我不知道还有什么可以尝试的。

编辑：

因此，我更改了处理文件以包含.js文件的规则

{ test: /\.[jt]sx?$/, loader: "babel-loader" },

现在我从babel-loader中得到了错误

ERROR in ./node_modules/react-monaco-editor/src/diff.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Projects\Michelangelo\Main_backend\MichelangeloWeb\node_modules\react-monaco-editor\src\diff.js: Support for the experimental syntax 'classProperties' isn't currently enabled (108:13):

所以我已经下载了建议的@babel/plugin-proposal-class-properties，现在我的.babelrc看起来像这样

{
    "presets": [
        "@babel/react",
        "@babel/typescript",
        "@babel/env",
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
    ]
}

但我仍然遇到相同的错误。

Answer 1

此调整应可解决此问题：

{
      test: /\.(js|jsx)?$/, // Transform all .js and .jsx files required somewhere with Babel
      // react-monaco-editor uses arrow function, need to parse
      exclude: /node_modules(?!\/react-monaco-editor)/, 
      use: {
          loader: 'babel-loader',
          options: options.babelQuery,
      },
}

来源：https://github.com/react-monaco-editor/react-monaco-editor/issues/259

Webpack babel构建因箭头功能解析而失败

1 个答案: