[turbopack] emotion transform plugin drop `config.import_map` needlessly

[l0gicgate]

Verify canary release

• [X] 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:

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

[samcx]

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

[l0gicgate]

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

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]

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

[kdy1]

@l0gicgate

I did something more after verifying it works.

[kdy1]

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

[l0gicgate]

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

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.

[l0gicgate]

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]

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.

[l0gicgate]

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

[timneutkens]

@l0gicgate it won't land on 14 but will land on a 15 patch release. Turbopack on 14 was an early release 🙂