React组件与webpack配置不同目录时报JSX语法错误如何解决？

问题原因 #

Babel 默认只会从被编译文件的所在目录向上查找配置文件，并且默认会停止在 package.json 所在的工作目录（也就是你这里的src/js/node/目录）。你的st-product-detail.js放在node目录外的同级st-product-detail目录下，编译这个文件的时候，Babel 找不到你放在node目录里的.babelrc配置，所以没有加载@babel/preset-react，导致无法识别JSX语法。你把文件移动到node目录下能正常编译，也正好对应这个逻辑：该目录下的文件在.babelrc的查找范围内，可以正常读取配置。

解决方法（二选一即可） #

1. 更换Babel配置文件格式
   将node目录下的.babelrc重命名为babel.config.json，文件内容不需要修改。babel.config.json是Babel 7+提供的全局配置格式，会作用于整个项目，不管被编译的文件在项目下的哪个目录，都可以读取到该配置。

2. 在webpack配置中显式指定Babel配置路径
   修改webpack.config.js中的babel-loader规则，强制指定要加载的配置文件路径：

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    // 显式指定.babelrc的绝对路径
                    configFile: path.resolve(__dirname, '.babelrc')
                }
            }
        }
    ]
}

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