javascript - 导入模块上当前未启用对实验语法“jsx”的支持错误

Question

我正在构建一个 npm 包，其中包含一个反应组件。我最初将包开发为我正在测试它的 react 应用程序的一个子文件夹，并且一切正常。现在我已经提取了代码并将其转换为它自己的包，当我尝试导入它并构建 react 项目时，它会收到错误：

Support for the experimental syntax 'jsx' isn't currently enabled
...
Add @babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.

当我在提取的包本身上运行构建时，它构建没有问题，只有当我尝试将它合并到另一个项目中时它才会出现问题。我已经尝试了其他线程的许多其他解决方案，但没有运气。

包.json

{
  "name": "my-tracing-project",
  "version": "1.0.9",
  "description": "tracing and instrumentation for react projects",
  "main": "src/index.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "build": "webpack --mode=production --node-env=production",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/plugin-transform-react-jsx": "^7.14.3",
    "@babel/preset-flow": "^7.13.13",
    "@babel/runtime": "^7.14.0",
    "@opentelemetry/context-zone": "^0.19.0",
    "@opentelemetry/exporter-collector": "^0.19.0",
    "@opentelemetry/instrumentation": "^0.19.0",
    "@opentelemetry/instrumentation-document-load": "^0.16.0",
    "@opentelemetry/instrumentation-fetch": "^0.19.0",
    "@opentelemetry/instrumentation-user-interaction": "^0.16.0",
    "@opentelemetry/instrumentation-xml-http-request": "^0.19.0",
    "@opentelemetry/plugin-react-load": "^0.16.0",
    "@opentelemetry/tracing": "^0.19.0",
    "@opentelemetry/web": "^0.19.0",
    "babel-preset-react": "^6.24.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.3",
    "@babel/core": "^7.14.3",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-react": "^7.13.13",
    "@rollup/plugin-babel": "^5.3.0",
    "@webpack-cli/generators": "^2.1.0",
    "babel-loader": "^8.2.2",
    "prettier": "^2.3.0",
    "rollup": "^2.50.4",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0"
  },
  "peerDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

babel.config.js

module.exports = {
    presets:[
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
          {
            "loose": true
          }
        ]
      ]
}

webpack.config.js

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");

const isProduction = process.env.NODE_ENV == "production";

const config = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    // Add your plugins here
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/i,
        loader: "babel-loader",
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";
  } else {
    config.mode = "development";
  }
  return config;
};

标签： javascriptnode.jsreactjswebpackbabeljs