为什么使用create-react-app搭建的React.js项目出现child编译错误？

问题原因 #

你修改了create-react-app默认生成的public/index.html文件，存在两处错误：

• <link>标签放在了<head>标签外部，不符合HTML语法规范
• 手动添加了<script src="./src/index.js"></script>引入代码，create-react-app的构建工具会自动将编译后的前端资源注入到HTML文件中，不需要手动引入src目录下的源码文件。浏览器无法直接识别React JSX语法和ES模块导入规则，直接引入源码会直接触发运行报错。

解决步骤 #

1. 修改public/index.html文件内容为以下代码，删除手动添加的script引入，调整link标签位置：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
    <link href="./style.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

2. 确认你是通过npm start命令启动项目，不要直接在浏览器中打开HTML文件运行。
3. 如果修改后仍有报错，可以先删除项目下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖后再次启动项目即可。

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