Open l0gicgate opened 1 week ago
@l0gicgate The CodeSandbox refuses to load, not sure why. Is it possible to move the to a public GitHub repo instead?
@samcx here is another CodeSandbox, I forked it again. Seems to work now: https://codesandbox.io/p/devbox/zy4lww
I have also made a GitHub repo: https://github.com/l0gicgate/nextjs-issue-71408
I tried using @emotion/styled
and @emotion/react
and it worked. (https://codesandbox.io/p/devbox/epic-nobel-q7tnfd )
So it's an issue of import map.
@kdy1 your codesandbox doesn't work. It throws an error just like mine.
The weird thing is the styled
import works, if you remove the css
usage there's no errors:
@l0gicgate
I did something more after verifying it works.
It's already fixed on next@15
.
https://github.com/kdy1/repro-next-71408
@kdy1 you removed “—turbo” in the dev command in your branch. That’s not fixed. This should work with turbopack.
Also, if there is a fix in Next 15 it should be ported to Next 14.
It should work for turbopack, you're right. Reopening.
The fix would be adding import_map: config.import_map.clone()
to https://github.com/vercel/next.js/blob/ca559a5281ff2e2f345cc45e4d05a82e7ba83c9f/turbopack/crates/turbopack-ecmascript-plugins/src/transform/emotion.rs#L62-L79 .
But backporting is another problem.
Thank you for reopening this @kdy1! Is there another way to apply the fix? I'm okay with doing manual config steps if necessary.
There's no way to do it. Technically, you may apply changes in #71776 to the old version of turbopack and have your own build, but it would be quite a hard task.
https://github.com/vercel/next.js/pull/71776 should fix it, but you would need next@15-canary
if you want to use it right away.
So will that fix land in Next 14 at some point after #71776 is merged?
@l0gicgate it won't land on 14 but will land on a 15 patch release. Turbopack on 14 was an early release 🙂
Verify canary release
Provide environment information
Which example does this report relate to?
with-emotion
What browser are you using? (if relevant)
Chrome Version 129.0.6668.90 (Official Build) (arm64)
How are you deploying your application? (if relevant)
Code Sandbox
Describe the Bug
Trying to use a component selector inside
css
function imported from@mui/material
or@mui/material/styles
:The following error is thrown:
I have also tried to add
importMap
to theemotion
property of thecompiler
option:Expected Behavior
It should work with Turbopack. It works with
next dev
but not withnext dev --turbo
To Reproduce
Here is a Code Sandbox with the reproduction: https://codesandbox.io/p/devbox/zy4lww
Here is a GitHub repo with the reproduction https://github.com/l0gicgate/nextjs-issue-71408