Make code crash-safe in SSR environments

Is your feature request related to a problem? Please describe. When importing this package into a React component which is being rendered on the server, the code is getting executed on the server side resulting in a crash with messages like ReferenceError: window is not defined.

Describe the solution you’d like As I don’t always have control over the component being rendered on the server or client side it would be nice for the code to not crash if this code is being executed on the server side.

Describe alternatives you’ve considered As mentioned above I don’t have control over the general architecture and config of the project thus I can’t control whether this packge should only be imported on the client side or vice versa. There is this hacky way that I tried:

let AdyenCheckout

try {
  // eslint-disable-next-line global-require
  AdyenCheckout = require('@adyen/adyen-web')
} catch (_) {
  AdyenCheckout = class {}
}

This works but it isn’t the way we should do it when using a React component, right? 😉

Additional context I’ve tried myself to fix this by adding a globalThis polyfill and replacing all occurences of window with globalThis but it was to no avail. Build was good, tests too and the sample pages seemed to work fine but when I copied the built files over to my project, the dev server crashed imemdiately upon startup. Maybe I just missed something and additionally I’m not a TypeScript pro … 🤔

[Knusperchicken]

Hi @pabloai ,

I’m sorry for the late response. We might have found another solution for our framework which seems to work. Thank you anyway for your effort. 🍪

[pabloai]

Hi again @Knusperchicken,

Would using dynamic imports help in you scenario? Here’s a quick demo: https://codesandbox.io/s/adyen-web-nextjs-xkvdb

Let us know what you think, cheers!