使用Next.js 13开发网站时遭遇控制台警告问题求助

• 检查 next.config.js 里的预加载配置
  看看是不是手动加了指向 polyfills.js 的预加载规则，要是有，得确认as属性设成了script，示例配置如下：

  module.exports = {
    headers() {
      return [
        {
          source: '/_next/static/chunks/polyfills.js',
          headers: [
            {
              key: 'Link',
              value: '<http://localhost:3000/_next/static/chunks/polyfills.js>; rel="preload"; as="script"'
            }
          ]
        }
      ]
    }
  }
  

  要是这个预加载没必要，直接删掉对应的配置项就行。

• 关掉自动 polyfills
  Next.js 13 有时候会自动注入polyfills，要是你不需要兼容老浏览器，可以在next.config.js里关闭自动注入：

  module.exports = {
    future: {
      webpack5: true,
    },
    webpack: (config, { dev, isServer }) => {
      if (!isServer) {
        config.resolve.fallback = {
          fs: false,
          module: false,
        };
      }
      // 禁用自动 polyfills
      config.module.rules.push({
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['next/babel', { 'preset-env': { useBuiltIns: false } }]
            ]
          }
        }
      });
      return config;
    }
  }
  

• 清缓存重新构建
  执行下面的命令清除Next.js缓存和依赖缓存，再重新构建项目：

  rm -rf .next node_modules
  npm install
  npm run build
  npm run dev
  

• 排查第三方依赖
  有些第三方库会自动加预加载脚本，检查你项目里用的依赖，看看有没有库在注入指向polyfills.js的预加载链接，找到后可以试试更新依赖或者调整它的配置。

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