Next.js: Bad error message when importing sass without it being installed in dev

Created on 9 Jun 2020  路  3Comments  路  Source: vercel/next.js

The require stack should not be present when importing sass without it installed in dev.
This message should be short & sweet.

image

error - ./pages/test.module.scss
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://err.sh/next.js/install-sass
Require stack:
- /Users/joe/Desktop/scratch2/test/node_modules/sass-loader/dist/getDefaultSassImplementation.js
- /Users/joe/Desktop/scratch2/test/node_modules/sass-loader/dist/getSassImplementation.js
- /Users/joe/Desktop/scratch2/test/node_modules/sass-loader/dist/index.js
- /Users/joe/Desktop/scratch2/test/node_modules/sass-loader/dist/cjs.js
- /Users/joe/Desktop/scratch2/test/node_modules/loader-runner/lib/loadLoader.js
- /Users/joe/Desktop/scratch2/test/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/joe/Desktop/scratch2/test/node_modules/webpack/lib/NormalModule.js
- /Users/joe/Desktop/scratch2/test/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/joe/Desktop/scratch2/test/node_modules/webpack/lib/Compiler.js
- /Users/joe/Desktop/scratch2/test/node_modules/webpack/lib/webpack.js
- /Users/joe/Desktop/scratch2/test/node_modules/next/dist/server/hot-reloader.js
- /Users/joe/Desktop/scratch2/test/node_modules/next/dist/server/next-dev-server.js
- /Users/joe/Desktop/scratch2/test/node_modules/next/dist/server/next.js
- /Users/joe/Desktop/scratch2/test/node_modules/next/dist/server/lib/start-server.js
- /Users/joe/Desktop/scratch2/test/node_modules/next/dist/cli/next-dev.js
- /Users/joe/Desktop/scratch2/test/node_modules/next/dist/bin/next
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Cannot find module 'node-sass'
Require stack:
- /Users/joe/Desktop/scratch2/test/node_modules/sass-loader/dist/getDefaultSassImplementation.js
- /Users/joe/Desktop/scratch2/test/node_modules/sass-loader/dist/getSassImplementation.js
- /Users/joe/Desktop/scratch2/test/node_modules/sass-loader/dist/index.js
- /Users/joe/Desktop/scratch2/test/node_modules/sass-loader/dist/cjs.js
- /Users/joe/Desktop/scratch2/test/node_modules/loader-runner/lib/loadLoader.js
- /Users/joe/Desktop/scratch2/test/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/joe/Desktop/scratch2/test/node_modules/webpack/lib/NormalModule.js
- /Users/joe/Desktop/scratch2/test/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/joe/Desktop/scratch2/test/node_modules/webpack/lib/Compiler.js
- /Users/joe/Desktop/scratch2/test/node_modules/webpack/lib/webpack.js
- /Users/joe/Desktop/scratch2/test/node_modules/next/dist/server/hot-reloader.js
- /Users/joe/Desktop/scratch2/test/node_modules/next/dist/server/next-dev-server.js
- /Users/joe/Desktop/scratch2/test/node_modules/next/dist/server/next.js
- /Users/joe/Desktop/scratch2/test/node_modules/next/dist/server/lib/start-server.js
- /Users/joe/Desktop/scratch2/test/node_modules/next/dist/cli/next-dev.js
- /Users/joe/Desktop/scratch2/test/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at getDefaultSassImplementation (/Users/joe/Desktop/scratch2/test/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/Users/joe/Desktop/scratch2/test/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/Users/joe/Desktop/scratch2/test/node_modules/sass-loader/dist/index.js:40:61)
    at /Users/joe/Desktop/scratch2/test/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/joe/Desktop/scratch2/test/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/joe/Desktop/scratch2/test/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/Users/joe/Desktop/scratch2/test/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/Users/joe/Desktop/scratch2/test/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at /Users/joe/Desktop/scratch2/test/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at /Users/joe/Desktop/scratch2/test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
    at processTicksAndRejections (internal/process/task_queues.js:79:11)
good first issue bug

All 3 comments

Hello @Timer, I can take it, do you have any idea about the message that we could display ? 馃檪

@moh12594 the error message should be the same, but without the stack trace!

I'd only like to see:

./pages/test.module.scss
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://err.sh/next.js/install-sass

... and that's it!

There was probably a regression introduced in packages/next/client/dev/error-overlay/format-webpack-messages.js. I'd go there to fix it!

This PR #10797 is suspect.

Was this page helpful?
0 / 5 - 0 ratings