在未使用Create React App构建的Express网站中如何正确导入React组件？

你遇到的报错本质是两个问题叠加导致的：

• 浏览器默认将普通<script>引入的文件作为普通脚本处理，不支持ES Module的import/export语法
• 你本地安装了Babel但没有完成编译流程配置，浏览器无法直接识别JSX语法和模块导入规则
  挂在window上的方案不是唯一解，还有两种更规范高效的实现方式：

无需复杂构建配置，只需要调整引入规则即可：

1. 引入Babel运行时转换脚本，用于在浏览器端实时转换JSX语法
2. 修改所有React相关JS文件的引入属性：给<script>标签添加type="text/babel"和data-type="module"属性，同时保证crossorigin属性配置正确
3. 所有组件文件使用标准ES Module语法导出，导入时补全完整相对路径和.js后缀

• 示例代码：
  修改后index.html脚本引入部分

<!-- 原有React引入不变 -->
<script src="你的Babel standalone运行时本地路径" crossorigin></script>
<script type="text/babel" data-type="module" src="./js/Main.js"></script>

Message.js组件代码

export default function Message() {
  return <div>这是Message组件</div>
}

Main.js导入代码

import Message from './components/Message.js'
// 原有Main组件逻辑不变

该方案的缺点是实时转换会消耗浏览器性能，只适合轻量使用场景。

这是工业界主流的规范方案，不需要把现有项目重构为CRA结构，只需要给你的Express项目增加前端资源构建流程即可：

1. 安装必要构建依赖：

npm install @babel/core @babel/preset-react @babel/preset-env babelify browserify
# 也可以选择vite、webpack等其他构建工具，配置更简单

2. 项目根目录新增Babel配置文件babel.config.json：

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

3. 在package.json中新增build命令，将你的React相关代码编译打包成单文件：

{
  "scripts": {
    "build:react": "browserify ./js/Main.js -o ./public/js/bundle.js -t [ babelify ]"
  }
}

4. 修改index.html的引入，直接引入编译后的打包文件即可：

<script src="./js/bundle.js"></script>

该方案的优势是编译后的代码兼容性好、性能高，支持ES Module所有语法，也便于后续做代码压缩、Tree Shaking等优化，适合生产环境使用。

把组件挂载到window上的方案只适合极少量组件的场景，组件数量多了之后很容易出现命名冲突，也无法做依赖管理和代码优化，不建议长期使用。

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