React应用添加第二页时出现无法读取.js文件错误

错误原因分析 #

你遇到的SyntaxError: expected expression, got '<'本质上有两个核心问题：

1. CRA开发服务器不暴露src目录：当你在monsters.html里用../src/monsters.js引用文件时，服务器并不会返回真实的JS文件，而是返回index.html的内容（CRA的路由 fallback 机制）。浏览器把HTML代码当成JS解析，自然会在第一行的<符号处报错。
2. 未编译的React代码无法被浏览器直接解析：即使能访问到monsters.js，浏览器也不认识JSX语法和ES模块的import语句——这些都需要经过webpack编译才能在浏览器中运行。

无需安装插件的解决方案 #

下面提供一种完全符合你“不装新插件、不做重大修改”需求的实现方式：

步骤1：修改monsters.html（保留在public目录）

直接在HTML中通过CDN引入React、ReactDOM和Babel，这样就能直接写React代码，不需要依赖src目录的编译流程：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <title>Monsters 2</title>
  <!-- 引入UMD版本的React和ReactDOM（生产环境版，开发版可以换development.min.js） -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <!-- 引入Babel Standalone来解析JSX语法 -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div>Foo</div>
  <div id="root2"></div>

  <!-- 用text/babel类型让Babel自动解析JSX -->
  <script type="text/babel">
    // 定义你的App组件
    const App = () => {
      return <h1>Welcome to Monsters Page!</h1>;
    };

    // React 18使用createRoot替代旧的render方法
    const root = ReactDOM.createRoot(document.getElementById('root2'));
    root.render(<App />);
  </script>
</body>
</html>

步骤2：移除src目录的monsters.js

现在你不需要src目录下的monsters.js了，所有React逻辑都直接写在monsters.html的script标签里，访问localhost:3000/monsters.html就能正常显示页面。

额外说明 #

如果你希望把React逻辑拆成单独的JS文件，可以在public目录下创建一个monsters.js（注意是public目录，不是src），然后在monsters.html里引用它：

<!-- 在monsters.html的body末尾添加 -->
<script type="text/babel" src="./monsters.js"></script>

然后public/monsters.js里写：

const App = () => {
  return <h1>Welcome to Monsters Page!</h1>;
};

const root = ReactDOM.createRoot(document.getElementById('root2'));
root.render(<App />);

这样既保持了代码分离，又不需要依赖src目录的编译流程。

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