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

如何解决Webpack + Linaria - 当前未启用对实验性语法“jsx”的支持

我在 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" }
    }
  ]
}

但我得到了这个结果：

目前未启用对实验性语法“jsx”的支持

这个配置有什么问题吗？

解决方法

如果没有 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"
    ]
  }