Error: Cannot find module 'sass-loader'

[dep]

Describe the bug
My webpack job is failing with the following ominous error:

Error: Cannot find module 'sass-loader'

To Reproduce

my storybook main.js

module.exports = {
  addons: [
    "@storybook/addon-docs",
    "@storybook/addon-controls",
    {
      name: "@storybook/preset-scss",
      options: {
        cssLoaderOptions: {
          esModule: true,
          modules: {
            namedExport: true,
            auto: true,
            localIdentName: "[name]__[local]--[hash:base64:5]",
            exportLocalsConvention: "camelCaseOnly",
          },
        },
        sassLoaderOptions: {
          sassOptions: {
            modules: true,
          },
        },
        styleLoaderOptions: {
          modules: {
            namedExport: true,
          },
        },
      },
    },
  ],
  stories: ["../src/**/*.stories.{mdx,js}"],
};

My package.json where i've tried to manually add sass and sass-loader:

{
  "name": "@foo/box-login-hero",
  "version": "0.0.7",
  "private": true,
  "description": "This is a customizable login page for foo",
  "main": "./src/index.js",
  "scripts": {
    "clean": "rm -rf node_modules/",
    "depcheck": "npx depcheck --ignore-patterns=dist",
    "lint": "npx eslint './src/**/*.js'",
    "test": "npx jest",
    "build-storybook": "npx build-storybook --quiet --output-dir storybook-static/src",
    "storybook": "start-storybook --quiet --ci -p 3002",
    "webpack:dev": "NODE_ENV=development APP_PATH=/applications/react/login-hero/ npx webpack --mode development --config ./webpack.config.js",
    "webpack:prod": "NODE_ENV=production APP_PATH=/applications/react/login-hero/ npx webpack --mode production --config ./webpack.config.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/foo/box.git",
    "directory": "applications/react/login-hero"
  },
  "bugs": {
    "url": "https://github.com/foo/box/issues"
  },
  "homepage": "https://github.com/foo/box#readme",
  "dependencies": {
    "prop-types": "15.8.1",
    "regenerator-runtime": "0.13.9"
  },
  "devDependencies": {
    "@foo/eslint-config-box": "3.0.8",
    "@foo/webpack-config-box": "2.2.6",
    "@storybook/addon-controls": "6.5.9",
    "@storybook/addon-docs": "6.5.10",
    "@storybook/addons": "6.5.10",
    "@storybook/preset-scss": "1.0.3",
    "@storybook/react": "6.5.10",
    "@storybook/theming": "6.5.10",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "12.1.5",
    "depcheck": "1.4.3",
    "eslint": "7.32.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.6.1",
    "eslint-plugin-react": "7.30.1",
    "html-webpack-plugin": "5.5.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "28.1.0",
    "jest-environment-jsdom": "28.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sass": "1.50.1",
    "sass-loader": "10.2.1",
    "webpack": "5.74.0",
    "webpack-cli": "4.10.0"
  },
  "peerDependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "engines": {
    "node": "^12.22.7"
  }
}

Full stack:

npx lerna run build-storybook --stream --scope=@foo/box-login-hero
lerna notice cli v5.3.0
lerna info versioning independent
lerna info ci enabled
notice filter including "@foo/box-login-hero"
info filter [ '@foo/box-login-hero' ]
lerna info Executing command in 1 package: "npm run build-storybook"
@foo/box-login-hero: > @foo/[email protected] build-storybook /home/runner/work/box/box/applications/react/login-hero
@foo/box-login-hero: > npx build-storybook --quiet --output-dir storybook-static/src
@foo/box-login-hero: info @storybook/react v6.5.10
@foo/box-login-hero: info 
@foo/box-login-hero: info => Cleaning outputDir: /home/runner/work/box/box/applications/react/login-hero/storybook-static/src
@foo/box-login-hero: info => Loading presets
@foo/box-login-hero: info => Loading custom manager config
@foo/box-login-hero: info => Compiling manager..
@foo/box-login-hero: info => Compiling preview..
@foo/box-login-hero: info Addon-docs: using MDX1
@foo/box-login-hero: info => Loading custom manager config
@foo/box-login-hero: ERR! Error: Cannot find module 'sass-loader'
@foo/box-login-hero: ERR! Require stack:
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/preset-scss/index.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/core-server/node_modules/@storybook/core-common/dist/cjs/presets.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/core-server/node_modules/@storybook/core-common/dist/cjs/index.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/core-server/dist/cjs/index.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/core/dist/cjs/server.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/core/server.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/react/dist/cjs/server/build.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/react/bin/build.js
@foo/box-login-hero: ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
@foo/box-login-hero: ERR!     at Function.resolve (internal/modules/cjs/helpers.js:80:19)
@foo/box-login-hero: ERR!     at Object.webpack (/home/runner/work/box/box/node_modules/@storybook/preset-scss/index.js:35:35)
@foo/box-login-hero: ERR!     at /home/runner/work/box/box/node_modules/@storybook/core-server/node_modules/@storybook/core-common/dist/cjs/presets.js:294:28
@foo/box-login-hero: ERR!     at async builderGeneratorFn (/home/runner/work/box/box/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:207:16)
@foo/box-login-hero: ERR!     at async Object.build (/home/runner/work/box/box/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:289:14)
@foo/box-login-hero: ERR!     at async Promise.all (index 1)
@foo/box-login-hero: ERR!     at async buildStaticStandalone (/home/runner/work/box/box/node_modules/@storybook/core-server/dist/cjs/build-static.js:218:28)
@foo/box-login-hero: ERR!     at async buildStatic (/home/runner/work/box/box/node_modules/@storybook/core-server/dist/cjs/build-static.js:254:5)
@foo/box-login-hero: ERR!  Error: Cannot find module 'sass-loader'
@foo/box-login-hero: ERR! Require stack:
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/preset-scss/index.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/core-server/node_modules/@storybook/core-common/dist/cjs/presets.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/core-server/node_modules/@storybook/core-common/dist/cjs/index.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/core-server/dist/cjs/index.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/core/dist/cjs/server.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/core/server.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/react/dist/cjs/server/build.js
@foo/box-login-hero: ERR! - /home/runner/work/box/box/node_modules/@storybook/react/bin/build.js
@foo/box-login-hero: ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
@foo/box-login-hero: ERR!     at Function.resolve (internal/modules/cjs/helpers.js:80:19)
@foo/box-login-hero: ERR!     at Object.webpack (/home/runner/work/box/box/node_modules/@storybook/preset-scss/index.js:35:35)
@foo/box-login-hero: ERR!     at /home/runner/work/box/box/node_modules/@storybook/core-server/node_modules/@storybook/core-common/dist/cjs/presets.js:294:28
@foo/box-login-hero: ERR!     at async builderGeneratorFn (/home/runner/work/box/box/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:207:16)
@foo/box-login-hero: ERR!     at async Object.build (/home/runner/work/box/box/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:289:14)
@foo/box-login-hero: ERR!     at async Promise.all (index 1)
@foo/box-login-hero: ERR!     at async buildStaticStandalone (/home/runner/work/box/box/node_modules/@storybook/core-server/dist/cjs/build-static.js:218:28)
@foo/box-login-hero: ERR!     at async buildStatic (/home/runner/work/box/box/node_modules/@storybook/core-server/dist/cjs/build-static.js:254:5) {
@foo/box-login-hero: ERR!   code: 'MODULE_NOT_FOUND',
@foo/box-login-hero: ERR!   requireStack: [
@foo/box-login-hero: ERR!     '/home/runner/work/box/box/node_modules/@storybook/preset-scss/index.js',
@foo/box-login-hero: ERR!     '/home/runner/work/box/box/node_modules/@storybook/core-server/node_modules/@storybook/core-common/dist/cjs/presets.js',
@foo/box-login-hero: ERR!     '/home/runner/work/box/box/node_modules/@storybook/core-server/node_modules/@storybook/core-common/dist/cjs/index.js',
@foo/box-login-hero: ERR!     '/home/runner/work/box/box/node_modules/@storybook/core-server/dist/cjs/index.js',
@foo/box-login-hero: ERR!     '/home/runner/work/box/box/node_modules/@storybook/core/dist/cjs/server.js',
@foo/box-login-hero: ERR!     '/home/runner/work/box/box/node_modules/@storybook/core/server.js',
@foo/box-login-hero: ERR!     '/home/runner/work/box/box/node_modules/@storybook/react/dist/cjs/server/build.js',
@foo/box-login-hero: ERR!     '/home/runner/work/box/box/node_modules/@storybook/react/bin/build.js'
@foo/box-login-hero: ERR!   ]
@foo/box-login-hero: ERR! }
@foo/box-login-hero: info => Loading presets
@foo/box-login-hero: attention => Storybook now collects completely anonymous telemetry regarding usage.
@foo/box-login-hero: This information is used to shape Storybook's roadmap and prioritize features.
@foo/box-login-hero: You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
@foo/box-login-hero: https://storybook.js.org/telemetry
@foo/box-login-hero: npm ERR! code ELIFECYCLE
@foo/box-login-hero: npm ERR! errno 1
@foo/box-login-hero: npm ERR! @foo/[email protected] build-storybook: `npx build-storybook --quiet --output-dir storybook-static/src`
@foo/box-login-hero: npm ERR! Exit status 1
@foo/box-login-hero: npm ERR! 
@foo/box-login-hero: npm ERR! Failed at the @foo/[email protected] build-storybook script.
@foo/box-login-hero: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
@foo/box-login-hero: npm ERR! A complete log of this run can be found in:
@foo/box-login-hero: npm ERR!     /home/runner/.npm/_logs/2022-08-18T19_31_46_452Z-debug.log
lerna ERR! npm run build-storybook exited 1 in '@foo/box-login-hero'
make: *** [Makefile:17: build-storybook-box-login-hero] Error 1

Thanks for any help!

[Christian-Oleson]

Any update on this? I have the same issue

[sergejschorcht]

Maybe this can help: storybookjs/presets#195 (comment)