时间戳

首页 > 解决方案 > Webpack 4 babel/at-loader jsx 在单个机器上无法识别

webpack - Webpack 4 babel/at-loader jsx 在单个机器上无法识别

问题描述

我目前面临一个非常奇怪的错误。我已经使用 jsx (react) 和 typescript 将自定义 webpack 3 配置迁移到 webpack 4。它可以完美地在每台机器上运行，除了一台。该机器遇到常见错误“您可能需要适当的加载程序来处理此文件类型”。

Module parse failed: Unexpected token (48:6)
You may need an appropriate loader to handle this file type.
|   renderCtaFigure() {
|     return (
>       <Motion
|         style={{
|           width: spring(

由任何非标准 JavaScript 代码触发。例如。at-loader 还报告：

Module parse failed: Unexpected token (8:9)
You may need an appropriate loader to handle this file type.
|  */
| export function objectToHtmlTags(
>   _object: Object,
|   recrusive: boolean = true
| ): string {

我已经验证它们符合配置的规范：

 {
    test: /\.jsx?$/,
    exclude: /(node_modules(?!\/auw-framework)|bower_components|Public|typo3(?!(conf))\w*|sysext)/,
    use: [
      {
        loader: "babel-loader",
        options: {
          babelrc: true
        }
      }
    ]
  },

  {
    test: /\.tsx?$/,
    exclude: /(bower_components|Public|typo3|sysext)/,
    include: __dirname, // suggested by comments from the at-loader issues
    use: ["babel-loader", "awesome-typescript-loader"]
  },

它们对应的.babelrc和tsconfig.json如下：

.babelrc

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

tsconfig.json

{
  "compilerOptions": {
    "lib": ["es2015", "es2016", "es2017", "esnext", "dom"],
    "jsx": "react",
    "baseUrl": "./web",
    "module": "commonjs",
    "experimentalDecorators": true,
    "preserveConstEnums": true,
    "removeComments": true,
    "target": "es5",
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "transpileOnly": true,
    "allowJs": false,
    "emitDecoratorMetadata": true,

    "inlineSources": true,
    "sourceMap": true,
    "moduleResolution": "node"
  },
  "awesomeTypescriptLoaderOptions": {
    "useBabel": true,
    "useCache": true,
    "useTranspileModule": true,
    "forceIsolatedModules": true,
    "babelCore": "@babel/core" // needed for Babel v7
  },
  "exclude": [
    "typings/browser.d.ts",
    "typings/browser",
    "node_modules",
    "vendor",
    "typo3_src",
    "web/typo3",
    "sysext/**/*",
    "**/Configuration/**/*.ts",
    "**/TypoScript/**/*.ts",
    "typo3conf/ext/*/Configuration",
    "**/TsConfig/**"
  ]
}

我现在花了几个小时寻找和尝试各种解决方案，包括完全重新安装节点和任何其他节点驱动的东西。我能想到的一切都与它工作的机器完全匹配。

任何人建议进一步调试？

标签： webpack

解决方案

我只是遇到了同样的错误和同样的问题，它在任何地方都有效。只是不在 Gitlab CI Docker 容器中。即使我拉出完全相同的容器并手动运行每个命令，它仍然有效。唯一修复它的是从excludeBabel 配置的列表中删除构建文件夹。

老的

{
    test: /\.js$/,
    exclude: /(node_modules|build)/,
    loader: 'babel-loader',
    options: {
        //presets and plugins in .babelrc
    }
}

新的

{
    test: /\.js$/,
    exclude: /(node_modules)/,
    loader: 'babel-loader',
    options: {
        //presets and plugins in .babelrc
    }
}

仍然不知道为什么，因为 babel 不需要 build 文件夹，它在其他任何地方都可以工作。但它解决了这个问题，所以也许现在尝试删除排除项。

推荐阅读