Next.js: 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.