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

【问题标题】：Babel-loader not transpiling JSX component. ModuleParseErrorBabel-loader 没有转译 JSX 组件。模块解析错误
【发布时间】：2022-01-11 03:22:23
【问题描述】：

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

ModuleParseError：模块解析失败：意外令牌 (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"
    ]
}

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

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

然后将组件导入为：

import StandaloneComponent from 'testcomponent'

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

【问题讨论】：

我看到您正在排除您的 node_modules 文件夹。您需要包含包

标签： javascript reactjs webpack next.js babel-loader

【解决方案1】：

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

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

【讨论】：

你好。我确实尝试按照建议更新正则表达式格式。它仍然抛出同样的错误。
你建立了这个项目吗？
是的，更新正则表达式后，我做了npm run build，然后是npm pack
你使用的是哪种格式？
抱歉，没听懂。您能否解释一下您所说的格式是什么意思？

【解决方案2】：

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

exclude: /(node_modules)/,

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

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

【讨论】：