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.

Errors rendering Editor in Next.js

See original GitHub issue

Bug Description

I was trying to create Story Editor in Next.js however there were several errors that appear one after the other ( Most of them are due to Next.js SSR )

( Gets fixed by removing CSS import ) Reference: https://nextjs.org/docs/messages/css-npm

( Gets fixed by using globalThis )

( Gets fixed by removing "type": "module" from package.json )

Expected Behaviour

Editor and dashboard should work without any issues in NextJs.

Steps to Reproduce

Step - 1: npx create-next-app@latest

Step - 2: Use snippet from getting-started to use the editor

Screenshots

Additional Context

Plugin Version:
WordPress Version:
Operating System:
Browser:

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:8

Top GitHub Comments

1reaction

sayedtaquicommented, Apr 14, 2022

Just adding a note here for reference.

We can ignore document/window/self or similar things if:

They are used inside useEffect/useLayoutEffect hooks because they are not called during SSR.
They are called inside a callback or internal function which are not directly called during rendering.
They are inside try/catch

1reaction

swissspidycommented, Apr 14, 2022

Ah right, yeah that makes sense. Because we import CSS files in wp-story-editor and wp-dashboard that wouldn’t work. An ESLint rule is a great idea 👍