Babel-loader未转译JSX组件触发ModuleParseError错误如何解决？

两个报错的核心原因完全一致：你的package.json中main字段配置错误，导致其他项目安装你的包时，直接引入了未经过babel转译的源文件，而非webpack打包后的兼容产物。源文件中包含JSX语法和ES模块import语句，而绝大多数项目默认不会编译node_modules下的文件，因此既无法识别JSX，也无法在非模块上下文中处理import语句。
同时你的webpack配置中JS/JSX的匹配正则存在书写错误，也可能导致转译不生效。

• 修正package.json的main字段，指向webpack打包后的产物：

// 把原来的配置
"main": "./src/components/StandaloneComponent.js"
// 替换为
"main": "./dist/StandaloneComponent.js"

• 修正webpack配置中JS/JSX文件的匹配正则，避免匹配错误：

// webpack.config.js 中把原来的rule
test:/\.js|jsx$/
// 替换为
test: /\.(js|jsx)$/

• 可选优化：在package.json中新增files字段，限定打包到tgz中的文件范围，避免把未编译的源码一起发布：

"files": ["dist"]

• 配置修改完成后，重新执行npm run build打包，再执行npm pack生成新的tgz安装包，到目标项目中重新安装测试即可。

内容的提问来源于stack exchange，提问作者Prajwal Kulkarni