React.js中Unexpected token错误的解决方法咨询

错误原因 #

你遇到的Module parse failed: Unexpected token错误，是因为构建工具（Webpack+Babel）未配置支持**ES2020可选链操作符（?.）**的语法解析能力，导致无法识别message?.attachments?.length这类写法。

解决步骤 #

1. 确保Babel支持可选链语法 #

• 若使用Babel 7.8.0及以上版本：@babel/plugin-proposal-optional-chaining已默认包含在@babel/preset-env中，只需确保Babel配置正确引入@babel/preset-env和@babel/preset-react。
• 若Babel版本低于7.8.0：单独安装插件，执行命令：

  npm install --save-dev @babel/plugin-proposal-optional-chaining
  

2. 配置Babel文件 #

修改babel.config.json或.babelrc文件，配置如下：

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

3. 检查Webpack的Loader配置 #

确认Webpack的babel-loader正确处理JS/JSX文件，在webpack.config.js中添加或修改规则：

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

4. 修复代码中的模板字符串错误 #

代码中backgroundImage的写法有误，单引号无法解析模板变量，需改为反引号：

style={{backgroundImage: `url(${message?.sender?.avatar})`}}

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