Using Amplitude with SSR (React)

Hi,

I am trying to migrate a codebase from client-side to server-side, and am using Amplitude like so:

import amplitude from 'amplitude-js/amplitude';

It is bundled by Webpack. On the server-side, I have this error:

document is not defined, l.3020, called by global scope block l.3007

I’m a bit lost on this, as there is browser-specific code in global scope and therefore it can’t run on server…

Any insights?

Thanks in advance

[adrienharnay]

Hi,

Thanks for the answer. Indeed, I worked around it by doing:

if (typeof window !== 'undefined') {
  amplitude = require('amplitude-js/amplitude');
}

[Vadorequest]

For anyone interested by a real use case with Amplitude and Next.js 9 (universal app), check out https://github.com/UnlyEd/next-right-now

Interesting parts are:

• https://github.com/UnlyEd/next-right-now/blob/master/src/pages/_app.tsx#L256-L294 provider
• https://github.com/UnlyEd/next-right-now/blob/master/src/pages/examples.tsx#L32-L43 usage