Cannot use amplify-js in browser environment (breaking vite / snowpack / esbuild)

Describe the bug

The package aws-amplify is meant to be used in the browser, isnt it? Therefore it should not rely on node builtins, which sadly is the case and prevents the usage of this package in many js build tools like rollup, snowpack or vitejs.

The @aws-sdk package which is used by aws-amplify relies on various node build in modules like fs, process or http2, …

I described the issue also here (https://github.com/vitejs/vite/issues/1374) and Evan You the creator of vuejs and vite mentioned that webpack will drop support for node build ins in version five. Because webpack is used by tools such as create-react-app and vue-cli this will block many developers from using the amplify package soon I think!

To Reproduce Steps to reproduce the behavior:

1. Download https://github.com/sem4phor/aws-cli-bug
2. Run npm run dev (node required)
3. See error in console

Expected behavior The package works in the browser and does not import any node build ins which are not available in browser environment.

Code Snippet https://github.com/sem4phor/aws-cli-bug

Screenshots

[plugin:vite:imports] Failed to resolve import "process". Does the file exist?
/Users/XXXXX/node_modules/@aws-sdk/util-user-agent-node/dist/es/index.js:1:22
1  |  import process from "process";
   |                       ^
2  |  export function defaultUserAgent(packageName, packageVersion) {
3  |      var engine = process.platform + "/" + process.version;
Error: Failed to resolve import "process". Does the file exist?
    at TransformContext.error (C:\Users\XXXXX\node_modules\vite\dist\node\chunks\dep-262f13eb.js:59552:50)
    at TransformContext.transform (C:\XXXXX\node_modules\vite\dist\node\chunks\dep-262f13eb.js:52957:30)
    at async Object.transform (C:\Users\XXXXX\node_modules\vite\dist\node\chunks\dep-262f13eb.js:59742:30)
    at async transformRequest (C:\Users\XXXXX\node_modules\vite\dist\node\chunks\dep-262f13eb.js:65977:29)
    at async C:\Users\XXXXX\node_modules\vite\dist\node\chunks\dep-262f13eb.js:66068:32

What is Configured? Not relevant for this error.

• OS: Windows 10
• Browser: Chrome 87
• aws-amplify 3.3.13

[RussMax783]

YES!!! I’ve been stuck on this for days!!! Thanks to @armenr a couple comments up I was able to get things running with just ‘aws-amplify’ (haven’t tried with the components library yet) All i actually needed was to add

export default defineConfig({
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  ...

Then i can use aws-amplify and actually have the project build as normal

import Amplify, { Auth } from 'aws-amplify';

...

Amplify.configure(configs)

...

For the record i’m using Vite, React, TS. Bootstrapped the project with the vite react template.

"vite": "2.6.12", "aws-amplify": "4.3.3"

(now I’m just waiting for something else to go wrong as I progress through adding more functionality with amplify. Hope this helps you all that are struggling)

[ErikCH]

I found a workaround that can help for now. Eventually this will probably need to be fixed in the @aws-sdk

Add a vite.confg.js file to the root of the project. You’ll need to add a new resolve.alias.

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
        plugins: [vue()],
        resolve: {
                alias: [
                  {
                        find: "./runtimeConfig",
                        replacement: ("./runtimeConfig.browser"),
                  },
                ],
          },

});

Then inside the index.html file add a script tag below the <div id="app></div> but above the module script import

<!-- index.html -->
<script>
      window.global = window;
      var exports = {}
</script>

You need to set window.global and exports. If you don’t set window.global it won’t work in development. If you don’t add in var exports = {} then it will build, but will throw an error when you open it up on your web browser.

I made a branch here you can take a look at too. https://github.com/ErikCH/amplify-js/tree/hotfix/error-with-vite/.github/actions/bundle-size-action/vite