Build problem with React viteJS and was amplify

Question

my question is quite simple to explain. I've initialized a React project with ViteJS and then added aws-amplify for the backend. I developed the project and everything works in my local environment running npm run dev. The problem is that I cannot build it. You can see the error in the text below. Do you have any idea?

'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js

Error logs

Answer 1

In vite.config.js add:

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

in define field

Answer 2

when using an array of aliases.

  resolve: {
    alias: [
      {
        find: '@', replacement: path.resolve(__dirname, './src'),
      },
      {
        find: './runtimeConfig', replacement: './runtimeConfig.browser',
      }

    ]
  }

Answer 3

Working config for React polyfilled for AWS SDK and Amplify

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
    },
  }
});

Answer 4

For the issue "'request' is not exported by __vite-browser-external", just install the http package (e.g 'npm i http')