Troubleshooting

Astro

Uncaught ReferenceError: global is not defined

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

<script>
  window.global = window;
  window.process = {
    env: { DEBUG: undefined },
  } as unknown as NodeJS.Process;
  var exports = {};
</script>

export default defineConfig({
  plugins: [react()],
  resolve: {
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  }
})

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

export default defineConfig({
  plugins: [react()],
  resolve: {
      alias: [
      {
        find: './runtimeConfig',
        replacement: './runtimeConfig.browser',
      },
    ]
  }
})

Create React App

CRA 4: Uncaught ReferenceError: g is not defined

When using Geo components and Create React App v4, users may experience the following error when rendering the <MapView> component in a production build:

Uncaught ReferenceError: g is not defined

The error is related to this maplibre-gl issue and surfaces due to the dropped support for Internet Explorer in maplibre-gl v2. To correct this error, you'll need to adjust your browser target for production to exclude Internet Explorer:

1. In your package.json file of your Create React App, adjust the browserslist.production block from:

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  ...
}

to the following:

"browserslist": {
  "production": [
    "defaults",
    "not ie 11"
  ],
  ...
}

2. Rebuild your production application using npx run build.

3. Run your production build using a tool like serve (serve -s build) and verify the <MapView> component renders without error.

CRA 4: Can’t import the named export ‘Amplify’ from non EcmaScript module (only default export is available)

Create React App v4 is not officially supported by Amplify UI. When you use it, you may get the following error

 ./node_modules/@aws-amplify/ui-react/dist/esm/components/..\/\*.mjs

 Can’t import the named export ‘Amplify’ from non EcmaScript module (only default export is available)

To resolve the error, you may either (1) upgrade to Create React App version 5 (Migration Guide), or (2) override the webpack config using tools like React App Rewired, Craco to add the following rule:

{
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      }
    ]
  }
}

Jest

window.URL.createObjectURL is not a function

As of v2.15.0 of @aws-amplify/ui-react which included the release of Geo components, users of the Jest testing framework may run into the following error when attempting to run tests:

window.URL.createObjectURL is not a function

Please follow the steps below to resolve this issue.

1. Navigate to or create a Jest setup file for your project.

2. Add the following code to polyfill the unrecognized function in your Jest setup file:

if (typeof window.URL.createObjectURL === 'undefined') {
  window.URL.createObjectURL = jest.fn();
}

This is a known problem when using the jsdom library (a dependency of Jest) with a package that uses an unrecognized function. See this issue.

Next.js

Next 13.4+: React Server Components

Next.js 13.4+ introduces app directory with the usage of Server Components. Amplify UI components are intended to be used on the client side. See here for solutions.

Next 13.4+: Module not found Errors

When you use Amplify with Next.js App Router, you will see the follow errors from aws-crt and encoding in the server terminal:

./node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in 'xxx'

./node_modules/@aws-sdk/client-sts/node_modules/@aws-sdk/util-user-agent-node/dist-cjs/is-crt-available.js
Module not found: Can't resolve 'aws-crt' in 'xxx'

These errors will not affect the use and functionality of the client, nor will errors appear in the browser console. This is a known transitive issue when using the AWS SDK. The issue is currently tracked here.

Server-Side Rendering (SSR)

Attempted import error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm').

If you attempt to use Amplify with server-side rendering, you may encounter the following error:

./node_modules/@aws-amplify/ui-react-core/dist/esm/components/FormCore/FormProvider.mjs
Attempted import error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm').

Amplify UI components are interactive and designed to work on the client side. To use them inside of Server Components you must wrap them in a Client Component with "use client". For more information, see the Next.js documentation on how you could achieve this.

Vite

Uncaught ReferenceError: global is not defined

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

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

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

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

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

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

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

If you are still having issues, please see comments on the following issue for additional Vite workarounds. Note that there is active ongoing work to make these modifications unnecessary.

Webpack

Webpack 5+: Uncaught ReferenceError: process is not defined

Follow the instructions below if you are using Webpack 5:

1. Add node-polyfill-webpack-plugin as dev dependency:

2. Add the plugin to your webpack.config.js plugins list:_

  plugins: [
    new NodePolyfillPlugin(), // Polyfill Node.js globals (e.g. global, process, etc)
  ],

Webpack 4: Can’t import the named export ‘Amplify’ from non EcmaScript module (only default export is available)

Follow here for solutions.