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.

Sign up for GitHub

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

Jump to bottom

Non-hoisted styled-jsx dependency breaks styles #9325

Closed
ctavan opened this issue Nov 6, 2019 · 7 comments · Fixed by #36585
Closed

Non-hoisted styled-jsx dependency breaks styles #9325

ctavan opened this issue Nov 6, 2019 · 7 comments · Fixed by #36585
Labels
good first issue Easy to fix issues, good for newcomers

Comments

@ctavan
Copy link
Contributor

ctavan commented Nov 6, 2019 •
edited
Loading

Bug report

Describe the bug

When styled-jsx with a version other than the one bundled with Next.js is manually added as a dependency to a Next.js project, style loading is delayed leading to an unstyled initial rendering flash.

To Reproduce

Reproduction in: https://github.com/ctavan/next.js-reproduce-styled-jsx-bug/commits/master

Adding styled-jsx as a dependency manually produces the buggy behavior: ctavan/next.js-reproduce-styled-jsx-bug@489616f

Expected behavior

Adding styled-jsx as a dependency manually should either not produce the bug or lead to a build-time error/warning in Next.js (or it should be at least documented that you should not add another version than the bundled one of styled-jsx to a Next.js project).

Screenshots

Here's how the <head> looks like, when there is NO additional styled-jsx dependency. Note that the <style> tags are included before chunk/0.js is loaded in a blocking fashion:

working

Here's how the <head> looks like, when there is an additional styled-jsx dependency (different version than the one bundled with Next.js). Note that the <style> tags are included after chunk/0.js is loaded in a blocking fashion leading to html content flashing unstyled until chunk/0.js has been loaded:

broken

System information

  • OS: macOS
  • Version of Next.js: 9.1.2
@Timer Timer added good first issue Easy to fix issues, good for newcomers help wanted labels Nov 9, 2019
@Timer
Copy link
Member

Timer commented Nov 9, 2019

Adding a warning when someone tries to install styled-jsx themselves sounds reasonable to me.

@ctavan
Copy link
Contributor Author

ctavan commented Nov 9, 2019

@Timer any pointer of where and how this could be done? I'm happy to contribute.

@Timer
Copy link
Member

Timer commented Nov 9, 2019

We don't really have any prior art, so it's open for exploration. Maybe similar to how we check if minification was disabled.

@olingern
Copy link
Contributor

I would probably hook into preinstall or postinstall depending if you want to throw an error ( pre-installation ) or warn ( post-installation ).

It does get complicated if you want to give a user a warning that references the correct package. For example, if styled-jsx was loaded as a child or peer dependency, you would want to warn the user with the parent, offending package that is in their package.json. From doing some work on yarn in the past, I can say this becomes complex quick unless you're handy with graphs and DFS.

An easier way might be to just check if the user's node_modules directory contains styled-jsx and then warn give an ambiguous warning, i.e. "It looks like one of your packages is using styled-jsx, which causes issues with Next.js."

@joncursi
Copy link

Is there a way to import styled-jsx "through" next?

Most of my CSS is defined in separate files that get imported into the main component files, which kinda forces me to install my own version of styled-jsx in my package.json.

As described in this issue thread, this opens up the developer to package versioning issues between styled-jsx and next.

@cleverboy32
Copy link

so what can i do to fix this question

@arcanis arcanis mentioned this issue Jan 18, 2020
Closed
@Timer Timer removed the help wanted label Jun 3, 2020
@jordinl jordinl mentioned this issue Jan 21, 2021
Closed
@huozhi huozhi mentioned this issue Apr 30, 2022
Merged
@kodiakhq kodiakhq bot closed this as completed in #36585 Apr 30, 2022
kodiakhq bot pushed a commit that referenced this issue Apr 30, 2022
@huozhi @timneutkens
Reexports styled-jsx JSXStyle in nextjs (#36585)
7a09f88 
When using pnpm / yarnPnP to install next.js, styled-jsx as dependency is not hoisted in the top level node_modules, it will fail when nodejs is trying to resolve `styled-jsx/style` from project directory. Re-export `styled-jsx/style` in next.js and let swc/babel plugin compile the import path it to `next/dist/shared/lib/styled-jsx`

Resolves #10149
Closes #21320
Closes #9325



Co-authored-by: Tim Neutkens <[email protected]>
@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
good first issue Easy to fix issues, good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Reexports styled-jsx JSXStyle in nextjs huozhi/next.js
5 participants
@ctavan @Timer @olingern @joncursi @cleverboy32