Turbopack Error: The composes property cannot be used with a simple class selector

[Obvio]

Turbopack version: v16.0.1-canary.5-10-g406721415
Next.js version: 16.0.1

Error message:

Failed to write app endpoint /library/[[...slug]]/page

Caused by:
- [project]/src/modules/library/library.module.css [app-client] (css module)
- The `composes` property cannot be used with a simple class selector at [project]/src/modules/library/library.module.css:317:14

Debug info:
- Execution of get_written_endpoint_with_issues_operation failed
- Execution of endpoint_write_to_disk failed
- Execution of <AppEndpoint as Endpoint>::output failed
- Failed to write app endpoint /library/[[...slug]]/page
- Execution of AppEndpoint::output failed
- Execution of AppProject::app_module_graphs failed
- Execution of *<AppEndpoint as Endpoint>::additional_entries failed
- Execution of *ModuleGraph::from_graphs failed
- Execution of SingleModuleGraph::new_with_entries_visited_intern failed
- [project]/src/modules/library/library.module.css [app-client] (css module)
- Execution of primary_chunkable_referenced_modules failed
- Execution of <ModuleCssAsset as Module>::references failed
- Execution of ModuleCssAsset::module_references failed
- Execution of ModuleCssAsset::classes failed
- Execution of process_css_with_placeholder failed
- The `composes` property cannot be used with a simple class selector at [project]/src/modules/library/library.module.css:317:14

[Mr-Nilarnab]

Good catch — that’s a Turbopack CSS Modules compatibility error.
Here’s what’s happening 👇

---

🧩 The core issue

The error says:

The `composes` property cannot be used with a simple class selector

That means in your library.module.css, at line 317, you have something like:

.myClass {
  composes: anotherClass;
  /* ... */
}

or

.myClass {
  composes: .anotherClass;
}

This syntax works under Webpack’s older CSS Modules handling,
but Turbopack’s new CSS processor doesn’t allow using composes with a simple class selector (.className).

---

💡 Why this happens

• The composes keyword is a CSS Modules feature that lets you inherit styles from another class.
• Turbopack currently only supports composes when referencing other files or module exports, not direct class selectors.

So:
❌ Invalid for Turbopack

.title {
  composes: heading;
}

✅ Valid

.title {
  composes: heading from './typography.module.css';
}

---

✅ How to fix it

Option 1: Remove composes (simplest)

If the styles are simple, just manually include both classes in JSX:

<div className={`${styles.heading} ${styles.title}`}>

and remove composes from CSS.

---

Option 2: Use “from” syntax properly

If you meant to inherit from another module:

.myClass {
  composes: baseStyle from './base.module.css';
}

---

Option 3: Wait for Turbopack full CSS Modules support

This is a known limitation in current Next.js 16 / Turbopack builds.
You can track or comment on the ongoing issue here:
👉 #85812

---

⚙️ Temporary workaround

Run your dev server with Webpack instead of Turbopack:

next dev --no-turbo

That will restore full composes support until the fix lands.

---

✅ TL;DR

• You have a CSS rule like composes: .someClass;
• Turbopack doesn’t support it yet
• Fix = remove it, or use from 'file.module.css', or run --no-turbo

---

[Obvio]

@Mr-Nilarnab thank you. I was actually using "composes" like so:

.contentSubtitle {
  composes: bodyText from './../../../../common/styles/utils.css';
  color: var(--Text-Dark-2, #41444d);
  font-weight: 700;
}

without the . before the class name.
But the issue seems to be different, utils.css is not a css module file (lacking the .module. in the filename), changing it to utils.module.css resolved the issue. I'm not aware of the spec rules for this but seems somewhat wrong.

One other issue I noted is that it doesnt like composes in nested rules like this:

.contentSubtitle {
  & span {
    composes: bodyText from '../../../../common/styles/utils.module.css';
    color: var(--Text-Dark-2, #41444d);
  }
}

// or

.contentSubtitle span {
  composes: bodyText from '../../../../common/styles/utils.module.css';
  color: var(--Text-Dark-2, #41444d);
}

again, not sure about the spec for this..