Webpack + Linaria - 当前未启用对实验性语法 'jsx' 的支持

Question

我在 create-react-app 项目的 webpack 配置中添加了 linaria，所以最终的规则是这样的：

{
  "test": /\.(js|mjs|jsx|ts|tsx)$/,
  "include": "C:\Project\src",
  "use": [
    {
      "loader": "C:\Project\node_modules\babel-loader\lib\index.js",
      "options": {
        "customize": "C:\Project\node_modules\babel-preset-react-app\webpack-overrides.js",
        "presets": [
          [
            "C:\Project\node_modules\babel-preset-react-app\index.js",
            { "runtime": "automatic" }
          ],
          "C:\Project\node_modules\@linaria\babel-preset\lib\index.js"
        ],
        "babelrc": false,
        "configFile": false,
        "cacheIdentifier": "production:babel-plugin-named-asset-import@0.3.7:babel-preset-react-app@10.0.0:react-dev-utils@11.0.4:react-scripts@4.0.3",
        "plugins": [
          [
            "C:\Project\node_modules\babel-plugin-named-asset-import\index.js",
            {
              "loaderMap": {
                "svg": {
                  "ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]"
                }
              }
            }
          ]
        ],
        "cacheDirectory": true,
        "cacheCompression": false,
        "compact": true
      }
    },
    {
      "loader": "C:\Project\node_modules\@linaria\webpack-loader\lib\index.js",
      "options": { "sourceMap": false, "cacheDirectory": "src/.linaria_cache" }
    }
  ]
}

但我得到的结果是：

Support for the experimental syntax 'jsx' isn't currently enabled

这个配置有什么问题吗？

Answer 1

如果没有 babelrc 文件，似乎 @linaria\webpack-loader 将无法工作（即使预设已经在 babel-loader 上了）

{
    "presets": [
      "babel-preset-react-app",
      "@linaria"
    ],
    "plugins": [
      [
        "babel-plugin-named-asset-import",
        {
          "loaderMap": {
            "svg": {
              "ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]"
            }
          }
        }
      ],
      "@babel/plugin-proposal-class-properties"
    ]
  }

Webpack + Linaria - 当前未启用对实验性语法 'jsx' 的支持

Webpack + Linaria - Support for the experimental syntax 'jsx' isn't currently enabled

reactjs

webpack

babeljs

create-react-app

babel-loader