使用esbuild打包React应用时遇require未定义错误求助

我正在使用esbuild API构建一个基础React应用，但浏览器控制台持续报错：Uncaught ReferenceError: require is not defined at bundle.js。

我的build.js代码如下：

const esbuild = require('esbuild');

async function build() {
  await esbuild.build({
    entryPoints: ['index.js'],
    outfile: './build/bundle.js',
    format: 'cjs',
    loader: { '.js': 'jsx' },
  });
}

build();

已尝试的操作：

• 清除终端历史
• 删除bundle.js并重新生成
• 重启VS Code

解决方案 #

错误根源是你配置了format: 'cjs'（CommonJS模块格式），而浏览器原生环境并不支持Node.js的require语法。可以通过以下两种方式解决：

方式一：改用浏览器支持的模块格式 #

将输出格式替换为浏览器兼容的esm（ES模块）或iife（立即执行函数）：

const esbuild = require('esbuild');

async function build() {
  await esbuild.build({
    entryPoints: ['index.js'],
    outfile: './build/bundle.js',
    format: 'esm', // 也可选择 'iife'
    loader: { '.js': 'jsx' },
    // 若使用iife，可指定全局变量名：globalName: 'MyReactApp'
  });
}

build();

• 若选择esm格式，在HTML中引入脚本时需添加type="module"属性：

  <script type="module" src="./build/bundle.js"></script>
  

方式二：开启打包模式消除外部require #

如果必须使用CommonJS格式，添加bundle: true配置让esbuild将所有依赖打包进单个文件，移除外部的require调用：

const esbuild = require('esbuild');

async function build() {
  await esbuild.build({
    entryPoints: ['index.js'],
    outfile: './build/bundle.js',
    format: 'cjs',
    loader: { '.js': 'jsx' },
    bundle: true, // 新增该配置
  });
}

build();

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