非CDN方式运行React报SyntaxError: Unexpected token '<' 求助

报错根因 #

你遇到的SyntaxError: Unexpected token '<'是因为JSX语法无法被原生JavaScript引擎直接识别，你在代码里写的<div>这类标签属于React的语法扩展，必须经过编译转成普通JS函数调用后才能运行，直接把带JSX的文件交给浏览器/Node解析，碰到<字符就会抛出语法错误。

你的现有代码还存在3个其他问题：

• 模块语法混用：.mjs是ES Module规范文件，不支持CommonJS的require写法，同时你写的import { React } from 'react'导入方式也是错的，React是默认导出不是命名导出。
• script标签缺属性：就算JS代码没有语法错误，在HTML里引入ES Module类型的脚本，必须给script标签加type="module"属性，否则浏览器不会按模块规则解析导入语句。
• API版本不匹配：如果你安装的是React 18及以上版本，旧版的ReactDOM.renderAPI已经被废弃，需要使用新的createRoot接口。

无CDN本地运行React的正确方案 #

React本身不能直接在浏览器里裸跑写JSX，必须经过编译打包步骤，以下是最小可用的本地配置流程：

1. 初始化项目并安装依赖
   在项目目录打开终端，依次执行以下命令：

   npm init -y
   npm install react react-dom
   npm install @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli html-webpack-plugin webpack-dev-server --save-dev
   

2. 新建打包配置文件
   在项目根目录创建webpack.config.js，写入以下配置：

   const path = require('path');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js',
       clean: true
     },
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env', ['@babel/preset-react', {runtime: 'automatic'}]]
             }
           }
         }
       ]
     },
     plugins: [
       new HtmlWebpackPlugin({
         template: './public/index.html'
       })
     ],
     mode: 'development',
     devServer: {
       static: './dist',
       port: 3000,
       open: true
     }
   }
   

3. 调整目录结构与文件内容
   • 根目录新建public文件夹，放入HTML文件index.html，不需要手动引入JS脚本，打包工具会自动注入，内容如下：

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>React Test</title>
     </head>
     <body>
         <div id="root"></div>
     </body>
     </html>
     

   • 根目录新建src文件夹，放入JS入口文件index.js，修正之前的语法错误，如果是React 18+版本，代码如下：

     import React from 'react';
     import ReactDOM from 'react-dom/client';
     
     function Page () {
         return (
          <div>
          <h1>Test</h1>
          </div>  
         )
     }
     
     const root = ReactDOM.createRoot(document.getElementById('root'));
     root.render(<Page />);
     

4. 配置运行命令
   打开根目录的package.json，修改scripts字段为：

   "scripts": {
     "start": "webpack serve",
     "build": "webpack"
   }
   

5. 启动项目
   终端执行npm start，会自动拉起本地开发服务运行React项目，全程不需要依赖任何外部CDN资源。

如果你只是想快速测试不想配置打包工具，也可以在HTML里引入Babel的浏览器端编译脚本，但这种方式是运行时实时编译，性能很差，仅适合本地临时测试，不能用于生产环境。

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