React项目中用export声明类提示‘exports is not defined’如何解决？

这个问题我之前也碰到过！核心原因是浏览器原生不支持Node.js风格的CommonJS模块系统（也就是exports/module.exports这些变量），而且你当前的脚本加载方式也没有启用ES模块支持，所以写export class时浏览器识别不了，就抛出了这个错误。咱们一步步来解决：

为什么普通class没问题，加export就报错？ #

当你写普通class className时，这个类是作为全局变量存在的，浏览器可以直接识别并使用；但加上export后，这就变成了模块语法——要么是ES模块的export，要么被Babel转译成了CommonJS的exports代码，但浏览器既没有CommonJS的运行环境，也没把你的脚本当成ES模块加载，自然就找不到exports变量了。

具体解决方案 #

方案1：用全局类（适合小型原型/快速测试） #

如果你的项目不需要复杂的模块化，直接去掉export，把类暴露成全局变量就行：

// 直接声明全局类，React可以直接使用
class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

// 如果需要在其他脚本里引用这个类，也可以手动挂到window上
window.MyComponent = MyComponent;

这样就能和之前一样正常运行，完全不用改脚本引入顺序。

方案2：启用浏览器ES模块支持 #

如果你想保留export/import的模块化写法，可以让浏览器以ES模块的方式加载脚本：

1. 修改脚本标签：把你自己的主脚本标签加上type="module"属性：

<!-- 原来的普通脚本 -->
<script src="your-script.js"></script>
<!-- 修改成ES模块 -->
<script type="module" src="your-script.js"></script>

2. 调整模块导入导出：

// 在组件文件（比如MyComponent.js）里导出类
export class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

// 在主脚本里导入并使用
import { MyComponent } from './MyComponent.js';

ReactDOM.render(<MyComponent />, document.getElementById('root'));

注意：现代浏览器（Chrome 61+、Firefox 60+等）都支持ES模块，但你引入的React等库最好用支持ES模块的版本，比如可以用CDN提供的ES模块链接（比如https://unpkg.com/react@18/esm/react.production.min.js）。

方案3：用模块打包工具（推荐正式项目使用） #

对于真正的React项目，强烈推荐用Webpack、Vite或者Parcel这类工具，它们会帮你处理所有模块语法，把代码打包成浏览器能直接运行的文件：

1. 初始化项目并安装依赖：

npm init -y
npm install react react-dom
npm install --save-dev vite @vitejs/plugin-react

2. 配置Vite（非常简单），然后用npm run dev启动开发服务器，或者npm run build打包生产代码。
   这样你就可以自由使用export/import、JSX等语法，再也不会碰到exports is not defined的问题了。

内容的提问来源于stack exchange，提问作者A.J