-
Notifications
You must be signed in to change notification settings - Fork 29.3k
Labels
Error HandlingRelated to handling errors (e.g., error.tsx, global-error.tsx).Related to handling errors (e.g., error.tsx, global-error.tsx).TurbopackRelated to Turbopack with Next.js.Related to Turbopack with Next.js.
Description
Link to the code that reproduces this issue
https://github.com/mcantonbul/nextjs-sass-import-error
To Reproduce
- Create a new Next.js project:
pnpm create next-app@latest my-app
- Inside
components/Button/
, create:
-Button.tsx
withimport './Button.module.scss'
-Button.module.scss
- Import and use
Button
in multiple pages:pages/index.tsx
andpages/about.tsx
. - Ensure
sass
is not installed. - Run
pnpm run dev
. - 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:

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 inpackages/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
Labels
Error HandlingRelated to handling errors (e.g., error.tsx, global-error.tsx).Related to handling errors (e.g., error.tsx, global-error.tsx).TurbopackRelated to Turbopack with Next.js.Related to Turbopack with Next.js.