amplify-js: Uncaught ReferenceError: global is not defined (at node_modules/amazon-cognito-identity-js/node_modules/buffer/index.js (index.js:43:30))

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

# Put output below this line

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Memory: 16.93 GB / 31.85 GB
  Binaries:
    Node: 16.20.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (111.0.1661.62)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @aws-amplify/api: ^5.0.23 => 5.0.23
    @aws-amplify/auth: ^5.2.1 => 5.2.1
    @aws-amplify/core: ^5.1.6 => 5.1.6
    @capacitor/app: ^4.1.1 => 4.1.1
    @capacitor/cli: ^4.7.3 => 4.7.3
    @capacitor/core: ^4.7.3 => 4.7.3
    @capacitor/dialog: ^4.1.0 => 4.1.0
    @capacitor/haptics: ^4.1.0 => 4.1.0
    @capacitor/keyboard: ^4.1.1 => 4.1.1
    @capacitor/preferences: ^4.0.2 => 4.0.2
    @capacitor/status-bar: ^4.1.1 => 4.1.1
    @cypress/angular:  0.0.0-development
    @cypress/mount-utils:  0.0.0-development
    @cypress/react:  0.0.0-development
    @cypress/react18:  0.0.0-development
    @cypress/svelte:  0.0.0-development
    @cypress/vue:  0.0.0-development
    @cypress/vue2:  0.0.0-development
    @ionic/react: ^7.0.0 => 7.0.0
    @ionic/react-router: ^7.0.0 => 7.0.0
    @testing-library/jest-dom: ^5.16.5 => 5.16.5
    @testing-library/react: ^14.0.0 => 14.0.0
    @testing-library/user-event: ^14.4.3 => 14.4.3
    @types/crypto-js: ^4.1.1 => 4.1.1
    @types/node: ^18.15.11 => 18.15.11 (14.18.42)
    @types/react: ^18.0.32 => 18.0.32
    @types/react-dom: ^18.0.11 => 18.0.11
    @types/react-router: ^5.1.20 => 5.1.20
    @types/react-router-dom: ^5.3.3 => 5.3.3
    @types/underscore: ^1.11.4 => 1.11.4
    @types/validator: ^13.7.14 => 13.7.14
    @typescript-eslint/eslint-plugin: ^5.57.0 => 5.57.0
    @typescript-eslint/parser: ^5.57.0 => 5.57.0
    @vitejs/plugin-react: ^3.1.0 => 3.1.0
    autoprefixer: ^10.4.14 => 10.4.14
    classnames: ^2.3.2 => 2.3.2
    crypto-js: ^4.1.1 => 4.1.1
    cypress: ^12.7.0 => 12.9.0
    dayjs: ^1.11.7 => 1.11.7
    eslint: ^8.37.0 => 8.37.0
    eslint-config-prettier: ^8.8.0 => 8.8.0
    eslint-plugin-react: ^7.32.2 => 7.32.2
    formik: ^2.2.9 => 2.2.9
    history: ^5.3.0 => 5.3.0 (4.10.1)
    husky: ^8.0.3 => 8.0.3
    ionicons: ^7.1.0 => 7.1.0
    ionicons-loader:  undefined ()
    ionicons/components:  undefined ()
    ionicons/icons:  7.1.0
    jsdom: ^21.1.0 => 21.1.1 (16.7.0)
    lint-staged: ^13.2.0 => 13.2.0
    postcss: ^8.4.21 => 8.4.21 (7.0.39)
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    react-router: ^5.3.4 => 5.3.4
    react-router-dom: ^5.3.4 => 5.3.4
    react-scripts: ^5.0.1 => 5.0.1
    react-toastify: ^9.1.2 => 9.1.2
    recoil: ^0.7.7 => 0.7.7
    tailwindcss: ^3.3.1 => 3.3.1
    ts-node: ^10.9.1 => 10.9.1
    typescript: ^5.0.3 => 5.0.3
    underscore: ^1.13.6 => 1.13.6
    validator: ^13.9.0 => 13.9.0
    vite: ^4.1.0 => 4.2.1
    vitest: ^0.29.2 => 0.29.8
  npmGlobalPackages:
    @ionic/cli: 7.0.0
    corepack: 0.17.0
    npm: 8.19.4
    prettier: 2.8.7
    yarn: 1.22.19

Describe the bug

index.js:43 Uncaught ReferenceError: global is not defined at node_modules/amazon-cognito-identity-js/node_modules/buffer/index.js (index.js:43:30) at __require2 (chunk-TFWDKVI3.js?v=4a4aa487:18:50) at AuthenticationHelper.js:6:24 node_modules/amazon-cognito-identity-js/node_modules/buffer/index.js @ index.js:43 __require2 @ chunk-TFWDKVI3.js?v=4a4aa487:18 (anonymous) @ AuthenticationHelper.js:6

Expected behavior

I was working in ionic 6 + react project where it was using “react-scripts” to run the project, project was working fine, authentication was working as well.

because now we have ionic 7 so i upgraded my project, i created a new project and moved my code from old ionic 6 project to new ionic 7 project.

here now ionic have introduced “vite” in place of “react scripts” to run the project.

i have double checked that this error is with “Auth” module coming from “@aws-amplify/auth” by commenting “aws-amplify/auth” imports from project and project started working fine.

this line in “amazon-cognito-identity-js” package is giving this error, as you can see “global” constant is used here

Buffer.TYPED_ARRAY_SUPPORT = global.TYPED_ARRAY_SUPPORT !== undefined

i even tried resolving this error by adding

(window as any).global = window;

in my main.ts file but still getting this error.

Reproduction steps

Steps to reproduct the error (i have added a video link showing how i reproduced the error as well to help you through the process).

VIDEO LINK: https://www.awesomescreenshot.com/video/16170162?key=754ffb3f47ae3154f41b1df041c7511e

STEPS:

  1. just create a simple ionic 7 + react project
  2. install “@aws-amplify/core” and “@aws-amplify/auth” packages
  3. import and use “Auth” module from “@aws-amplify/auth” package and it will give this error

Code Snippet

// Put your code below this line.
just use auth/api or any one of @aws-amplify/{package}    package and it will give error in newly created ionic 7 project (using @ionic/cli v7)

useEffect(() => {
	try {
		void Auth.currentSession();
	} catch (error) {}
}, []);

Log output

// Put your logs below this line

Uncaught ReferenceError: global is not defined
    at node_modules/amazon-cognito-identity-js/node_modules/buffer/index.js (index.js:43:30)
    at __require2 (chunk-TFWDKVI3.js?v=0313f93c:18:50)
    at AuthenticationHelper.js:6:24

aws-exports.js

No response

Manual configuration

No response

Additional configuration

{
  "name": "aws-amplify-cp-ionic7-react",
  "private": true,
  "version": "0.0.1",
  "description": "AWS Amplify CP1 Ionic 7.",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test.e2e": "cypress run",
    "test.unit": "vitest",
    "lint": "eslint",
    "sync:apps-config": "trapeze run apps-config.yaml",
    "lint-custom": "eslint --fix --ext .tsx,.ts ./src",
    "prettier": "prettier ./src --write",
    "version": "1.0.0",
    "optimize": "npm run prettier && npm run lint",
    "prepare": "husky install",
    "deploy": "git checkout aws-amplify-cp1-dev-deploy && git pull o aws-amplify-cp1 && git push o aws-amplify-cp1-dev-deploy && git checkout aws-amplify-cp1",
    "build:tailwind": "set \"NODE_ENV=production\" && npx tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/tailwind-output.css",
    "postbuild": "npm run build:tailwind"
  },
  "dependencies": {
    "@aws-amplify/api": "^5.0.23",
    "@aws-amplify/auth": "^5.2.1",
    "@aws-amplify/core": "^5.1.6",
    "@capacitor/app": "^4.1.1",
    "@capacitor/core": "^4.7.3",
    "@capacitor/dialog": "^4.1.0",
    "@capacitor/haptics": "^4.1.0",
    "@capacitor/keyboard": "^4.1.1",
    "@capacitor/preferences": "^4.0.2",
    "@capacitor/status-bar": "^4.1.1",
    "@ionic/react": "^7.0.0",
    "@ionic/react-router": "^7.0.0",
    "classnames": "^2.3.2",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.11.7",
    "formik": "^2.2.9",
    "history": "^5.3.0",
    "ionicons": "^7.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "react-toastify": "^9.1.2",
    "recoil": "^0.7.7",
    "underscore": "^1.13.6",
    "validator": "^13.9.0",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4"
  },
  "devDependencies": {
    "@capacitor/cli": "^4.7.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/crypto-js": "^4.1.1",
    "@types/node": "^18.15.11",
    "@types/react": "^18.0.32",
    "@types/react-dom": "^18.0.11",
    "@types/react-router": "^5.1.20",
    "@types/react-router-dom": "^5.3.3",
    "@types/underscore": "^1.11.4",
    "@types/validator": "^13.7.14",
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "@vitejs/plugin-react": "^3.1.0",
    "autoprefixer": "^10.4.14",
    "cypress": "^12.7.0",
    "eslint": "^8.37.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-react": "^7.32.2",
    "husky": "^8.0.3",
    "jsdom": "^21.1.0",
    "lint-staged": "^13.2.0",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.3.1",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.3",
    "vite": "^4.1.0",
    "vitest": "^0.29.2"
  },
  "eslintConfig": {
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/recommended-requiring-type-checking",
      "react-app",
      "react-app/jest",
      "prettier"
    ],
    "parserOptions": {
      "project": [
        "./tsconfig.json"
      ]
    },
    "parser": "@typescript-eslint/parser",
    "plugins": [
      "@typescript-eslint"
    ],
    "root": true
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ],
    "*.{css,html,json}": [
      "prettier --write"
    ]
  }
}

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 24 (10 by maintainers)

Commits related to this issue

Most upvoted comments

For future reference - depending on the project setup, the Vite / React plugin may also be required:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    define: {
        global: {},
    },
    server: {
        port: 3000,
    },
    resolve: {
        alias: {
            './runtimeConfig': './runtimeConfig.browser',
        },
    },
});
+32
david-mcafee on Apr 7, 2023

@aoneahsan - I have a sample Vite project that I use for testing against Amplify, could you compare your config / dependencies against what I have? Perhaps that may be the most straightforward way to see what your issue may be. Thanks!!

+5
david-mcafee on May 11, 2023

Hi @aoneahsan for your zipped project you posted earlier, to get it working what I did was change vite.config.ts to the following:

// vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  ...(process.env.NODE_ENV === 'development'
    ? {
      define: {
        global: {},
      },
    }
    : {}),
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
  }
})
+5
tannerabread on Apr 12, 2023

For future reference - depending on the project setup, the Vite / React plugin may also be required:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    define: {
        global: {},
    },
    server: {
        port: 3000,
    },
    resolve: {
        alias: {
            './runtimeConfig': './runtimeConfig.browser',
        },
    },
});

thanks this is working. For Other go to Vite.Config.js and paste this code define: {

    global: {},
},

inside define config

+3
KalpeshSipify on Oct 5, 2023

Hi @aoneahsan can you try out this solution

I tried it on your sample project and the global is not defined error went away

+2
tannerabread on Apr 5, 2023

For future reference - depending on the project setup, the Vite / React plugin may also be required:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    define: {
        global: {},
    },
    server: {
        port: 3000,
    },
    resolve: {
        alias: {
            './runtimeConfig': './runtimeConfig.browser',
        },
    },
});

really thanks man …❤️ its working fine.

+1
Rahulchoudhary742000 on Nov 2, 2023

For future reference - depending on the project setup, the Vite / React plugin may also be required:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    define: {
        global: {},
    },
    server: {
        port: 3000,
    },
    resolve: {
        alias: {
            './runtimeConfig': './runtimeConfig.browser',
        },
    },
});

added

define: {
  global: {}  
}

worked for me

+1
airalpha on Aug 1, 2023

I’m getting the same error with an Angular 15 project. The problem is that the buffer module, which is intended for use in the browser, refers to a global variable which is a Node-only way of accessing global as far as I can tell. Even the latest version of amazon-cognito-identity-js (6.2.0) refers to a specific version of buffer which has this problem (4.9.2). However, that has been downloaded some 13 million times, which indicates that something about that is expected, I guess, although I don’t really understand what’s going on.

Hey @Arlen22 , I use angular too. I don’t know the rationale but you can try adding global = globalThis (before app-root tag) to index.html, like this:

<body>
   <script>
     global = globalThis //<- this line
   </script>
   <app-root></app-root>
</body>

Reference from this Uncaught ReferenceError: global is not defined

+1
ryanmz1 on May 26, 2023

Related to #9639

+1
nadetastic on May 9, 2023

@aoneahsan are you still getting the same build errors? If so, maybe this comment about including resolve in the vite.config.js as seen below will fix the issue:

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

Let me know if that doesn’t work and what errors you’re still seeing, please!

+1
cwomack on May 8, 2023

@aoneahsan, can you see if updating the vite.config.ts to include the “resolve” import and subsequent plugin (as shown below) fixes the new build error you’re seeing?

// vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import resolve from '@rollup/plugin-node-resolve';

// https://vitejs.dev/config/
export default defineConfig({
  ...(process.env.NODE_ENV === 'development'
    ? {
      define: {
        global: {},
      },
    }
    : {}),
  plugins: [
    react(),
    resolve()
  ],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
  }
})
+1
cwomack on Apr 20, 2023

@tannerabread Thanks a lot, I tried the solution you gave, and it resolved the development error, but when I tried to build the project, it gave this error. image

+1
aoneahsan on Apr 13, 2023

HI there

@tannerabread sure let me try that (sorry for late reply)

+1
aoneahsan on Apr 8, 2023
Read more comments on GitHub
← amplify-js: Uncaught (in promise) Error: No credentials, applicationId or region at AWSPinpointProvider.js:349
amplify-js: undefined is not an object (evaluating 'window.location.href') →