Importing the library is causing a crash on SSR - non isomorphic

[carlesnunez]

The problem
As this library perform operations on import with CustomEvent api that only works on client importing this on files that are being used from server side is causing a crash.

[matepaiva]

Hello :) Are there any plans to fix this issue?

[jharrilim]

Yes, #61 should fix it (and fix other scenarios like incognito).

[matepaiva]

Thank you!

[jharrilim]

It turns out that #61 won't fix this. The main problem is that SSR tools like Gatsby currently don't support anything browser related on the server side. It is unreasonable to expect every browser module to polyfill their module for browser globals since browser code should be expected to run... in the browser.

I am currently working on a pre-rendering tool which solves this problem, because it is definitely possible to be done on the backend instead of trying to fix every browser module. You may see an example here:

https://github.com/jharrilim/rolledup/tree/master/examples/proj

The React code in that "proj" example emits the static HTML found in the "dist" folder.

[Hubro]

@jharrilim Can't you do a if (typeof window === "undefined") { ... } and make your hook a noop on the server side? Just return the default value and don't do anything more.

I'm a bit less sure about the CustomEvent, since you can't subclass a class that doesn't exist on the server side. Could you conditionally define the class?

This issue unfortunately makes this library impossible to use with Next.js, since it has SSR by default 😞

[carlesnunez]

I remember that the problem came because the Custom Event was not being able to be extended conditionally so it was always failing because of the extend.

[Amantel]

Hey ho! Any luck with this?

[lorensr]

One possible solution here: #17 (comment)

[Amantel]

well... that is to dirty for me, TBH)

[yovanoc]

You could use https://github.com/Comandeer/babel-plugin-banner to add typeof window !== "undefined" && in top of the file to build the local-storage lib

[jharrilim]

Hey ho! Any luck with this?

Sorry for the super late response; yes, I believe so. IIRC, The things that are needed to make this work are:

1. CustomEvent needs to be conditionally defined (Will be done here Add CustomEvent polyfill #78)
2. LocalStorage needs to be conditionally defined (Done here add storage class to handle gracefull degration #61)

Unfortunately with regards to the rolledup project, well... it was easy to prove that you could build a node environment pre-renderer that used browser globals, but creating an alternative to Gatsby takes a lot more work 😅

[emateu]

This might help: #80

[trevorblades]

Now that #80 is merged, when can we expect a new version to be published? @jharrilim

[iamsolankiamit]

@trevorblades 2.4.4 version has the fix for SSR.