CODEWITHSUNDEEP
reactjsbuildaws-amplifyvite
ChJ4m3s
ChJ4m3s

Reputation: 369

Build problem with React viteJS and was amplify

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

Upvotes: 7

Views: 11091

Answers (5)

Parag Kutarekar
Parag Kutarekar

Reputation: 1055

It appears root cause of this type of issue is that aws-amplify JS lib is relying on Node specific features. There is a two part workaround:

  1. To solve errors like 'xxxxx' is not exported by __vite-browser-external add additional alias for ./runtimeConfig to the vite.config.ts file. So it will look something like:
alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      './runtimeConfig': './runtimeConfig.browser',
    },
  1. To solve error like Uncaught ReferenceError: global is not defined, declare corresponding global variable in your topmost html file (index.html)
<script>
    var global = global || window;
    var Buffer = Buffer || [];
    var process = process || {
      env: { DEBUG: undefined },
      version: []
    };
</script>

There is github issue open for more than a year now: https://github.com/aws-amplify/amplify-js/issues/9639

Upvotes: 1

Fanna1119
Fanna1119

Reputation: 2316

when using an array of aliases.


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

    ]
  }

Upvotes: 3

user2335852
user2335852

Reputation: 11

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

Upvotes: 1

Mike Miller
Mike Miller

Reputation: 3129

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

Upvotes: 15

ChJ4m3s
ChJ4m3s

Reputation: 369

In vite.config.js add:

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

in define field

Upvotes: 20

Related Questions