Skip to content

Conversation

@HenriBeck
Copy link

@HenriBeck HenriBeck commented Sep 11, 2018

Added a clear example on how to use react-jss with injecting the styles on the server.

cssinjs/jss#457

@timneutkens
Copy link
Member

@kof @oliviertassinari could you have a look at this example 🕵️ If it looks alright I'll merge it 👍

@oliviertassinari
Copy link
Contributor

@HenriBeck How do you solve the hot reloading class name missmatch issue? On Material-UI we had to remove the moduleId.

@HenriBeck
Copy link
Author

There aren't any mismatches when hot reloading. I can change the styles or a component, and I get the new changes applied.

I think the reason it works, is because react-jss doesn't implement anything specific for HMR updates and remounts the component/tree.

@oliviertassinari
Copy link
Contributor

It's good to know.

@HenriBeck
Copy link
Author

A mismatch should only happen when the client is being hydrated which only happens on the first render if I'm correct. The HMR should only rerender/update the components.

@@ -0,0 +1,3 @@
{
"presets": ["next/babel"]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems unneeded 🤔

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I get this error when I don't have this file:

Module build failed: Error: [BABEL] /Users/henri/Coding/next.js/examples/with-react-jss/pages/_app.js: You gave us a visitor for the node type PrivateName but it's not a valid type

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You possibly have a .babelrc in an upward directory 🤔

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahhh yeah that's fine. Users download only the example itself. Either way it'll work 👍

@timneutkens timneutkens merged commit b79bbec into vercel:canary Sep 12, 2018
@HenriBeck HenriBeck deleted the example/react-jss branch September 12, 2018 14:00
@lock lock bot locked as resolved and limited conversation to collaborators Sep 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants