Missing `sass-embedded` peer dependency

[rtritto]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/gracious-voice-8mxdxl?workspaceId=eb53ed51-e5b9-4293-8298-f0747af5ed78

To Reproduce

1. create-next-app
2. add sass-embedded
3. create a .scss file and import
4. next dev

Current vs. Expected behavior

Current

next tried to access sass (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

Required package: sass
Required by: next@npm:14.2.8 (via C:\<WORKSPACE>\node_modules\next\dist\compiled\sass-loader\)

To use Next.js' built-in Sass support, you first need to install `sass`.
Run `npm i sass` or `yarn add sass` inside your workspace.

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

Expected:

No error and sass-embedded ia an optional peer dependency

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 32510
  Available CPU cores: 16
Binaries:
  Node: 22.3.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.8 // There is a newer version (14.2.10) available, upgrade recommended!
  eslint-config-next: 14.2.8
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A
 ⚠ There is a newer version (14.2.10) available, upgrade recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

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

create-next-app, Runtime, Webpack

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

next dev (local)

Additional context

sass-embedded support is already added in #64577 (discussion #36160)

[samcx]

@rtritto Gathered from that :

You need this in your next.config

  sassOptions: {
    implementation: 'sass-embedded'
  }

It looks like we need to also update some documentation, will go ahead and do that before closing this issue.

[rtritto]

@samcx with 15.0.0-canary.174 this issue still persists with:

// next.config
  sassOptions: {
    implementation: 'sass-embedded'
  },

sass-embedded isn't added to peer dependencies and to peer dependencies meta.

On build step, I got this error:

To use Next.js' built-in Sass support, you first need to install `sass`.
Run `npm i sass` or `yarn add sass` inside your workspace.
Learn more: https://nextjs.org/docs/messages/install-sass

#70428 (comment) changes are missing.

Please can you reopen this issue?

FYI @ijjk

[samcx]

@rtritto Can you clarify what needed to be updated exactly?

I'm also not getting that issue.

[rtritto]

@samcx To reproduce, you need to import a file .scss in the /pages/_app and then start.

TODOs:

1. fix the support of sass-embedd (no error message on logs)
2. update the error message on logs with sass and sass-embedd and not only sass:

• packages/next/src/client/components/react-dev-overlay/internal/helpers/format-webpack-messages.ts
• test/e2e/app-dir/scss/webpack-error/webpack-error.test.ts

3. update the documentation (https://nextjs.org/docs/messages/install-sass) with the reference(s) to sass-embedded and not only sass
4. add sass-embedded to peer dependencies and peer dependencies meta

[samcx]

@rtritto Not seeing this issue with Pages Router as well.

[rtritto]

@samcx

  ▲ Next.js 15.0.0-canary.177
  - Local:        http://localhost:3000
  - Environments: .env.development, .env

 ✓ Starting...
 ✓ Ready in 1622ms
 ○ Compiling / ...
 ⨯ ./.yarn/__virtual__/next-virtual-865f8a5342/4/Users/<USER>/AppData/Local/Yarn/Berry/cache/next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[1]!./.yarn/__virtual__/next-virtual-865f8a5342/4/Users/<USER>/AppData/Local/Yarn/Berry/cache/next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./.yarn/__virtual__/next-virtual-865f8a5342/4/Users/<USER>/AppData/Local/Yarn/Berry/cache/next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./.yarn/__virtual__/next-virtual-865f8a5342/4/Users/<USER>/AppData/Local/Yarn/Berry/cache/next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[4]!./scss/videojs.scss
Error: next tried to access sass (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

Required package: sass
Required by: next@virtual:0f3ca8e0ef6d2a24cc5dafda1de20914dbbc7bd5ab1c182de4414ffb141d3021fe4045bc036f82d6b7804d5facc1b46ed6da48a16ca8d1f61c1c14997edde76f#npm:15.0.0-canary.177 (via C:\test-sass-embedded\.yarn\__virtual__\next-virtual-865f8a5342\4\Users\<USER>\AppData\Local\Yarn\Berry\cache\next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip\node_modules\next\dist\compiled\sass-loader\)

Ancestor breaking the chain: test-sass-embedded@workspace:.

Require stack:
- C:\test-sass-embedded\.yarn\__virtual__\next-virtual-865f8a5342\4\Users\<USER>\AppData\Local\Yarn\Berry\cache\next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip\node_modules\next\dist\compiled\sass-loader\cjs.js
- C:\test-sass-embedded\.yarn\__virtual__\next-virtual-865f8a5342\4\Users\<USER>\AppData\Local\Yarn\Berry\cache\next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip\node_modules\next\dist\compiled\loader-runner\LoaderRunner.js
- C:\test-sass-embedded\.yarn\__virtual__\next-virtual-865f8a5342\4\Users\<USER>\AppData\Local\Yarn\Berry\cache\next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip\node_modules\next\dist\compiled\webpack\bundle5.js
- C:\test-sass-embedded\.yarn\__virtual__\next-virtual-865f8a5342\4\Users\<USER>\AppData\Local\Yarn\Berry\cache\next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip\node_modules\next\dist\compiled\webpack\webpack.js
- C:\test-sass-embedded\.yarn\__virtual__\next-virtual-865f8a5342\4\Users\<USER>\AppData\Local\Yarn\Berry\cache\next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip\node_modules\next\dist\server\config-utils.js
- C:\test-sass-embedded\.yarn\__virtual__\next-virtual-865f8a5342\4\Users\<USER>\AppData\Local\Yarn\Berry\cache\next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip\node_modules\next\dist\server\config.js
- C:\test-sass-embedded\.yarn\__virtual__\next-virtual-865f8a5342\4\Users\<USER>\AppData\Local\Yarn\Berry\cache\next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip\node_modules\next\dist\server\next.js
- C:\test-sass-embedded\.yarn\__virtual__\next-virtual-865f8a5342\4\Users\<USER>\AppData\Local\Yarn\Berry\cache\next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip\node_modules\next\dist\server\lib\start-server.js
Import trace for requested module:
./.yarn/__virtual__/next-virtual-865f8a5342/4/Users/<USER>/AppData/Local/Yarn/Berry/cache/next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[1]!./.yarn/__virtual__/next-virtual-865f8a5342/4/Users/<USER>/AppData/Local/Yarn/Berry/cache/next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./.yarn/__virtual__/next-virtual-865f8a5342/4/Users/<USER>/AppData/Local/Yarn/Berry/cache/next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./.yarn/__virtual__/next-virtual-865f8a5342/4/Users/<USER>/AppData/Local/Yarn/Berry/cache/next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[4]!./scss/videojs.scss
./scss/videojs.scss
 ⨯ ./.yarn/__virtual__/next-virtual-865f8a5342/4/Users/<USER>/AppData/Local/Yarn/Berry/cache/next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[1]!./.yarn/__virtual__/next-virtual-865f8a5342/4/Users/<USER>/AppData/Local/Yarn/Berry/cache/next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[13].use[2]!./.yarn/__virtual__/next-virtual-865f8a5342/4/Users/<USER>/AppData/Local/Yarn/Berry/cache/next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[13].use[3]!./.yarn/__virtual__/next-virtual-865f8a5342/4/Users/<USER>/AppData/Local/Yarn/Berry/cache/next-npm-15.0.0-canary.177-dceb92e7a3-10c0.zip/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[13].oneOf[13].use[4]!./scss/videojs.scss
Error: next tried to access sass (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.