React项目中TypeScript赋值报错：Module parse failed问题解决

你遇到的这个错误是因为项目的构建工具（比如Webpack+Babel）不支持ES2020引入的空值合并运算符??语法，导致无法解析这个符号。下面是几种针对性的解决方法：

1. 如果你用的是Create React App（CRA） #

• 优先升级CRA版本：CRA从v3.3.0开始默认支持ES2020语法，执行升级命令：

  npm install --save react-scripts@latest
  # 或者用yarn
  yarn upgrade react-scripts@latest
  

• 如果不想升级，可以通过react-app-rewired修改Babel配置：
  1. 安装依赖：

     npm install react-app-rewired @babel/plugin-proposal-nullish-coalescing-operator --save-dev
     

  2. 在项目根目录创建config-overrides.js文件，添加内容：

     module.exports = function override(config, env) {
       config.module.rules[1].oneOf.forEach(rule => {
         if (rule.test.toString().includes('jsx|tsx')) {
           rule.options.plugins.push('@babel/plugin-proposal-nullish-coalescing-operator');
         }
       });
       return config;
     };
     

  3. 修改package.json里的启动命令，把react-scripts替换成react-app-rewired：

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

2. 自定义Webpack+Babel配置的项目 #

1. 安装Babel插件：

   npm install @babel/plugin-proposal-nullish-coalescing-operator --save-dev
   

2. 在你的Babel配置文件（babel.config.js或.babelrc）中添加该插件：

   {
     "presets": ["@babel/preset-react", "@babel/preset-typescript"],
     "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
   }
   

   或者使用@babel/preset-env自动适配目标环境，这样会自动引入所需的语法插件：

   {
     "presets": [
       ["@babel/preset-env", {
         "targets": {
           "browsers": ["last 2 versions", "not ie <= 11"]
         },
         "useBuiltIns": "usage",
         "corejs": 3
       }],
       "@babel/preset-react",
       "@babel/preset-typescript"
     ]
   }
   

3. 临时替代方案（不推荐长期使用） #

如果暂时不想调整配置，可以用逻辑或运算符||替代??，但要注意两者的区别：||会把所有假值（比如''、0、false）都替换成emptyActivity，而??只处理null和undefined。如果你的selectedActivity只会是Activity实例或undefined，不会出现其他假值，那么可以这样写：

const initialState = selectedActivity || emptyActivity;

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