nextjs - 💡(How to fix) Fix Turbopack causes a build error usage of composes with CSS @layer rules [3 comments, 3 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#85200Fetched 2026-04-08 02:17:08
View on GitHub
Comments
3
Participants
3
Timeline
9
Reactions
0
Timeline (top)
commented ×3subscribed ×3labeled ×2issue_type_added ×1

Error Message

After cloning the provided repo, to reproduce the build error: To build successfully without the error: With the --turbopack flag enabled the build fails with the following error: FATAL: An unexpected Turbopack error occurred. A panic log has been written to /var/folders/gw/yvst0j_d6dzb0pdc0n0222rw0000gn/T/next-panic-4c3336c02e1b90a874134a567b365077.log. To help make Turbopack better, report this error by clicking here.

Build error occurred Error [TurbopackInternalError]: Failed to write page endpoint /_error

Root Cause

Caused by:

  • [project]/src/components/component-b/ComponentB.module.css [app-rsc] (css module)
  • The composes property cannot be used within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14

Code Example

Without the flag the build completes successfully, which is the expected behavior.

### Provide environment information

---

### Which area(s) are affected? (Select all that apply)

CSS, Turbopack

### Which stage(s) are affected? (Select all that apply)

next build (local)

### Additional context

Created log file is the same as the console output:
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/doug-stewart/css-module-bug

To Reproduce

After cloning the provided repo, to reproduce the build error:

  1. Run npm run build
  2. Observe the console output

To build successfully without the error:

  1. Remove --turbopack from the package.json file build command
  2. Run npm run build
  3. Observe the console output

Current vs. Expected behavior

With the --turbopack flag enabled the build fails with the following error:

> next build --turbopack

   ▲ Next.js 15.5.6 (Turbopack)

   Creating an optimized production build ...

-----
FATAL: An unexpected Turbopack error occurred. A panic log has been written to /var/folders/gw/yvst0j_d6dzb0pdc0n0222rw0000gn/T/next-panic-4c3336c02e1b90a874134a567b365077.log.

To help make Turbopack better, report this error by clicking here.
-----


> Build error occurred
Error [TurbopackInternalError]: Failed to write page endpoint /_error

Caused by:
- [project]/src/components/component-b/ComponentB.module.css [app-rsc] (css module)
- The `composes` property cannot be used within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14

Debug info:
- Execution of TaskId { id: 2147483650 } transient failed
- Execution of get_all_written_entrypoints_with_issues_operation failed
- Execution of EntrypointsOperation::new failed
- Execution of all_entrypoints_write_to_disk_operation failed
- Execution of Project::emit_all_output_assets failed
- Execution of *emit_assets failed
- Execution of all_assets_from_entries_operation failed
- Execution of *all_assets_from_entries failed
- Execution of output_assets_operation failed
- Execution of <PageEndpoint as Endpoint>::output failed
- Failed to write page endpoint /_error
- Execution of PageEndpoint::output failed
- Execution of PageEndpoint::client_chunks failed
- Execution of *ChunkingContext::evaluated_chunk_group failed
- Execution of Project::client_chunking_context failed
- Execution of *get_client_chunking_context failed
- Execution of Project::module_ids failed
- Execution of Project::whole_app_module_graphs failed
- Execution of whole_app_module_graph_operation failed
- Execution of *ModuleGraph::from_single_graph failed
- Execution of SingleModuleGraph::new_with_entries failed
- [project]/src/components/component-b/ComponentB.module.css [app-rsc] (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 within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14
    at <unknown> (TurbopackInternalError: Failed to write page endpoint /_error)
    at <unknown> (- The `composes` property cannot be used within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14)
    at <unknown> (- The `composes` property cannot be used within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14) {
  type: 'TurbopackInternalError'
}```

Without the flag the build completes successfully, which is the expected behavior.

### Provide environment information

```bash
Operating system: macOS 26.1
Node: v22.12.0
Next.js: 15.5.6

Which area(s) are affected? (Select all that apply)

CSS, Turbopack

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

Created log file is the same as the console output:

Failed to write page endpoint /_error

Caused by:
- [project]/src/components/component-b/ComponentB.module.css [app-rsc] (css module)
- The `composes` property cannot be used within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14

Debug info:
- Execution of TaskId { id: 2147483650 } transient failed
- Execution of get_all_written_entrypoints_with_issues_operation failed
- Execution of EntrypointsOperation::new failed
- Execution of all_entrypoints_write_to_disk_operation failed
- Execution of Project::emit_all_output_assets failed
- Execution of *emit_assets failed
- Execution of all_assets_from_entries_operation failed
- Execution of *all_assets_from_entries failed
- Execution of output_assets_operation failed
- Execution of <PageEndpoint as Endpoint>::output failed
- Failed to write page endpoint /_error
- Execution of PageEndpoint::output failed
- Execution of PageEndpoint::client_chunks failed
- Execution of *ChunkingContext::evaluated_chunk_group failed
- Execution of Project::client_chunking_context failed
- Execution of *get_client_chunking_context failed
- Execution of Project::module_ids failed
- Execution of Project::whole_app_module_graphs failed
- Execution of whole_app_module_graph_operation failed
- Execution of *ModuleGraph::from_single_graph failed
- Execution of SingleModuleGraph::new_with_entries failed
- [project]/src/components/component-b/ComponentB.module.css [app-rsc] (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 within nested rules at [project]/src/components/component-b/ComponentB.module.css:4:14

extent analysis

TL;DR

The build error with Turbopack can likely be fixed by modifying the CSS module in ComponentB.module.css to avoid using the composes property within nested rules.

Guidance

  • Identify the line causing the issue in ComponentB.module.css (line 4, column 14) and refactor the CSS to avoid nested usage of the composes property.
  • Verify that the composes property is used correctly according to CSS module specifications and Turbopack compatibility.
  • If the issue persists, consider temporarily disabling Turbopack to isolate the problem and ensure the CSS module works as expected without it.
  • Review the Next.js and Turbopack documentation for any known issues or limitations related to CSS modules and the composes property.

Example

No specific code example can be provided without the actual CSS code from ComponentB.module.css. However, the general approach would involve restructuring the CSS to ensure that composes is not used within nested rules, such as moving it to the top level of the CSS module or reorganizing the selectors.

Notes

The solution assumes that the issue is specifically related to the use of the composes property within nested rules in the CSS module, as indicated by the error message. Other issues might require different approaches.

Recommendation

Apply a workaround by refactoring the CSS module to comply with Turbopack's requirements, as the error message directly points to the misuse of the composes property within nested rules.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING