Mac下React应用报SyntaxError: Unexpected token '<'问题求助

问题描述 #

在Mac上开发React应用，期望正常显示home、login、signup页面，但终端抛出SyntaxError: Unexpected token '<'错误。

App.js代码 #

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';

//Pages
import home from './pages/home';
import login from './pages/login';
import signup from './pages/signup';


export class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <Switch>
            <Route exact path="/" component={home} />
            <Route exact path="/login" component={login} />
            <Route exact path="/signup" component={signup} />
          </Switch>
        </Router>
      </div>
    );
  }
}

export default App;

package.json配置 #

{
  "name": "business-continuity-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.3.4",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "type": "module",
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/standalone": "^7.21.2",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }
}

错误栈信息 #

SyntaxError: Unexpected token '<'

at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)

at ESMLoader.moduleProvider (node:internal/modules/esm/loader:468:14)

at async link (node:internal/modules/esm/module_job:68:21)

解决建议 #

1. 移除"type": "module"配置 #

Create React App默认使用CommonJS模块系统，你在package.json中添加的"type": "module"会让Node.js以ES模块方式解析文件，和CRA的构建流程冲突，导致无法正确编译JSX中的<符号，直接删除这一行即可。

2. 清理冗余Babel配置 #

CRA已经内置了完整的Babel配置，手动添加的顶层"presets"字段、devDependencies中的babel相关包（如@babel/core、babel-cli等）都是多余的，还可能引发版本冲突：

• 删除package.json中的顶层"presets"字段
• 删除devDependencies下所有babel相关依赖
• 保留"babel"字段没问题，若后续仍有问题，也可暂时移除，使用CRA默认配置

3. 检查页面组件的导出与命名 #

• 确保./pages/home等组件文件是默认导出，示例：

// pages/home.jsx
import React from 'react';

const Home = () => {
  return <div>Home Page</div>;
};

export default Home;

• React组件命名需首字母大写，建议把App.js中的导入改为import Home from './pages/home';，对应Route的component={Home}，符合规范同时避免潜在问题。

4. 清除缓存并重启项目 #

执行以下命令清理依赖缓存，再重启开发服务：

rm -rf node_modules
rm package-lock.json
npm install
npm start

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