使用yarn deploy部署React应用报错：编译器移除分号致编译失败

问题背景 #

执行yarn deploy部署React应用时编译失败，报错显示编译后的代码因缺少分号导致语法解析错误。报错信息如下：

Failed to compile.

./src/components/firebase/context.js 1:116
Module parse failed: Unexpected token (1:116)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
 * ./node_modules/eslint-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> import React from"react";var FirebaseContext=React.createContext(null);FirebaseContext.displayName="FirebaseContext"export default FirebaseContext;

原始context.js代码：

import React from "react";

const FirebaseContext = React.createContext(null);

export default FirebaseContext;

从编译后的代码可以看出，FirebaseContext.displayName="FirebaseContext"与export default FirebaseContext;之间缺失分号，导致语法拼接错误。

修复方案 #

• 手动添加分号与displayName：在原始文件中显式添加displayName属性并确保末尾加分号，避免编译时出现语句拼接问题：

  import React from "react";
  
  const FirebaseContext = React.createContext(null);
  FirebaseContext.displayName = "FirebaseContext"; // 显式添加属性并加分号
  export default FirebaseContext;
  

• 强制代码添加分号：检查项目ESLint配置（如根目录的.eslintrc文件），设置强制添加分号的规则，确保所有语句末尾都有分号：

  {
    "rules": {
      "semi": ["error", "always"]
    }
  }
  

• 清理缓存重新构建：清理依赖缓存并重新安装，避免旧缓存导致的编译异常：

  yarn cache clean
  rm -rf node_modules yarn.lock
  yarn install
  yarn deploy
  

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