search

nikitaeverywhere / react-xmasonry

Simple, minimalistic and featured native masonry layout for React JS.
https://zitros.github.io/react-xmasonry
MIT License
91 stars 12 forks source link

prop `className` did not match. Server: "xmasonry xmasonry-static" Client: "xmasonry" #22

Closed Wayne-CO closed 3 years ago

Wayne-CO commented 3 years ago

Hi there,

Getting this warning when I'm just returning an array of containing images.

Warning: Prop className did not match. Server: "xmasonry xmasonry-static" Client: "xmasonry"

Wondering if this is known.

nikitaeverywhere commented 3 years ago

Good catch, thank you!

I think the library were designed to either be compatible with SSR for SEO or work purely on the client side. I.e. the HTML rendered on the server slightly differ from what is rendered on the client (exactly those className attributes), which produces this warning.

Wayne-CO commented 3 years ago

ok great! Is this something that can be fixed? Or suggestions on how to remove the warning?

nikitaeverywhere commented 3 years ago

Hmm, by quickly looking through the code I realized that you can't simply disable SSR as it's [hardcoded](https://github.com/ZitRos/react-xmasonry/blob/8ad143114ebaee67ce617de56c3635cd8fe149e1/src/utils/index.jsx#L20_. However, I can implement the exception if you truly don't need it.

My next steps could be to rewrite this library completely (make it based on flex/grid boxes as it's quite an old library), but I'm not sure whether I will find time for this in the near future. If you need the SSR exception, it is a quick fix: just let me know how you would prefer it to be implemented (I guess a new environment variable like REACT_XMASONRY_SSR_ENABLED=false?).

Thanks!

Wayne-CO commented 3 years ago

It's up to you how you want to implement it. Long as it's possible to remove the warning. :)

nikitaeverywhere commented 3 years ago

@Wayne-CO so does REACT_XMASONRY_SSR_ENABLED env variable sounds good to you? You will need to start your server-side renderer with it

Wayne-CO commented 3 years ago

sure sounds good. I'm using NextJS so SSR should be possible right? Wondering why this warning is appearing in development. But yes I can test with that env variable.

nikitaeverywhere commented 3 years ago

I'm using NextJS so SSR should be possible right?

If you can tell your server to set the environment variable then yes.

Wondering why this warning is appearing in development.

Because classes produced by SSR and the first actual client render don't match: that was a design crutch to make XMasonry look better when rendered on the server.

But yes I can test with that env variable.

Here you go:

npm install react-xmasonry@3.0.5

Let me know if it worked.

Wayne-CO commented 3 years ago

Hmm.. I'm still getting this warning even when I added the env variable REACT_XMASONRY_SSR_ENABLED=false I also restarted the server too.

nikitaeverywhere commented 3 years ago

Can you share a (local) example of your app with Next.JS (as you say)? I was sure that setting this environment variable will make SSR produce the same html as the client does.

On Thu, 28 Jan 2021 at 11:05, Wayne-CO notifications@github.com wrote:

Hmm.. I'm still getting this warning even when I added the env variable REACT_XMASONRY_SSR_ENABLED=false I also restarted the server too.

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/ZitRos/react-xmasonry/issues/22#issuecomment-768907838, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABGCCSG3DSQW6DQB3CICWF3S4ESE7ANCNFSM4WJ2HCEQ .

Wayne-CO commented 3 years ago

Yes you can view it here: https://github.com/crafted-origin/embernavarro It's used in 'embernavarro/components/pages/home/section-project-masonry.jsx'

If you want to run the project you'll need the proper env variable settings. Let me know if you'll need those. Thank you!

nikitaeverywhere commented 3 years ago

image

Can't view it :)

Did you try export REACT_XMASONRY_SSR_ENABLED=false && npm run dev?

Wayne-CO commented 3 years ago

Yes it won't work unless you set up .env.local with the correct tokens. Shall I email them to you if you want to see the project on local?

I basically added the env variable REACT_XMASONRY_SSR_ENABLED=false and that's it. Were there other things I had to do?

nikitaeverywhere commented 3 years ago

Envs with REACT_ prefix won’t work

On Mon, 1 Feb 2021 at 21:15, Wayne-CO notifications@github.com wrote:

Yes it won't work unless you set up .env.local with the correct tokens. Shall I email them to you if you want to see the project on local?

I basically added the env variable REACT_XMASONRY_SSR_ENABLED=false and that's it. Were there other things I had to do?

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/ZitRos/react-xmasonry/issues/22#issuecomment-771092146, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABGCCSH2VVI6TEDIQTPY6BLS434UHANCNFSM4WJ2HCEQ .

nikitaeverywhere commented 3 years ago

I mean, double check that the REACT_XMASONRY_SSR_ENABLED environment variable is really set. For instance, react create app requires a specific env variables prefix and won't pass any other envs to NodeJS.

If you want me (who never worked with NextJS) to debug it then please make a reproducible example, so that I spend a few minutes observing the problem. (or send tokens to me@nikita.tk, whatever)

3rd (quick to verify) option, just go to node_modules/react-xmasonry, and replace this with boolean false:

image

Then start your project. If it work, this means you're not passing env var correctly.