Babel加载程序未传输JSX组件.ModuleParseError

Question

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

ModuleParseError:模块解析失败：意外的令牌(34:8(您可能需要一个适当的加载器来处理此文件类型，目前没有配置任何加载器来处理该文件。

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

error-SyntaxError:无法在模块之外使用导入语句

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

我在另一个类似的项目中进一步安装了这个包：

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$/(的regex规则似乎不正确。您可以通过以下两种方式修复它：

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

Answer 2

我认为您需要包括您在include下安装的软件包，否则看起来Webpack被配置为忽略您的node_modules文件夹：

exclude: /(node_modules)/,

因此，请确保让Webpack知道您想要编译的node_modules中的哪些文件夹

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