Vite配置中rollup-plugin-node-polyfills文件读取失败求助

当前使用的Vite配置文件如下：

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import react from '@vitejs/plugin-react';

// yarn add --dev @esbuild-plugins/node-globals-polyfill
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
// yarn add --dev @esbuild-plugins/node-modules-polyfill
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
// You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill
import rollupNodePolyFill from 'rollup-plugin-node-polyfills';

import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  resolve: {
    alias: {
      // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill,
      // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
      // process and buffer are excluded because already managed
      // by node-globals-polyfill

      util: 'rollup-plugin-node-polyfills/polyfills/util',
      sys: 'util',
      events: 'rollup-plugin-node-polyfills/polyfills/events',
      stream: 'rollup-plugin-node-polyfills/polyfills/stream',
      path: 'rollup-plugin-node-polyfills/polyfills/path',
      querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
      punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
      url: 'rollup-plugin-node-polyfills/polyfills/url',
      string_decoder: 'rollup-plugin-node-polyfills/polyfills/string-decoder',
      http: 'rollup-plugin-node-polyfills/polyfills/http',
      https: 'rollup-plugin-node-polyfills/polyfills/http',
      os: 'rollup-plugin-node-polyfills/polyfills/os',
      assert: 'rollup-plugin-node-polyfills/polyfills/assert',
      constants: 'rollup-plugin-node-polyfills/polyfills/constants',
      _stream_duplex:
        'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
      _stream_passthrough:
        'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
      _stream_readable:
        'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
      _stream_writable:
        'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
      _stream_transform:
        'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
      timers: 'rollup-plugin-node-polyfills/polyfills/timers',
      console: 'rollup-plugin-node-polyfills/polyfills/console',
      vm: 'rollup-plugin-node-polyfills/polyfills/vm',
      zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
      tty: 'rollup-plugin-node-polyfills/polyfills/tty',
      domain: 'rollup-plugin-node-polyfills/polyfills/domain',
      buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
      process: 'rollup-plugin-node-polyfills/polyfills/process-es6',
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  optimizeDeps: {
    include: ['aws-amplify', 'aws-appsync'],
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: 'globalThis',
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true,
        }),
        NodeModulesPolyfillPlugin(),
        // esbuildCommonjs(
        // ['react-calendar', 'react-date-picker']
        // ),
      ],
    },
  },
  build: {
    rollupOptions: {
      plugins: [
        // Enable rollup polyfills plugin
        // used during production bundling
        rollupNodePolyFill(),
      ],
    },
    commonjsOptions: {
      transformMixedEsModules: true,
    },
    // minify: false,
  },
  // define: {
  //   global: {},
  //   'process.env': process.env,
  // },
});

运行时出现以下错误：

[ERROR] 无法读取文件：/Users/rollup-plugin-node-polyfills/polyfills/url
node_modules/aws-sdk/lib/browser_loader.js:6:19:
6 │ util.url = require('url/');
╵ ~~~~~~
✘ [ERROR] 无法读取文件：/Users/rollup-plugin-node-polyfills/polyfills/qs
node_modules/aws-sdk/lib/browser_loader.js:7:27:
7 │ util.querystring = require('querystring/');

错误根源是aws-sdk代码中引用了带末尾斜杠的url/和querystring/，但当前配置的别名只处理了不带斜杠的模块名，导致解析失败。按以下步骤修改配置：

1. 补充带斜杠的模块别名
   在resolve.alias中添加对应带斜杠的别名，指向正确的polyfill路径：

resolve: {
  alias: {
    // 保留原有所有别名...
    'url/': 'rollup-plugin-node-polyfills/polyfills/url',
    'querystring/': 'rollup-plugin-node-polyfills/polyfills/qs',
    './runtimeConfig': './runtimeConfig.browser',
  },
},

2. 简化polyfill配置（可选）
   手动维护大量别名容易遗漏，可直接依赖rollup-plugin-node-polyfills的自动注入能力，简化配置：

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  optimizeDeps: {
    include: ['aws-amplify', 'aws-appsync'],
    esbuildOptions: {
      define: {
        global: 'globalThis',
      },
      plugins: [
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true,
        }),
        NodeModulesPolyfillPlugin(),
      ],
    },
  },
  build: {
    rollupOptions: {
      plugins: [
        rollupNodePolyFill({
          // 按需指定需要polyfill的模块，也可使用默认覆盖
          include: ['url', 'querystring', 'util', 'stream', 'path']
        }),
      ],
    },
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
});

3. 确认依赖安装
   确保已安装所有必要的开发依赖：

yarn add --dev @esbuild-plugins/node-globals-polyfill @esbuild-plugins/node-modules-polyfill rollup-plugin-node-polyfills

修改完成后重启Vite服务，错误即可解决。

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