Missing peerDependency "@babel/core@^7.0.0-0" from next > styled-jsx > @babel/plugin-syntax-jsx@7.14.5

[m1heng]

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

16.x

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

next > styled-jsx: @babel/plugin-syntax-jsx@7.14.5 requires a peer of @babel/core@^7.0.0-0 but none was installed.

package next requires styled-jsx which has a unversioned optional peerDep @babel/core, but styled-jsx also requires @babel/plugin-syntax-jsx which has a required peerDep @babel/core. And next does not require @babel/core.
This ends up with @babel/plugin-syntax-jsx missed his peerDep @babel/core.

Although it works for now, but with pnpm, it will log warning like above, and I think for sure a clear dependency graph should be maintained.

There are multiple solutions,

1. next add @babel/core as dependency, and mark @babel/core as required peerDependency in styled-jsx.
2. next add @babel/core as peerDependency, and let user add @bable/core in their own project.
3. remove peerDep @babel/core from @babel/plugin-syntax-jsx (I had a look into this package, I am not really sure why did they add @babel/core as its peerDep)

Expected Behavior

Clear dependency.

To Reproduce

No need.

[rtritto]

Related vercel/styled-jsx#736

[huozhi]

Resolved by #32742 , you can install latest canary (next@12.0.9-canary.2) to get rid of this warning