在纯 HTML 环境中通过 引入 React 应用时，若在 app.js 中使用 import 语法（如 import SeoKeywords from './SeoKeywords.js'），必须将 script 标签声明为模块类型，否则浏览器会抛出 Uncaught SyntaxError: Cannot use import statement outside a module 错误。
在纯 html 环境中通过 `<script>` 引入 react 应用时，若在 `app.js` 中使用 `import` 语法（如 `import seokeywords from './seokeywords.js'`），必须将 script 标签声明为模块类型，否则浏览器会抛出 `uncaught syntaxerror: cannot use import statement outside a module` 错误。</script>
当你从单文件 app.js 迁移至多模块结构（例如拆分出 SeoKeywords.js 并使用 export default / import），本质是从“传统脚本”转向“ES 模块（ECMAScript Modules, ESM）”。而浏览器默认将 <script></script> 视为 classic script，不支持顶层 import/export —— 这正是报错的根本原因。
✅ 正确做法：显式声明模块类型
将 HTML 中的 script 标签更新为：
<div id="app"></div> <script type="module" src="/assets/app.js"></script>
⚠️ 注意：type="module" 是强制要求，缺一不可。添加后，浏览器将以模块上下文执行 app.js，从而支持：
- 顶层
import/export - 相对路径导入（如
./SeoKeywords.js） - 自动启用严格模式（无需
'use strict'） - 模块级作用域（变量不会污染全局）
? 同时需确保模块文件符合规范：
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
-
导出文件（
SeoKeywords.js） 必须使用有效导出语法：// ✅ 正确：默认导出函数组件 export default function SeoKeywords() { return <div className="seo-keywords">SEO Optimized Content</div>; }
// ❌ 错误：JSX 字面量赋值（非组件定义） // const SeoKeywords =
2. **导入文件（`app.js`）** 需匹配导出方式，并正确引入 React 和 ReactDOM：
```js
// app.js（type="module" 下运行）
import React from 'react';
import { createRoot } from 'react-dom/client';
import SeoKeywords from './SeoKeywords.js'; // ✅ 路径需带 .js 后缀（浏览器模块要求）
const container = document.getElementById('app');
const root = createRoot(container);
root.render(
<React.StrictMode>
<SeoKeywords />
</React.StrictMode>
);? 关键细节提醒：
-
文件扩展名不可省略：在
import路径中必须写./SeoKeywords.js，不能写./SeoKeywords（浏览器模块不支持自动解析.js）； -
无构建工具时路径是相对 HTML 页面：
./SeoKeywords.js指的是与当前 HTML 文件同目录下的SeoKeywords.js，而非与app.js的相对位置（除非使用构建工具如 Vite 或 Webpack）； -
React 必须显式导入：即使你用 CDN 加载了 React，模块内仍需
import React from 'react'—— 因为模块作用域隔离，CDN 全局变量不可见； -
Babel 转译需适配模块输出：若你仍用 Babel 处理
app.js，请确认其配置（如@babel/preset-env）目标环境支持模块语法，或改用现代原生模块工作流（推荐）；
? 进阶建议：
若项目持续扩大，建议引入轻量构建工具（如 Vite）替代手动 Babel 转译。Vite 原生支持 JSX + ESM，开发体验更优，且能自动处理路径解析、HMR、代码分割等，避免手工维护模块依赖链的风险。
总结：type="module" 是解锁浏览器端 ES 模块能力的钥匙。只要正确声明、规范导出、显式导入、补全后缀，即可安全实现组件拆分与复用——这是迈向可维护 React 应用的第一步，也是最基础却最关键的一步。
