Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR support #7

Open
idevelop opened this issue Mar 1, 2023 · 5 comments
Open

SSR support #7

idevelop opened this issue Mar 1, 2023 · 5 comments

Comments

@idevelop
Copy link
Contributor

idevelop commented Mar 1, 2023

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
Copy link
Owner

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

@idevelop
Copy link
Contributor Author

idevelop commented Mar 1, 2023

@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
Copy link

Andonvr commented Mar 3, 2023

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

@emilwidlund
Copy link
Owner

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

@Andonvr
Copy link

Andonvr commented Mar 4, 2023

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))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants