ReferenceError: window is not defined

[Kostanos]

Trying to use amplitude-js on node 8.8.1

I got this error when I run: const amplitude = require('amplitude-js');

ReferenceError: window is not defined
    at /root/app/node_modules/amplitude-js/amplitude.js:2427:8
    at commonjsGlobal (/root/app/node_modules/amplitude-js/amplitude.js:2:82)
    at Object.<anonymous> (/root/app/node_modules/amplitude-js/amplitude.js:5:2)
    at Module._compile (module.js:612:30)
    at Object.Module._extensions..js (module.js:623:10)
    at Module.load (module.js:531:32)
    at tryModuleLoad (module.js:494:12)
    at Function.Module._load (module.js:486:3)
    at Module.require (module.js:556:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/root/app/src/helpers/amplitude.js:3:19)
    at Module._compile (module.js:612:30)
    at Object.Module._extensions..js (module.js:623:10)
    at Module.load (module.js:531:32)
    at tryModuleLoad (module.js:494:12)
    at Function.Module._load (module.js:486:3)
    at Module.require (module.js:556:17)
    at require (internal/module.js:11:18)
...

[mieszko4]

Are you running server-side-rendering, i.e. are you running this in node?

[ajcumine]

I've had the same error using this package on node v6.10.3 building a static site with webpack.

After a little digging the error was caused by some browser compatibility code added by this package while checking to see if window.globalStorage exists:

if (windowLocalStorageAvailable()) {
  localStorage = window.localStorage;
} else if (window.globalStorage) {
  // Firefox 2-3 use globalStorage
  // See https://developer.mozilla.org/en/dom/storage#globalStorage
  try {
    localStorage = window.globalStorage[window.location.hostname];
  } catch (e) {
    // Something bad happened...
  }...

Because of this I've removed the package from the project and am using the <script> tag in the project index.html instead. This is unfortunate as the majority of ad blockers will automatically block this so it's not really a workaround.

[mieszko4]

I have server side rendering and I simply require only when not in node. In node I mock it.
isServer is my custom global variable

import config from "config";

const Amplitude = !global.isServer ? require("amplitude-js") : null;

const instance = Amplitude ? Amplitude.getInstance() : {
  init: () => {},
  logEvent: () => {},
  setUserId: () => {},
  setUserProperties: () => {}
};

instance.init(config.amplitude.apiKey);

export default instance;

[burrack]

is there any plan to fix that ?

[juliaschiller150]

I'd like to use this package server-side, and others are no doubt doing server-side rendering. Having a dependency on window and on document prevents this.

Can we subvert the local storage setup if window or document is undefined?

[barathkb]

I am also facing the Same issue I am using Nodejs with express over ReactJs. And I am trying to use the recent react-amplitude package launched last month
-https://www.npmjs.com/package/react-amplitude
Is there any fix for this issue, in general, the server-side rendering is causing a lot of issues because window or document is undefined

[burrack]

@barathkb - in my project i'm using react and redux. i created a redux middleware for dealing with amplitude.
in order to not get this error, i only added this middleware on the client side and it worked.

could u only use (import) amplitude on the client side ?
if u need help, it would be cool to see how/where do u use it

[barathkb]

@burrack Thanks for your suggestion but the things is that I want it both in my client side and the server side since I am using NextJs and Express every initial page load using URL will be pre-rendered on the server side.

[stormfar]

I'm having this problem still with my node express server. Some events cannot be logged on the client. Any chance this will be fixed?

[artvichi]

Would be awesome to fix!

[tmswartz12]

Has anyone found a fix to this?

[silentstormm]

?

[haoliu-amp]

Currently we just don’t support running in a Node environment for the JS SDK. Will consider to add the support.

Thanks for providing feedbacks.

[haoliu-amp]

This is sever side SDK request basically.

Please refer to #164. Closing this now.

[wilkerlucio]

I have a case that I don't need amplitude to work, but I need to require it, can you make a way that it just doesn't do anything on the node case, instead of blowing up?

[seansean11]

I need to bundle amplitude-js with an npm package and finding it impossible to setup the package in a safe way so that it doesn't throw errors when consumed by an app using SSR.

[kelsonpw]

One way would be dynamic import. Wait to load the package until code is running in a client env (window is defined)

let amplitude;
if (window !== undefined) {
   import('amplitude-js').then(ampPackage => {
     amplitude = ampPackage;
   });
}

The comment above has a similar solution that might be helpful as-well that only imports on the client and mocks critical API's on the server.

Without knowing more about your specific constraints it's hard to provide an exact recommendation. This package is supported for client side environments only.

[jlmonroy13]

On this answer, you can use process.browser instead of !global.isServer

I have server side rendering and I simply require only when not in node. In node I mock it.
isServer is my custom global variable

import config from "config";

const Amplitude = !global.isServer ? require("amplitude-js") : null;

const instance = Amplitude ? Amplitude.getInstance() : {
  init: () => {},
  logEvent: () => {},
  setUserId: () => {},
  setUserProperties: () => {}
};

instance.init(config.amplitude.apiKey);

export default instance;

[MaxiSantos]

new amplitude ts support with nextjs https://github.com/amplitude/Amplitude-TypeScript/blob/main/examples/browser/next-app/pages/index.tsx