React应用报错：Module parse failed: Unexpected token 求助

问题根源 #

你代码里的foodItems?.filter用到了ES2020的可选链操作符?.，但项目当前的webpack/babel配置没有支持这个语法的loader，导致编译失败。framer-motion降级可能间接影响了依赖版本或配置，引发了这个问题。

解决步骤 #

• 安装必要的babel依赖
  打开终端执行：

  npm install --save-dev @babel/plugin-proposal-optional-chaining @babel/core @babel/preset-env @babel/preset-react
  

• 配置babel规则
  在项目根目录创建或修改babel.config.js，添加以下内容：

  module.exports = {
    presets: ["@babel/preset-env", "@babel/preset-react"],
    plugins: ["@babel/plugin-proposal-optional-chaining"]
  };
  

• 确保webpack正确处理JSX文件
  如果是自定义webpack配置，在webpack.config.js的module.rules中添加：

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  }
  

• 重置依赖并重启项目

  rm -rf node_modules package-lock.json
  npm install
  npm start
  

补充方案（Create React App项目） #

如果你的项目是用Create React App创建的，无需手动配置babel，直接升级react-scripts即可：

npm install react-scripts@latest

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