使用useState导致React函数组件报错，请求排查修复

1. 检查Webpack Output配置 #

这个错误大概率是Webpack把模块打包成了Node环境的CommonJS格式，而浏览器中没有exports对象导致的。打开你的webpack.config.js，找到output配置项：

• 如果存在libraryTarget: 'commonjs'，直接删除这个配置，或者改成umd/window（适配浏览器环境）
• 示例修正后的output：

output: {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist'),
  // 移除libraryTarget: 'commonjs' 或替换为兼容浏览器的选项
}

2. 调整Babel配置避免模块转译冲突 #

Babel如果把ES模块转成CommonJS，也会和Webpack的模块处理逻辑冲突，导致exports未定义的问题。打开你的Babel配置文件（.babelrc/babel.config.js）：

• 确保@babel/preset-env的modules选项设为false，让Webpack负责模块打包：

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

• 如果你用的是Babel 7.9+，modules默认值是auto，但显式设为false可以避免不必要的转译。

3. 验证Loader配置正确性 #

确保babel-loader正确配置，处理所有JS/JSX文件：

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}

同时确认已经安装了必要依赖：@babel/core、babel-loader、@babel/preset-react、@babel/preset-env。

4. 排除模块混用问题 #

检查项目中是否混用了ES模块（import/export）和CommonJS（require/module.exports）语法，尽量统一使用ES模块语法，避免加载逻辑冲突。

验证修复 #

修改配置后，执行npm run build（或你的打包命令），重新启动项目，测试Example组件是否能正常渲染，exports is not defined错误应该会消失。

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