Skip to content

SASS error message link broken when import traces are present #83637

@mcantonbul

Description

@mcantonbul

Link to the code that reproduces this issue

https://github.com/mcantonbul/nextjs-sass-import-error

To Reproduce

  1. Create a new Next.js project:
    pnpm create next-app@latest my-app
  2. Inside components/Button/, create:
    - Button.tsx with import './Button.module.scss'
    - Button.module.scss
  3. Import and use Button in multiple pages: pages/index.tsx and pages/about.tsx.
  4. Ensure sass is not installed.
  5. Run pnpm run dev.
  6. Observe that the Sass installation link merges with the Import trace header.

Current vs. Expected behavior

Current behavior:

Learn more: https://nextjs.org/docs/messages/install-sassImport trace:

Expected behavior:

Learn more: https://nextjs.org/docs/messages/install-sass
Import trace:

Screenshot:

Image

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 16223
  Available CPU cores: 12
Binaries:
  Node: 21.6.2
  npm: 8.5.2
  Yarn: 1.22.18
  pnpm: 10.14.0
Relevant Packages:
  next: 15.5.2 // Latest available version is detected (15.5.2).
  eslint-config-next: 15.5.2
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.9.2
Next.js Config:
  output: N/A

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

Error Handling, Turbopack

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

next dev (local)

Additional context

The issue occurs only when multiple import traces are present. This causes the documentationLink to merge with the Import trace header, making the link invalid.

Source details:

  • The Learn more link is added in packages/next/src/shared/lib/turbopack/utils.ts at line 166
  • The Import trace section is added at line 181

This separation in code causes the two strings to concatenate incorrectly when importTraces are present.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Error HandlingRelated to handling errors (e.g., error.tsx, global-error.tsx).TurbopackRelated to Turbopack with Next.js.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions