[turbopack] emotion transform plugin drop config.import_map needlessly

[l0gicgate]

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:

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

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.

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

#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 🙂