代码无误却仍报SyntaxError: Unexpected token '<'，求解决

问题背景 #

此前在VS Code中遇到import语句不能在模块外使用的ES6问题，通过两种方法解决：一是在package.json中添加"type": "module"，二是将文件保存为app.mjs。但解决后两种方法均出现如下报错：

SyntaxError: Unexpected token '<'
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18) 
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:483:14)
    at async link (node:internal/modules/esm/module_job:67:21)

使用的代码如下：

导入部分 #

// eslint-disable-next-line no-unused-vars
import logo from './logo.svg';
import './App.css';
import Row from './Row';
import requests from './requests';
import Banner from './Banner.js';
import Nav from './Nav';

组件函数部分 #

function App() {
  return (
    
    <div className="App">
    <Nav />
            <Banner />
            <Row title="NETFLIX ORIGINALS" isLargeRow fetchUrl={requests.fetchNetflixOriginals} />
            <Row title="Trending" fetchUrl={requests.fetchTrending} />
            <Row title="Top Rated" fetchUrl={requests.fetchTopRated} />
            <Row title="Action Movies" fetchUrl={requests.fetchActionMovies} />
            <Row title="Comedy Movies" fetchUrl={requests.fetchComedyMovies} />
            <Row title="Horror Movies" fetchUrl={requests.fetchHorrorMovies} />
            <Row title="Romance Movies" fetchUrl={requests.fetchRomanceMovies} />
            <Row title="Documentaries" fetchUrl={requests.fetchDocumentaries} />
    

    </div>
  );
}

export default App;

错误原因 #

这个报错的核心原因是Node.js本身无法解析React的JSX语法。你写的是React组件代码，其中的<div>、<Nav />等都是JSX标签，但Node.js默认只能处理标准的JavaScript语法，识别不了JSX开头的<符号，所以抛出了Unexpected token '<'的错误。

之前修改package.json的type字段或改为.mjs后缀，是针对纯Node.js项目启用ES模块的方案，但React项目有专门的构建流程，不需要这种操作，反而会干扰React的正常构建逻辑。

解决办法 #

1. 基于Create React App的项目（推荐） #

如果你的项目是用Create React App初始化的，直接使用官方提供的启动命令，不要用node直接执行文件：

npm start
# 或
yarn start

2. 手动搭建的React项目 #

如果是手动搭建的项目，需要配置Babel和Webpack来转译JSX和ES6语法：

• 安装必要依赖：

  npm install @babel/core @babel/preset-react @babel/preset-env babel-loader webpack webpack-cli webpack-dev-server --save-dev
  

• 创建.babelrc配置文件：

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

• 配置webpack.config.js（示例）：

  module.exports = {
    entry: './src/App.js',
    output: {
      filename: 'bundle.js',
      path: __dirname + '/dist'
    },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: 'babel-loader'
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.svg$/,
          use: 'file-loader'
        }
      ]
    },
    devServer: {
      static: './dist',
      hot: true
    }
  };
  

• 在package.json中添加启动脚本：

  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
  

• 撤销之前的错误修改：删除package.json中的"type": "module"字段，将.mjs文件改回.js或.jsx（React组件推荐用.jsx后缀）

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