编写块级作用域函数时遇Module parse failed编译错误求助

原因分析 #

报错指向的Unexpected token大概率是因为编译工具（Babel/Webpack）不支持ES2020引入的可选链操作符?.，或是相关配置未正确启用该语法支持。

解决方案1：启用Babel对可选链的支持 #

如果使用自定义Babel配置，需安装对应插件并完成配置：

1. 安装依赖：

   npm install @babel/plugin-proposal-optional-chaining --save-dev
   # 若用到空值合并运算符??，同步安装下面的插件
   npm install @babel/plugin-proposal-nullish-coalescing-operator --save-dev
   

2. 在babel.config.json或.babelrc中添加插件：

   {
     "presets": ["你的现有preset（比如@babel/preset-react）"],
     "plugins": [
       "@babel/plugin-proposal-optional-chaining",
       "@babel/plugin-proposal-nullish-coalescing-operator"
     ]
   }
   

如果使用Create React App，确保react-scripts版本在v3.3.0及以上（该版本开始默认支持可选链）；若版本过低，直接升级即可：

npm install react-scripts@latest

解决方案2：替换可选链为传统存在性检查 #

若暂时不想调整编译配置，可将可选链语法替换为ES5兼容的写法：

{place && place.cuisine && place.cuisine.map(({name})=> (
    <Chip key={name} size='small' label={name} className='chip' />
))}

解决方案3：检查Webpack Loader配置 #

确保Webpack的babel-loader正确处理.jsx文件，在webpack.config.js中确认以下配置：

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

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