Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[turbopack] emotion transform plugin drop config.import_map needlessly #71408

Open
1 task done
l0gicgate opened this issue Oct 17, 2024 · 11 comments · May be fixed by #71776
Open
1 task done

[turbopack] emotion transform plugin drop config.import_map needlessly #71408

l0gicgate opened this issue Oct 17, 2024 · 11 comments · May be fixed by #71776
Assignees
@kdy1
Labels
Turbopack Related to Turbopack with Next.js.

Comments

@l0gicgate
Copy link

l0gicgate commented Oct 17, 2024 •
edited
Loading

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: 8.15.4
Relevant Packages:
  next: 14.2.15 // Latest available version is detected (14.2.15).
  eslint-config-next: 14.2.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

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:

import { css, styled } from "@mui/material/styles";

const OtherDiv = styled("div")`
  background: blue;
  width: 100px;
  height: 100px;
`;

const MyCustomDiv = styled("div")`
  width: 300px;
  height: 300px;
  background: red;

  ${() => css`
    &${OtherDiv} {
      background: black;
    }
  `}
`;

export default function Home() {
  return (
    <main>
      <MyCustomDiv>
        <OtherDiv />
      </MyCustomDiv>
    </main>
  );
}

The following error is thrown:
CleanShot 2024-10-16 at 23 41 13@2x

I have also tried to add importMap to the emotion property of the compiler option:

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    emotion: {
      importMap: {
        "@mui/system": {
          styled: {
            canonicalImport: ["@emotion/styled", "default"],
            styledBaseImport: ["@mui/system", "styled"],
          },
        },
        "@mui/material/styles": {
          styled: {
            canonicalImport: ["@emotion/styled", "default"],
            styledBaseImport: ["@mui/material/styles", "styled"],
          },
        },
        "@mui/material": {
          styled: {
            canonicalImport: ["@emotion/styled", "default"],
            styledBaseImport: ["@mui/material", "styled"],
          },
        },
      },
    },
  },
};

module.exports = nextConfig;

Expected Behavior

It should work with Turbopack. It works with next dev but not with next 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
@l0gicgate l0gicgate added the examples Issue/PR related to examples label Oct 17, 2024
@l0gicgate l0gicgate mentioned this issue Oct 17, 2024
Closed
2 tasks
@samcx samcx added Turbopack Related to Turbopack with Next.js. and removed examples Issue/PR related to examples labels Oct 17, 2024
@samcx
Copy link
Member

samcx commented Oct 17, 2024

@l0gicgate The CodeSandbox refuses to load, not sure why. Is it possible to move the :repro: to a public GitHub repo instead?

@l0gicgate
Copy link
Author

l0gicgate commented Oct 18, 2024 •
edited
Loading

@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

@kdy1 kdy1 self-assigned this Oct 22, 2024
@kdy1
Copy link
Member

kdy1 commented Oct 22, 2024

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.

@l0gicgate
Copy link
Author

l0gicgate commented Oct 22, 2024 •
edited
Loading

@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:
CleanShot 2024-10-22 at 10 36 22

@kdy1
Copy link
Member

kdy1 commented Oct 23, 2024

@l0gicgate
image

I did something more after verifying it works.

@kdy1
Copy link
Member

kdy1 commented Oct 23, 2024

It's already fixed on next@15.
https://github.com/kdy1/repro-next-71408

@kdy1 kdy1 closed this as completed Oct 23, 2024
@l0gicgate
Copy link
Author

@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.

@kdy1
Copy link
Member

kdy1 commented Oct 23, 2024

It should work for turbopack, you're right. Reopening.
The fix would be adding import_map: config.import_map.clone() to

next.js/turbopack/crates/turbopack-ecmascript-plugins/src/transform/emotion.rs

Lines 62 to 79 in ca559a5

let config = swc_emotion::EmotionOptions {
// When you create a transformer structure, it is assumed that you are performing an
// emotion transform.
enabled: Some(true),
sourcemap: config.sourcemap,
label_format: config.label_format.clone(),
auto_label: if let Some(auto_label) = config.auto_label.as_ref() {
match auto_label {
EmotionLabelKind::Always => Some(true),
EmotionLabelKind::Never => Some(false),
// [TODO]: this is not correct coerece, need to be fixed
EmotionLabelKind::DevOnly => None,
}
} else {
None
},
..Default::default()
};
.

But backporting is another problem.

@kdy1 kdy1 reopened this Oct 23, 2024
@kdy1 kdy1 changed the title [turbopack] MUI v6 - Cannot use component selectors inside of css function [turbopack] emotion transform plugin drop config.import_map needlessly Oct 23, 2024
@l0gicgate
Copy link
Author

Thank you for reopening this @kdy1! Is there another way to apply the fix? I'm okay with doing manual config steps if necessary.

@kdy1 kdy1 linked a pull request Oct 24, 2024 that will close this issue
Draft
@kdy1
Copy link
Member

kdy1 commented Oct 24, 2024

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.

#71776 should fix it, but you would need next@15-canary if you want to use it right away.

@l0gicgate
Copy link
Author

So will that fix land in Next 14 at some point after #71776 is merged?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kdy1 kdy1

Labels
Turbopack Related to Turbopack with Next.js.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(turbopack): Apply import_map option of swc_emotion correctly vercel/next.js
3 participants
@l0gicgate @samcx @kdy1