NextJS 13中Webpack报错ReferenceError: global is not defined求助

方案1：在Webpack配置中全局注入global变量 #

问题核心是浏览器环境不存在Node.js的global对象，而工具函数可能依赖了这个变量。可以在Webpack配置中给客户端环境注入global，映射到浏览器的window对象。

修改你nextConfig中的webpack配置部分：

webpack: (config, { isServer }, options) => {
  config.module.rules.push(
    {
      test: /\.mdx?$/,
      use: [
        {
          loader: '@mdx-js/loader',
          /** @type {import('@mdx-js/loader').Options} */
          options: {...options},
        },
      ],
    },
    {
      test: /\.ya?ml$/,
      oneOf: [
        {
          resourceQuery: /stream/,
          options: { asStream: true },
          loader: 'yaml-loader',
        },
        { loader: 'yaml-loader' },
      ],
    }
  );

  if (!isServer) {
    config.resolve.fallback = {
      fs: false,
    };
    // 新增：注入global变量映射到window
    config.plugins.push(
      new config.webpack.DefinePlugin({
        global: 'window',
      })
    );
  }

  config.infrastructureLogging = {
    level: 'error',
  };
  return config;
},

方案2：在工具函数中做环境兼容处理 #

如果工具函数中明确用到了global，可以直接在工具文件里添加环境判断，避免跨环境报错：

// utils/你的工具文件.js
// 定义兼容全局对象的变量
const globalContext = typeof window !== 'undefined' ? window : global;

// 替换原来使用global的地方，比如：
// global.someVariable → globalContext.someVariable

这种方式更精准，只修改有问题的工具代码，不会影响全局配置。

方案3：添加全局Polyfill文件 #

创建一个专门的Polyfill文件来补全浏览器的global对象：

1. 在app目录下新建global-polyfill.js：

if (typeof global === 'undefined') {
  window.global = window;
}

2. 修改Webpack配置，让客户端入口先加载这个文件：

if (!isServer) {
  config.resolve.fallback = {
    fs: false,
  };
  // 新增：客户端入口引入polyfill
  config.entry = async () => {
    const originalEntries = await config.entry();
    return {
      ...originalEntries,
      main: ['./app/global-polyfill.js', ...originalEntries.main],
    };
  };
}

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