question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make code crash-safe in SSR environments

See original GitHub issue

Issue Description

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 … 🤔

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
Knusperchickencommented, Sep 3, 2020

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. 🍪

1reaction
pabloaicommented, Sep 1, 2020

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Max: A Multicore-Accelerated File System for Flash Storage
We make two major observations: (1) On slow hard disk drive and SATA SSD, ... in a crash safe manner, the process needs...
Read more >
CrashSafe 6 in 1 Car Safety Device Review - YouTube
POWER BANK & CAR CHARGER - Charge your device while driving or when stranded with built-in 2200 mAh portable batteryDUAL-MODE FLASHLIGHT ...
Read more >
Untitled
#na Plane crash safe landing, Pvc gerfor medellin, Azores hotels resorts, ... 0785 area code uk, Konvergenzkriterien reihen beispiele, I made it lyrics...
Read more >
Failed to find "maven", please ensure that the ... - IssueHint
Issue Title Created Date Comment Count Updated... attempt to index a nil value 1 2021‑10‑17 2022‑10... Member function declarations outside circuit types 3 2021‑10‑25 2022‑01... fstrim:...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found