How to Fix: SASS import error when adding carbon-components to nextjs with turbopack

6 min read Aldawsari
6 min read

Carbon Components can fail immediately in a Next.js app running with Turbopack because the Sass import chain used by the package depends on resolution behavior that Turbopack does not fully handle the same way as the classic webpack pipeline. The result is a Sass import error even though the same setup often works in non-Turbopack builds.

Understanding the Root Cause

This issue happens at the intersection of Next.js, Turbopack, and the legacy Sass structure used by carbon-components. The package was designed around Sass imports that historically worked through webpack-based resolution, including package-level partial lookup and nested imports from node_modules.

When you enable Turbopack, the module graph and stylesheet pipeline are no longer processed exactly like webpack. In this specific case, Sass files inside carbon-components or related Carbon packages may reference imports that rely on behavior such as:

  • implicit Sass partial resolution
  • package import shortcuts
  • transitive imports from deprecated Carbon Sass entrypoints
  • older assumptions about how node_modules paths are discovered

The practical problem is that carbon-components is part of an older Carbon styling approach, while modern Next.js projects with Turbopack are more reliable with the newer Carbon packages such as @carbon/react and its current styling entrypoints. If you import old Sass entry files directly, Turbopack may throw an error because it cannot resolve the Sass dependency chain the way webpack did.

There is also a versioning angle. Older Carbon packages were built in a time when Sass tooling expected @import-heavy workflows. Modern Sass and modern bundlers increasingly favor newer resolution rules and @use-style ecosystems. That mismatch is the technical root cause.

Step-by-Step Solution

The most stable fix is to stop importing legacy carbon-components Sass directly in a Turbopack-based Next.js app and instead use the current Carbon package structure.

1. Remove legacy Carbon packages if they are not required

If your app currently depends on carbon-components for styling, replace it with the modern package where possible.

npm uninstall carbon-components carbon-icons carbon-components-react

Then install the current Carbon React package and Sass support:

npm install @carbon/react sass

If you use Yarn:

yarn remove carbon-components carbon-icons carbon-components-react
yarn add @carbon/react sass

2. Import Carbon styles from the supported entrypoint

In the App Router, update app/globals.scss or app/layout.tsx usage to load the modern stylesheet.

@use '@carbon/react';

Or import the compiled CSS if your setup does not require Sass customization:

import '@carbon/react/css/styles.css';

If you only need the default Carbon theme and want the least Turbopack friction, the compiled CSS import is often the safest route.

3. Use the stylesheet in the correct Next.js entry

For the App Router:

// app/layout.tsx
import './globals.scss';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

If using compiled CSS instead:

// app/layout.tsx
import '@carbon/react/css/styles.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

4. Verify your Next.js version

Make sure you are on a recent Next.js version because Turbopack support is evolving rapidly.

npm install next@latest react@latest react-dom@latest

Then start the dev server again:

npm run dev

5. If you must keep legacy carbon-components, disable Turbopack for now

If migration is not immediately possible, the most pragmatic workaround is to use the webpack dev server instead of Turbopack until the dependency chain is modernized.

npm run dev -- --no-turbo

Or update the script in package.json:

{
  "scripts": {
    "dev": "next dev"
  }
}

This works because webpack has broader compatibility with older Sass import conventions used by legacy Carbon packages.

6. Clean and reinstall dependencies

After changing packages, remove cached artifacts to avoid stale resolution issues.

rm -rf .next node_modules package-lock.json
npm install
npm run dev

For Yarn:

rm -rf .next node_modules yarn.lock
yarn install
yarn dev

A stable Turbopack-compatible setup usually looks like this:

// app/layout.tsx
import '@carbon/react/css/styles.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
// app/page.tsx
'use client';

import { Button } from '@carbon/react';

export default function Page() {
  return <Button>Hello Carbon</Button>;
}

If this renders correctly, you have bypassed the problematic legacy Sass import path.

Common Edge Cases

Using carbon-components-react with modern Carbon packages

Do not mix carbon-components-react and @carbon/react in the same migration unless you know exactly why. They belong to different generations of the Carbon ecosystem and can create duplicate styles, mismatched peer dependencies, or broken imports.

Importing Sass variables from old Carbon files

If your codebase customizes Carbon through direct Sass imports from package internals, those paths may break under Turbopack even if the main stylesheet loads. In that case, switch to documented theming APIs from the current Carbon package rather than deep-importing internal Sass files.

App Router vs Pages Router confusion

Global styles must be imported from the correct top-level file. In the App Router, use app/layout.tsx. In the Pages Router, use pages/_app.tsx. Importing global Carbon styles in the wrong place can produce a different error that looks related but is actually a Next.js global CSS rule violation.

Sass installed but still failing

Having the sass package installed does not guarantee compatibility. The error is often not about missing Sass itself, but about how the imported package structure interacts with Turbopack resolution.

Transpile and monorepo setups

If this project lives in a monorepo, package hoisting and workspace symlinks can make Sass resolution more fragile. Test first in a minimal standalone app, then add monorepo configuration carefully. If needed, temporarily disable Turbopack to confirm whether the problem is the bundler or workspace layout.

FAQ

Can I keep using carbon-components with Turbopack?

Possibly, but it is not the best long-term path. The issue comes from legacy Sass import patterns, so the safer fix is migrating to @carbon/react or using webpack until migration is complete.

Why does the same Carbon Sass import work without Turbopack?

Because webpack and Turbopack do not resolve every stylesheet dependency exactly the same way. Legacy Sass packages often depend on webpack-compatible behavior that Turbopack is still improving.

Should I use Sass or compiled CSS for Carbon in Next.js?

If your goal is stability, use the compiled CSS import from @carbon/react. If you need advanced theming and Sass customization, use the modern Carbon Sass entrypoints only after confirming they work with your current Next.js and Turbopack version.

For teams reproducing the exact GitHub issue from the provided repository, the most reliable resolution is: replace legacy carbon-components Sass imports, move to @carbon/react, and fall back to webpack dev mode if legacy Sass must remain. That aligns the dependency tree with the current Next.js tooling model and removes the import pattern that triggers the Turbopack Sass failure.

Reference project: GitHub reproduction repository.

Leave a Reply

Your email address will not be published. Required fields are marked *