Next.js静态构建在Android 4.4环境下报错Set未定义，求解决方案

我之前也踩过类似的Android 4.4 WebView兼容坑，给你几个实际验证有效的解决思路：

• 手动兜底引入Set的Polyfill
  虽然你已经配置了babel的useBuiltIns，但有时候Next.js的打包逻辑可能没把Polyfill正确注入到客户端代码里。可以在你的_app.js（或者应用的入口文件）最顶部直接手动引入：

  import 'core-js/es/set';
  // 如果想覆盖更多ES6+特性，也可以用更全的引入：
  // import 'core-js/stable';
  

  Android 4.4的WebView基于Chrome 30左右的版本，原生完全不支持ES6的Set对象，必须确保Polyfill被优先加载。

• 调整Next.js的WebPack配置，强制注入Polyfill
  可以在next.config.js里修改WebPack配置，把Polyfill添加到客户端入口的最前面，确保它在任何其他代码之前执行：

  module.exports = {
    webpack: (config, { isServer }) => {
      // 只在客户端打包时注入Polyfill
      if (!isServer) {
        // 把Set的Polyfill加到入口数组的首位
        config.entry.main = ['core-js/es/set', ...config.entry.main];
      }
      return config;
    },
  };
  

• 检查Android WebView的基础配置
  有时候问题不一定出在前端代码上，Android 4.4的WebView默认有一些限制，需要确保这些配置项被开启：

  WebView webView = findViewById(R.id.your_webview);
  WebSettings webSettings = webView.getSettings();
  webSettings.setJavaScriptEnabled(true); // 必须开启JS支持
  webSettings.setDomStorageEnabled(true); // 开启DOM存储，避免部分JS特性因存储限制无法工作
  webSettings.setAllowFileAccess(true);
  

• 转译第三方依赖中的ES6代码
  有些npm包可能直接使用了Set等ES6特性却没做向下兼容，默认情况下Babel不会转译node_modules里的代码。你可以修改WebPack配置，让Babel转译那些不兼容的依赖：

  module.exports = {
    webpack: (config) => {
      config.module.rules.push({
        test: /\.js$/,
        // 把有问题的依赖包从排除列表中移除，比如假设是`lodash-es`存在兼容问题
        exclude: /node_modules(?!\/lodash-es)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['next/babel'],
          },
        },
      });
      return config;
    },
  };
  

按这个顺序尝试下来，应该能解决Android 4.4 WebView里的「Set is not defined」问题。

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