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 }, ] } }) Server-side Rendering (SSR)
Amplify UI components are interactive and designed to work with Client-side rendering (CSR). You must ensure that Amplify UI components are not rendered on the server in SSR-enabled projects.