Angular 7: Uncaught ReferenceError: global is not defined when adding package

[3xLogicJamesTays]

I am building an Angular 7 app, and when i add a package npm install dragula and import this into thepollyfills.tsfile i get this error:

index.js:2 Uncaught ReferenceError: global is not defined at Object../node_modules/custom-event/index.js (index.js:2) at webpack_require (bootstrap:83) at Object../node_modules/crossvent/src/crossvent.js (crossvent.js:3) at webpack_require (bootstrap:83) at Object../node_modules/dragula/dragula.js (dragula.js:4) at webpack_require (bootstrap:83) at Module../src/polyfills.ts (polyfills.ts:1) at webpack_require (bootstrap:83) at Object.1 (polyfills.ts:92) at webpack_require (bootstrap:83)

When I googled it everyone says to add this (window as any).global = window; to pollyfills.ts I have done this and I still get the error. I also ready to delete the node_modules folder and npm i I have done this as well.

I do not know what else to do here. can anyone please tell me some sugestions or at least explain why this would happen?

This may not be relevant but I'm going to add it as well. There is another error which wasnt there before I imported them into pollyfills.ts

accordion-group.component.ts:9 Uncaught ReferenceError: global is not defined at Module../src/app/components/accordion/accordion-group.component.ts (accordion-group.component.ts:9) at webpack_require (bootstrap:83) at Module../src/app/components/accordion/accordion.module.ts (accordion.component.ts:10) at webpack_require (bootstrap:83) at Module../src/app/shared/shared.module.ts (window.extensions.ts:15) at webpack_require (bootstrap:83) at Module../src/app/app.module.ts (app.constants.ts:17) at webpack_require (bootstrap:83) at Module../src/main.ts (main.ts:1) at webpack_require (bootstrap:83)

• Read the contributing guidelines
• Bug reports containing repro steps are likely to be fixed faster
• Feature requests should be multi-purpose, describe use cases
• For support requests or questions, please refer to our Slack channel

[hijoncon]

Add this in your polyfills.ts

if (typeof (window as any).global === 'undefined') {
  (window as any).global = window;
}

[Mwoagh]

Same problem, I tried the suggestion by hijoncon but it doesn't solve the problem.
BTW, like me, 3xLogicJamesTays already had
(window as any).global = window;
I don't see how adding the if-statement would help.

[dcantatore]

@3xLogicJamesTays Can you provide a working example of this?

[hexcowboy]

Fixed by adding this to vite.config.ts

export default defineConfig({
  ...
  define: {
    "global": {},
  },
});

[jamesjessian]

Just to follow a bit further on hexcowboy's solution, for those who don't have a vite.config.js already, this is what I used:

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    global: {},
  },
})

[adenta]

@jamesjessian @hexcowboy This page seems to indicate global should not be defined this way 🤔 .

Any thoughts? Like this solution seemingly works locally, but I get issues when I build for production.

[hexcowboy]

@jamesjessian @hexcowboy This page seems to indicate global should not be defined this way 🤔 .

Any thoughts? Like this solution seemingly works locally, but I get issues when I build for production.

Honestly I have no idea, I gave up this framework after trying to solve this issue for so long. The global object should be of type Window in a browser, so @hijoncon answer should work in production builds.

[yarapolana]

Having the same issue, using the solution @hexcowboy gave, works only in development mode. When I try to build for the production version, it gives all sorts of errors, but if I remove the implementation it builds normally.

[xingorg1]

I encountered the same problem 😭😭😭, and finally solved it with the following code :

<!-- your index.html -->
<script>
/**
 * this is a hack for dragula
 * error: global is not defined
 */
var global = global || window
</script>

[geneshairzan]

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    global: {},
  },
})

it doesnt cause error when build on me.
my config :

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    global: "window",
  },
})

[isimmons]

Can't do this one when using storybook

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    global: {},
  },
})

storybook 7 at least, has a long list of errors when building for production

I placed the following in my main.ts file. Solution Here

window.global ||= window;

[amk221]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis

<script>
  globalThis.global = globalThis;
</script>

[ItaloCobains]

@amk221 this work to me. thank you