React项目执行npm start时index.js报Unknown word错误，如何解决？

错误原因 #

你的报错出现在<App />这一行的<符号位置，本质是JSX语法未被构建工具正确转译——Webpack或Babel没有配置处理React的JSX代码，导致把JSX当成普通JavaScript语法解析，从而抛出"Unknown word"错误。

解决方案 #

1. 确认依赖包已安装 #

确保项目已安装React核心依赖及Babel转译相关包：

npm install react react-dom @babel/core @babel/preset-react babel-loader --save-dev

2. 配置Babel转译规则 #

在项目根目录创建.babelrc文件，添加React预设：

{
  "presets": ["@babel/preset-react"]
}

3. 检查Webpack配置（手动配置Webpack时） #

如果是自定义Webpack项目，确保webpack.config.js中添加了JS/JSX文件的处理规则：

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

4. Create React App项目的特殊处理 #

如果是用create-react-app初始化的项目，大概率是项目依赖损坏或配置被篡改，执行以下步骤重置：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 启动项目
npm start

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