Webpack 无法识别仅来自包模块的 jsx

Question

我有一个导出反应组件的包。

当我安装包和一个组件，以及运行网站时，我收到来自 webpack 的错误：

模块解析失败：意外标记 (84:24) 您可能需要一个合适的加载程序来处理这种文件类型，

此错误涉及包含 jsx 元素的行。

当我复制组件并导入时，它工作正常。

这是我的 webpack.config.js（没有 .babelrc 文件，我也尝试过使用 .bablerc 文件）：

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env", "@babel/preset-react"] }
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"]
        }            
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    hotOnly: true
  }
};

Answer 1

尝试在输出中指示 libraryTarget。

  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js",
    libraryTarget: "commonjs2",
  },

libraryTarget 指定组件的导出方式。有关详细信息，请参阅文档：https://webpack.js.org/configuration/output/#outputlibrarytarget

Webpack 无法识别仅来自包模块的 jsx

Webpack not recognize jsx only from package module

reactjs

webpack

webpack-dev-server