The styled-jsx integration relies on hoisting

[arcanis]

Bug report

Describe the bug

Next generates files that contain the following import statement:

import foo from 'styled-jsx/style';

Since the output files belong to the project that depends on Next rather than Next itself, the styled-jsx dependency needs to be listed in the user project. Based on #9325, I think this isn't what you're looking for.

Suggested fix

1. Fix styled-jsx by:
   • adding a custom import path setting (it's currently hardcoded).
2. Fix next by:
   • adding a new file (let's say styled-jsx.js) that contains module.exports = require('styled-jsx/style') (it would basically re-export its own dependency)
   • updating the Babel configuration to use next/styled-jsx inside the custom import path setting that we will have implemented in 1.

This solution isn't obtrusive, doesn't have breaking changes, and makes Next resilient to problems highlighted in #9325 (and, more importantly to me, makes the default create-next-app setup work with Yarn 2 😉).

Note that I likely won't have the resources to make the fix myself right now.

[Timer]

Thanks for the ping! Marked to be investigated soon. 🙏

[therazor]

judging by the linked issues this should be fixed in v9.5.3 and above, but I'm having the same problem on that version. Is there anything missing still?

steps to repro:

yarn create next-app nextjs-starter--example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
cd nextjs-starter
yarn set version berry
yarn dev

[masihjahangiri]

@arcanis @therazor The issue is still unresolved. I get this error:

- Required package: styled-jsx (via "styled-jsx/style")
- Required by: /app/components/shared-component/FormsInputsWithLabel.tsx
- event - build page: /next/dist/pages/_error
- wait  - compiling...
- error - ./components/shared-component/FormsInputsWithLabel.tsx
- Module not found: Your application tried to access styled-jsx, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

[masihjahangiri]

I solved my issue temporary with add nodeLinker: node-modules field to .yarnrc.yml and run yarn install again. I'm waiting for a full solution.

[merceyz]

As the error says, you're trying to require styled-jsx without declaring it, so if you declare it, it would work again with PnP

[masihjahangiri]

@merceyz I'm tried to import styled-jsx but I can't find any way to import it to my component. Do you have any idea that how to import it to a next.js component? I think in build time babel handle importing.

[jordinl]

Any thoughts on fixing this?

I've created an example application that reproduces this issue:

See: https://github.com/jordinl83/yarn-styled-jsx-bug

To reproduce, just run:

yarn
yarn dev

And navigate to localhost:3000. You should see the error:

Module not found: Your application tried to access styled-jsx, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Also, in branch with-styled-jsx-installed I tried adding styled-jsx as a dependency, which seems to have the unintended consequence of not generating the CSS at build time.

To reproduce:

git checkout with-styled-jsx-installed
yarn build
yarn start

Navigate to localhost:3000, open developer console and disable javascript. You'll notice that styles are not applied when reloading the page.

cc @timneutkens

[jordinl]

@timneutkens @Timer Added failing test for styled-jsx and PNP: #21320

Let me know if you would like me to attempt to fix it and what would be the best approach. I see @arcanis gave a recommendation in the description of this issue, so I could try that?

[github-actions]

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.