React 16配置Azure MSAL遇模块解析错误，求加载器适配方案

问题根源 #

你遇到的模块解析错误，本质是旧版react-scripts（v1.1.5）的Webpack/Babel配置无法处理@azure/msal-react包中的现代JS语法，同时你的Babel配置存在语法错误，进一步加剧了问题：

1. react-scripts@1.x是Create React App v1的版本，默认不会转译node_modules目录下的第三方包，而@azure/msal-react输出的ES模块包含未转译的语法（比如对象展开、类属性等），导致Webpack无法解析。
2. 你的.babelrc配置存在错误：插件名称拼写错误（缺少plugin-前缀），且未添加React预设，无法处理JSX语法。

解决方案 #

方案一：升级react-scripts（推荐） #

react-scripts@3.x完全兼容React 16，且默认支持更多现代JS语法，同时优化了第三方包的转译逻辑：

1. 卸载旧版本：

npm uninstall react-scripts

2. 安装兼容React 16的稳定版本：

npm install react-scripts@3.4.4 --save

3. 删除node_modules和package-lock.json，重新安装依赖：

rm -rf node_modules package-lock.json
npm install

4. 启动项目：

npm start

方案二：不升级react-scripts，通过react-app-rewired修改Webpack配置 #

如果必须保留react-scripts@1.x，可以用react-app-rewired自定义Webpack规则，让Babel转译MSAL相关包：

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 修改package.json中的scripts：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

3. 在项目根目录创建config-overrides.js，添加以下配置：

const { override, babelInclude } = require('customize-cra');
const path = require('path');

module.exports = override(
  babelInclude([
    path.resolve('src'),
    // 让Babel转译MSAL相关包
    path.resolve('node_modules/@azure/msal-react'),
    path.resolve('node_modules/@azure/msal-browser')
  ])
);

4. 修正.babelrc的错误配置：

{
    "presets": [
        "@babel/preset-react",
        "@babel/preset-typescript",
        [
            "@babel/preset-env",
            {
                "modules": "commonjs",
                "targets": {
                    "browsers": [
                        ">0.2%",
                        "not dead",
                        "not op_mini all"
                    ]
                }
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread"
    ]
}

5. 重新启动项目即可。

额外说明 #

• 不要直接修改react-scripts内置的Webpack/Babel配置，除非你执行eject（不可逆操作）。
• @azure/msal-react@1.5.4兼容React 16，但需要确保你的构建工具能处理它的语法输出。

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