Missing `sass-embedded` peer dependency

rtritto commented 1 month ago

Link to the code that reproduces this issue

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

To Reproduce

create-next-app
add sass-embedded
create a .scss file and import
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 commented 1 month ago

@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 commented 1 month ago

@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

https://github.com/vercel/next.js/pull/70428#issuecomment-2373146251 changes are missing.

Please can you reopen this issue?

FYI @ijjk

samcx commented 1 month ago

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

I'm also not getting that issue.

CleanShot 2024-10-02 at 12 12 24@2x

CleanShot 2024-10-02 at 12 15 12@2x

rtritto commented 1 month ago

@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 commented 1 month ago

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

CleanShot 2024-10-02 at 14 46 09@2x

CleanShot 2024-10-02 at 14 47 55@2x

rtritto commented 1 month ago

@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.

samcx commented 1 month ago

@rtritto Can you also try testing with a different package manager?

rtritto commented 1 month ago

@samcx it works with node-modules as node linker. The issue is on build step (next build) and with PnP (Plug'n'Play) node linker (pnp). Using yarn, I get the error above. Using pnpm with PnP enabled (node-linker=pnp in .npmrc), I get:

.pnp.cjs:12111
    throw firstError;
    ^

Error: Your application tried to access styled-jsx, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: styled-jsx (via "styled-jsx\package.json")
Required by: C:\test-sass-embedded\node_modules\.pnpm\next@15.0.0-canary.178_react-dom@19.0.0-rc-2d16326d-20240930_react@19.0.0-rc-2d16326d-2024093_zqnbduqtthmjkjjqbxyqbncgsa\node_modules\next\dist\server\

Require stack:
- C:\test-sass-embedded\node_modules\.pnpm\next@15.0.0-canary.178_react-dom@19.0.0-rc-2d16326d-20240930_react@19.0.0-rc-2d16326d-2024093_zqnbduqtthmjkjjqbxyqbncgsa\node_modules\next\dist\server\require-hook.js
- C:\test-sass-embedded\node_modules\.pnpm\next@15.0.0-canary.178_react-dom@19.0.0-rc-2d16326d-20240930_react@19.0.0-rc-2d16326d-2024093_zqnbduqtthmjkjjqbxyqbncgsa\node_modules\next\dist\bin\next
    at require$$0.Module._resolveFilename (C:\test-sass-embedded\.pnp.cjs:12110:13)
    at resolve (node:internal/modules/helpers:145:19)
    at Object.<anonymous> (C:\test-sass-embedded\node_modules\.pnpm\next@15.0.0-canary.178_react-dom@19.0.0-rc-2d16326d-20240930_react@19.0.0-rc-2d16326d-2024093_zqnbduqtthmjkjjqbxyqbncgsa\node_modules\next\dist\server\require-hook.js:38:32)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at require$$0.Module._extensions..js (C:\test-sass-embedded\.pnp.cjs:12153:33)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Module._load (node:internal/modules/cjs/loader:1127:12)
    at require$$0.Module._load (C:\test-sass-embedded\.pnp.cjs:12001:31)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)

Node.js v22.9.0

To fix, the first step is the point 4. (title of this issue) of TODOs. Next you should check/fix the use of sass-embedded in the code.

github-actions[bot] commented 2 weeks ago

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

vercel / next.js