vercel / vercel/next.js

Turbopack causes a build error usage of composes with CSS @layer rules

Open
#85,200 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

CSS Turbopack
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction, package.json, and src/components/component-b/ComponentB.module.css. Run npm run build with --turbopack, then compare the successful build without the flag and inspect Turbopack's CSS module processing for the nested @layer and composes usage. Done means the reproduction builds successfully with Turbopack while retaining the reported CSS behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, nextjs
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
62/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.