emilwidlund/nodl

SSR support

idevelop opened this issue · 5 comments

idevelop commented

When including the library in a next.js app, I see the following errors:

  1. Server Error: ReferenceError: self is not defined
  2. Manually replacing self with globalThis in your build/index.js leads to: Server Error: ReferenceError: document is not defined

Both of these happen because neither self nor document globals exist in a server-side-rendered environment.

emilwidlund commented

@idevelop Thanks for highlighting this. Let me know if #8 fixes this. I have yet to run this library in an SSR-environment.

idevelop commented

@emilwidlund there's a bigger change needed to properly support SSR, mainly in the webpack config (to produce a node version of the react package) but I'm not sure yet how to do it right. Been trying a couple of things, will send another PR if I figure it out.

Andonvr commented

Seconding this!
Wanted to use it in a nextron project, and got the same error.

emilwidlund commented

@IngoOutgo Alright - I'm going to prioritize this as soon as I have some time.

  • ❤️1
Andonvr commented

I actually found a workaround, which worked well enough for me!
All references to nodl are happening inside the "Project" component. All imports, etc.. I then add another file, which only imports that component once it's running in the browser. "ProjectNoSSR" can be imported without any problems!

import dynamic from "next/dynamic"

const Project = dynamic(() => import("./Project").then((mod) => mod.Project), {
  ssr: false,
})

export const ProjectNoSSR = () => {
  return <Project />
}

(if you're not using named exports, remove .then((mod) => mod.Project))