The styled-jsx integration relies on hoisting

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.

[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

[Timer]

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