ReferenceError: window is not defined

[JakubKontra]

Hi guys,

how to fix this please?

Thanks!

/Users/kontra/Sites/spendee-web/src/browser/charts/AmCharts/Amcharts3.js:1
(function (exports, require, module, __filename, __dirname) { (function(){var d;window.AmCharts?d=window.AmCharts:(d={},window.AmCharts=d,d.themes={},d.maps={},d.inheriting={},d.charts=[],d.onReadyArray=[],d.useUTC=!1,d.updateRate=60,d.uid=0,d.lang={},d.translations={},d.mapTranslations={},d.windows={},d.initHandlers=[],d.amString="am",d.pmString="pm");d.Class=function(a){var b=function b(){arguments[0]!==d.inheriting&&(this.events={},this.construct.apply(this,arguments));};a.inherits?(b.prototype=new a.inherits(d.inheriting),b.base=a.inherits.prototype,delete a.inherits):(b.prototype.createEvents=function(){for(var a=0;a<arguments.length;a++){this.events[arguments[a]]=[];}},b.prototype.listenTo=function(a,b,c){this.removeListener(a,b,c);a.events[b].push({handler:c,scope:this});},b.prototype.addListener=function(a,b,c){this.removeListener(this,a,b);a&&this.events[a]&&this.events[a].push({handler:b,scope:c});},b.prototype.removeListen

[JakubKontra]

ReferenceError: window is not defined
    at Amcharts3.js:1:79
    at Object.<anonymous> (Amcharts3.js:1:5960)
    at Module._compile (module.js:541:32)
    at loader (/Users/kontra/Sites/project-web/node_modules/babel-register/lib/node.js:148:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/kontra/Sites/project-web/node_modules/babel-register/lib/node.js:158:7)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (AmchartsReact.js:2:1)
    at Module._compile (module.js:541:32)
    at loader (/Users/kontra/Sites/spendee-web/node_modules/babel-register/lib/node.js:148:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/kontra/Sites/spendee-web/node_modules/babel-register/lib/node.js:158:7)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)

[Pauan]

It looks like you're trying to bundle AmCharts using Webpack or Browserify.

Try loading AmCharts using a <script> tag instead, like this:

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

Does that fix the errors?

[JakubKontra]

Yea I'm using webpack... I don't want to include 3 more scripts. :/ Its possible to use it w/ webpack? :)

Thanks

👍

[Pauan]

AmCharts version 3 is not designed to work with Webpack.

There are many ways to work around this:

1. You can use require at the top of your entry file:

   require("path/to/amcharts.js");
   require("path/to/serial.js");
   require("path/to/themes/light.js");
   require("path/to/amcharts3-react.js");

   Now you can use AmCharts.React throughout your entire app.

2. You can create a file which exports the AmCharts.React variable:

   // amcharts-shim.js
   require("path/to/amcharts.js");
   require("path/to/serial.js");
   require("path/to/themes/light.js");
   require("path/to/amcharts3-react.js");
   
   module.exports = window.AmCharts.React;

   Now you can require the AmCharts React plugin in your code:

   var AmCharts = require("path/to/amcharts-shim");
   
   React.createElement(AmCharts, { ... });

3. There are other much more complicated ways of shimming modules in Webpack:

   https://webpack.github.io/docs/shimming-modules.html

   https://gist.github.com/xjamundx/b1c800e9282e16a6a18e#a-loader-for-every-shim

   https://github.com/webpack/script-loader

   But I think the above two methods are easier.

[Pauan]

Also, it seems like you're using the Babel loader for Webpack.

You should only compile ES6 code with Babel. You should not compile the AmCharts files with Babel, because AmCharts is ES5. That is most likely the reason for the window is not defined error.

Instead, you should use the exclude option so that Babel does not compile the AmCharts files:

https://github.com/babel/babel-loader#usage

[julianljk]

Is Webpack/bundler support in the plans to be added to amcharts anytime soon?

[Pauan]

@julianljk Unfortunately, version 3 of AmCharts will not officially support any sort of bundler, loader, or module format.

Version 4 of AmCharts will have full support for those things, but it is currently in development and is not ready to be used yet.

Right now, the best way to use AmCharts with Webpack is to follow the directions I posted above.

[Pauan]

@julianljk I'm sorry, I spoke a bit too soon.

I just now added in support for Webpack for the amcharts3-react plugin. It turned out to be easier to add in Webpack support than I had originally thought.

Please see here for more details.

You can also see here for an example app that uses Webpack and amcharts3-react.

Since this has now been solved, I'm going to close this issue. Please open a new issue if you are still having problems.