使用 React viteJS 构建问题并被放大

Question

我的问题很容易解释。我使用 ViteJS 初始化了一个 React 项目，然后为后端添加了 aws-amplify。我开发了该项目，并且一切都在运行 npm run dev 的本地环境中运行。问题是我无法构建它。您可以在下面的文本中看到错误。你有什么主意吗？

“request”不是由 __vite-browser-external 导出的，而是由 node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js 导入的

错误日志

Answer 1

在 vite.config.js 中添加：

resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
}

在定义字段中

Answer 2

适用于 AWS SDK 和 Amplify 的 React polyfilled 工作配置

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: "globalThis", //<-- AWS SDK 
      },
    },
  },
  build: {
    rollupOptions: {
      plugins: [
        // Enable rollup polyfills plugin
        // used during production bundling
        rollupNodePolyFill(),
      ],
    },
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser', // <-- Fix from above
    },
  }
});