React项目import/require均失效，运行index.js报语法错误求助

问题根源 #

你遇到的SyntaxError: Unexpected token '<'是因为Node.js默认无法解析React的JSX语法（<是JSX标签的起始符），而且你的当前架构是浏览器端通过babel-standalone实时编译React代码，根本不需要用Node.js运行index.js。

方案1：直接用浏览器运行（适配你的当前架构） #

1. 确保index.html的依赖和脚本引入正确，示例结构如下：

<!DOCTYPE html>
<html>
<head>
  <title>React App</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <!-- 必须设置type为text/babel，让babel-standalone识别并编译JSX -->
  <script type="text/babel" src="./index.js"></script>
</body>
</html>

2. 修改index.js的导入方式：浏览器端不支持require，改用import，同时确保组件文件路径正确：

import Header from './Header.mjs';

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

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

3. 直接用浏览器打开index.html即可，无需通过Node.js运行脚本。

方案2：用Node.js+构建工具（适合生产环境） #

如果想通过Node.js构建项目（替代浏览器实时编译），需要配置Babel和打包工具（以Webpack为例）：

1. 初始化项目：

npm init -y

2. 安装依赖：

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

3. 配置babel.config.json（替代.babelrc）：

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

4. 配置webpack.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};

5. 修改index.js为标准ES模块写法：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Header from './Header.mjs';

function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

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

6. 执行构建命令：

npx webpack --mode development

7. 打开dist/index.html查看运行效果。

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