Troubleshooting

Workarounds for common issues using Amplify UI.

Vite

When working with a Vite project you must make a few modifications. Please follow the steps below.

1. Add the following script tag to the index.html file right before the </body> tag. This will only run on the client side and will polyfill Node globals.

  <script>
    window.global = window;
    window.process = {
      env: { DEBUG: undefined },
    }
    var exports = {};
  </script>
</body>

2. Update the vite.config.ts (or vite.config.js) and add a resolve alias inside the defineConfig({}) as seen below.

export default defineConfig({
  plugins: [vue()],
  resolve: {
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser', // ensures browser compatible version of AWS JS SDK is used
      },
    ]
  }
})

3. (Optional) If you run into TypeScript errors importing aws-exports.js, you may need to update the tsconfig.json file with the following config and add a type declaration file:

  "compilerOptions": {
    "allowJs": true,
  }

aws-exports.d.ts file:

declare const awsmobile: Record<string, any>
export default awsmobile;

1. Add the following script tag to the index.html file right before the </body> tag. This will only run on the client side and will polyfill Node globals.

  <script>
    window.global = window;
    window.process = {
      env: { DEBUG: undefined },
    }
    var exports = {};
  </script>
</body>

2. Update the vite.config.ts (or vite.config.js) and add a resolve alias inside the defineConfig({}) as seen below.

export default defineConfig({
  plugins: [vue()],
  resolve: {
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser', // ensures browser compatible version of AWS JS SDK is used
      },
    ]
  }
})