Chartist-js: Angular 8 - global is not defined

Created on 21 Sep 2019 · 6Comments · Source: gionkunz/chartist-js

I recently migrated an Angular 7 application (that was using chartist) to Angular 8. After migration the app no longer works with the following error in console:
Uncaught ReferenceError: global is not defined at chartist.js:1173
Screenshot from 2019-09-21 19-01-28

chartist version 0.11.4

It seems that Angular CLI removed shim for global
https://github.com/angular/angular-cli/issues/8160#issuecomment-386153833
reasoning here:
https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814
and library authors should not rely on it any more.

workaround mentioned in first linked issue works, but its still just a workaround that is mentioned nowhere in chartist documentation (and ideally should not be required)

Source

yohny

👍3

Most helpful comment

I found this walk around:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TestApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script>
      window.global = window;
  </script>
</head>
<body>
<app-route></app-root>
</body>
</html>

blueskyfish on 21 Sep 2019

👍8 ❤1

All 6 comments

I found this walk around:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TestApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script>
      window.global = window;
  </script>
</head>
<body>
<app-route></app-root>
</body>
</html>

blueskyfish on 21 Sep 2019

👍8 ❤1

Any idea why it was removed? I suppose we can just add it back in, but there's a lot of bad code out there that still needs to be used :)

mcblum on 26 Sep 2019

This has just affected a project I'm working on - I've had to lock myself to Chartist 0.11.0 until it's fixed.

dansoper on 5 Nov 2019

🎉1

https://stackoverflow.com/questions/50356408/upgrading-to-angular-6-x-gives-uncaught-referenceerror-global-is-not-defined

Client

visconti-muc on 24 Nov 2019

@gionkunz Would be nice if we could have a fix for this soon.

Options:

 })(typeof global !== 'undefined' && global ||
    typeof window !== 'undefined' && window || this);

or use globalThis that is available in Chrome and Node 12

or use one o the globalThis polyfills
https://github.com/ungap/global-this

hansmaad on 25 Nov 2019

Just FYI if you import chartist into a component and that component has imported into seperate module files _(such as layout.module.ts and app.module.ts)_ you will get this error. The solution is choose one of these files -higher app.module or lower component.module-.