如何在NextJS项目中为Mantine库添加globalThis polyfill兼容旧iOS

针对旧版iOS系统中出现的ReferenceError: Can't find variable: globalThis报错，以下是让globalthis polyfill作用于第三方依赖（如Mantine）的具体配置步骤：

1. 安装polyfill包 #

首先安装指定的polyfill包：

npm install globalthis
# 或使用yarn
yarn add globalthis
# 或pnpm
pnpm add globalthis

2. 配置NextJS确保polyfill优先加载 #

有两种可靠的配置方式，任选其一即可：

方式一：通过自定义App入口注入 #

在项目的pages/_app.js（或pages/_app.tsx）文件最顶部导入polyfill，确保它在Mantine等第三方组件之前加载：

// 优先导入polyfill
import 'globalthis/auto';

// 之后再导入Mantine及其他依赖
import { MantineProvider } from '@mantine/core';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <MantineProvider>
      <Component {...pageProps} />
    </MantineProvider>
  );
}

export default MyApp;

方式二：通过webpack全局注入（更彻底） #

修改项目根目录下的next.config.js，配置webpack在所有模块（包括第三方依赖）加载前先注入polyfill：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 重写webpack入口，在所有文件前添加polyfill
    const originalEntry = config.entry;
    config.entry = async () => {
      const entries = await originalEntry();
      
      // 为每个入口文件添加polyfill前缀
      Object.keys(entries).forEach(entryKey => {
        entries[entryKey].unshift('globalthis/auto');
      });

      return entries;
    };

    return config;
  },
};

module.exports = nextConfig;

关键说明 #

• globalthis/auto会自动检测运行环境，仅在缺失globalThis的环境中生效，不会对现代浏览器产生副作用。
• 网上常见示例仅针对自有代码，而上述配置确保polyfill在第三方依赖执行前加载，覆盖Mantine等组件库的运行环境。

配置完成后，重新构建并部署项目，在旧版iOS系统中测试即可解决该报错。

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