aoneahsan
commented
1 year ago Attaching the demo project, so you can just "yarn install" in it and will be able to see the error once you run the project.
Closed aoneahsan closed 1 year ago
aoneahsan
commented
1 year ago Attaching the demo project, so you can just "yarn install" in it and will be able to see the error once you run the project.
tannerabread
commented
1 year ago Hi @aoneahsan can you try out this solution
I tried it on your sample project and the global is not defined error went away
david-mcafee
commented
1 year ago 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',
},
},
});
HI there
@tannerabread sure let me try that (sorry for late reply)
david-mcafee
commented
1 year ago Any luck with that solution, @aoneahsan?
aoneahsan
commented
1 year ago Any luck with that solution, @aoneahsan?
i tried but i was not able to get it to work
(and i did not understand what these local reference files were supposed to have in them (so yes if you can provide a demo project repo link will be helpfull or explain what I'm doing wrong (sorry for trouble))). Thanks.
aoneahsan
commented
1 year ago Hi @david-mcafee Sorry for the trouble, but can you provide a repo with a working version of it (and also some resources where I can learn more about it)?
aoneahsan
commented
1 year ago Or a direct zip file here, whatever works for you.
tannerabread
commented
1 year ago 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',
}
})
@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.
cwomack
commented
1 year ago @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',
}
})
@cwomack i tried the solution you mentioned but it's not working.
cwomack
commented
1 year ago @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!
nadetastic
commented
1 year ago Related to #9639
david-mcafee
commented
1 year ago @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!!
Arlen22
commented
1 year ago 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.
ryanmz1
commented
1 year ago 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
globalvariable which is a Node-only way of accessing global as far as I can tell. Even the latest version ofamazon-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
Arlen22
commented
1 year ago Yeah, that's what I ended up doing. I also opened an issue on the buffer project, but since this is an older version with 13 million downloads, fixing this "bug" would be a breaking change, so I doubt it will happen there.
Naikno
commented
1 year ago @Arlen22 i'm also use angular 15, and what i done to avoid to touch the html was to expose a polyfills.ts file creating a file and refer to it from angular.json
like
"architect": {
"build": {
..
"options": {
...
"polyfills": [
"src/polyfills.ts"
],
...and add inside
import 'zone.js';
(window as any).global = window;@Arlen22 @Naikno - I recently tested using Amplify with Angular following the Amplify "Getting Started" docs for Angular, and did not encounter any issues. Can you take a look at the guide and see if any of the guidance there resolves the issues you are seeing? Thanks!
david-mcafee
commented
1 year ago @Arlen22 @Naikno - closing this ticket as we have not heard back from you. If you need further assistance, please let us know!
airalpha
commented
1 year ago 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
KalpeshSipify
commented
1 year ago 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
Rahulchoudhary742000
commented
11 months ago 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.
UchihaYuki
commented
2 months ago I'm curious why this error only exists in Angular apps. I wrote an npm package and used the buffer package. It has no problem running in browser when testing, but after switching to Angular the problem appears.
Before opening, please confirm:
JavaScript Framework
React
Amplify APIs
Authentication
Amplify Categories
auth
Environment information
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
Log output
aws-exports.js
No response
Manual configuration
No response
Additional configuration
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
No response
Mobile Browser Version
No response
Additional information and screenshots
No response