React代码在网页中显示未执行，报SyntaxError模块导入错误求助

问题原因分析 #

1. 代码直接显示在网页：要么是直接打开了JS文件而非HTML文件，要么是HTML中未正确通过<script>标签引用JS文件，导致浏览器将JS代码当作纯文本渲染。
2. SyntaxError: Cannot use import statement outside a module：浏览器默认将JS文件视为普通脚本，而非ES模块；同时原生浏览器不支持JSX语法，也无法直接解析React的模块导入。

解决方案一：CDN+Babel快速运行（适合快速测试） #

1. 创建/修改HTML文件（比如放在public/index.html） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>React Demo</title>
    <!-- 引入React、ReactDOM开发版CDN -->
    <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>
    <!-- 引入Babel用于转译JSX语法 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <!-- React挂载的根节点 -->
    <div id="root"></div>
    <!-- 指定script类型为text/babel，让Babel处理JSX -->
    <script type="text/babel" src="../src/your-js-file.js"></script>
</body>
</html>

2. 修改你的JS文件内容 #

用CDN引入后React和ReactDOM会成为全局变量，无需import：

const element = <h1>Hello</h1>;
console.log(element);
// 将元素渲染到页面上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

3. 运行方式 #

用VSCode的Live Server插件打开HTML文件，不要直接打开JS文件。

解决方案二：回归Create React App官方流程（推荐用于正式开发） #

如果你是通过npx create-react-app创建的项目，官方已经配置好Webpack+Babel来处理模块导入和JSX转译，无需手动处理环境：

1. 确保src目录下有index.js（若之前删除，重新创建），内容如下：

import React from 'react';
import ReactDOM from 'react-dom/client';

const element = <h1>Hello</h1>;
console.log(element);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

2. 在项目根目录运行命令：

npm start

3. 浏览器会自动打开项目页面，代码会正常执行并渲染内容。

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