Babel-loader 没有转译 JSX 组件。 模块解析错误

Question

我正在尝试将独立组件构建为 package。 我正在使用 webpack 将所有 CSS 和 JS/JSX 文件转换为 JS。 我能够构建 package 并使用npm pack将其打包到.tgz文件中。 但是，当我在另一个项目中安装 package 并尝试使用已安装的 package 中的组件时。 我收到此错误：

ModuleParseError: Module parse failed: Unexpected token (34:8) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件。

而且，在正在运行的项目的终端中，我得到了这个：

错误 - SyntaxError: 不能在模块外使用 import 语句

webpack.config.js

const path = require('path')

module.exports = {
    mode:'production',
    entry:'./src/components/StandaloneComponent.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'StandaloneComponent.js',
        libraryTarget:"commonjs2"
    },
    module:{

        rules:[
            {
                test:/\.js|jsx$/,
                exclude:/(node_modules)/,
                use:'babel-loader'
            },
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    resolve:{
        alias:{
            'react':path.resolve(__dirname,'./node_modules/react'),
            'react-dom':path.resolve(__dirname,'./node_modules/react-dom'),
            'next':path.resolve(__dirname,'./node_modules/next')
        }
    },

    externals:{
        react:{
            commonjs:"react",
            commonjs2:"react",
            amd:"React",
            root:"React"
        },
        "react-dom":{
            commonjs:"react-dom",
            commonjs2:"react-dom",
            amd:"ReactDOM",
            root:"ReactDOM"
        },
        next:{
            commonjs:"next",
            commonjs2:"next",
            amd:"Next",
            root:"Next"
        }
    }
}

package.json

{
  "name": "testcomponent",
  "version": "1.0.3",
  "description": "A lightweight and easy to use package.",
  "main": "./src/components/StandaloneComponent.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [
    "NextJS",
    "react"
  ],
  "peerDependencies": {
    "next": "^12.0.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "prop-types": "^15.7.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "@babel/preset-stage-0": "^7.8.3",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "next": "^12.0.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^3.3.1",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1"
  }
}

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

我在另一个项目中进一步安装了这个 package，如下所示：

npm install path/to/tgz/testcomponent-1.0.3.tgz

然后将组件导入为：

import StandaloneComponent from 'testcomponent'

作为一种可能的解决方法，我尝试将组件文件的扩展名从.js更改为.jsx并重建.tgz ，但得到了相同的结果。 看错误，感觉是babel-loader无法将JSX转成JS，进而导致导入错误，但我也不是很确定。 什么可能导致此错误？ 任何帮助表示赞赏。
谢谢。

Answer 1

在这种情况下，您用于加载 JS 和 JSX 文件（即test:/\.js|jsx$/ ）的正则表达式规则似乎不正确。 您可以通过以下两种方式修复它：

1. 使用捕获组：因此，当使用 or 时，您需要将两个字符集捕获为/\.(js|jsx)$/ 。 这将同时考虑 js 和 jsx 扩展。 由于缺少字符集，早期版本无法正确匹配正则表达式。
2. 使用? 发生：您还可以修改您的正则表达式以使用x作为零或一个使用? 匹配器。 所以另一个选项是/\.jsx?$/

Answer 2

我相信您需要包含您安装在include下的 package 否则看起来 Webpack 配置为忽略您的node_modules文件夹：

exclude: /(node_modules)/,

所以一定要让 Webpack 知道你想要编译的node_modules中的哪些文件夹

include: [
  path.resolve(__dirname, 'node_modules/testcomponent'
]