React 中使用 ES 模块导入组件的完整实践指南-js教程-PHP中文网

React 中使用 ES 模块导入组件的完整实践指南

在纯 HTML 环境中通过引入 React 应用时，若在 app.js 中使用 import 语法（如 import SeoKeywords from './SeoKeywords.js'），必须将 script 标签声明为模块类型，否则浏览器会抛出 Uncaught SyntaxError: Cannot use import statement outside a module 错误。

在纯 html 环境中通过 `<script>` 引入 <a style="color:#f60; text-decoration:underline;" title= "react"href="https://m.php.cn/zt/15722.html" target="_blank">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

使用 @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 =

...

; // → 将导致 "Element type is invalid" // export default 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></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）目标环境支持模块语法，或改用现代原生模块工作流（推荐）；