[storybook/angular] storybook fails because of missing "node-sass", for Angular v8.0 when defaultProject is a library project

[lacolaco]

Describe the bug

This is a bit complex bug.
This bug is based on the following conditions;

• Storybook v5
• Angular v8.0.0
  • node-sass doesn't exist in package.json
• In angular.json, defaultProject is set to a project which has projectType: library.
• A component (used in a story) has styleUrls and it refers external .scss files which contains @import "...".

Running yarn storybook, it fails with log like the below;

ERROR in ./projects/sample-lib/src/lib/sample-lib.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.sassLoader (/Users/laco/Works/storybook-ngv8-lib/node_modules/sass-loader/lib/loader.js:46:72)
 @ ./projects/sample-lib/src/lib/sample-lib.component.ts 15:17-55
 @ ./src/stories/index.stories.ts
 @ ./src/stories sync \.stories\.ts$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

To Reproduce
Steps to reproduce the behavior:

1. `ng new some-repo --create-application false
2. ng generate library sample-lib
3. yarn add @storybook/cli
4. yarn sb init
   5 Create sample-lib.component.scss file and add it to SampleLibComponent's styleUrls
5. Create foo.scss and import it from sample-lib.component.scss
6. Create a new story for SampleLibComponent
7. yarn storybook

Repro: https://github.com/lacolaco/ngv8lib-storybook-repro

Expected behavior

Even if the defaultProject is a library, storybook should work.

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Framework: angular
• Version: [5.0]

Additional context

The problem is here;

https://github.com/storybookjs/storybook/blob/master/app/angular/src/server/angular-cli_config.js#L92

With a library project, cliParts will be null because of getAngularCliParts. Internally, it uses this function:
https://github.com/storybookjs/storybook/blob/master/app/angular/src/server/angular-cli_utils.js#L53-L65

It depends on @angular_devkit/build-angular but the cliWebpackConfigOptions is defined for @angular_devkit/build_ng_packagr. It makes schema mismatching.

I think storybook should have its own default cliWebpackConfigOptions which will be used when it's projectType is not application.

export function getAngularCliParts(cliWebpackConfigOptions) {
  // eslint-disable-next-line global-require, import/no-extraneous-dependencies
  const ngCliConfigFactory = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');

  if (cliWebpackConfigOptions.projectType !== "application") {
    cliWebpackConfigOptions = defaultCliWebpackConfigOption; // use default
  }

  try {
    return {
      cliCommonConfig: ngCliConfigFactory.getCommonConfig(cliWebpackConfigOptions),
      cliStyleConfig: ngCliConfigFactory.getStylesConfig(cliWebpackConfigOptions),
    };
  } catch (e) {
    return null;
  }
}

[dankrieger]

I had a similar problem where my storybook configuration was different than the default project even when it wasn't a lib. There's a fix in 5.1 that will prefer a project named "storybook" to pull the build config from rather than relying on the defaultProject. Try adding a config for a project named "storybook" to angular.json

[alexan]

Today I generated a new angular 8 project with angular cli. To get storybook running I had to manualy install babel-loaderand @babel/core. This was not a library project.

Logs:

ModuleNotFoundError: Module not found: Error: Can't resolve 'babel-loader' in '/Users/code/frontend/playground/storybook-module-metadata'
    at factory.create (/Users/code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:823:10)
    at factory (/Users/code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/Users//code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users//code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:337:24)
    at /Users//code/frontend/playground/storybook-module-metadata/node_modules/neo-async/async.js:2830:7
    at /Users//code/frontend/playground/storybook-module-metadata/node_modules/neo-async/async.js:6877:13
    at /Users//code/frontend/playground/storybook-module-metadata/node_modules/neo-async/async.js:2830:7
    at done (/Users//code/frontend/playground/storybook-module-metadata/node_modules/neo-async/async.js:2925:13)
    at resolver.resolve (/Users//code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:447:23)
    at doResolve (/Users//code/frontend/playground/storybook-module-metadata/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/Users//code/frontend/playground/storybook-module-metadata/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users//code/frontend/playground/storybook-module-metadata/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at resolver.doResolve (/Users//code/frontend/playground/storybook-module-metadata/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/Users//code/frontend/playground/storybook-module-metadata/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users//code/frontend/playground/storybook-module-metadata/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at hook.callAsync (/Users//code/frontend/playground/storybook-module-metadata/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
resolve 'babel-loader' in '/Users//code/frontend/playground/storybook-module-metadata'
  Parsed request is a module
  using description file: /Users//code/frontend/playground/storybook-module-metadata/package.json (relative path: .)
    resolve as module
      /Users//code/frontend/playground/node_modules doesn't exist or is not a directory
      /Users//code/frontend/node_modules doesn't exist or is not a directory
      /Users//code/node_modules doesn't exist or is not a directory
      /Users//node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users//code/frontend/playground/storybook-module-metadata/node_modules
        using description file: /Users//code/frontend/playground/storybook-module-metadata/package.json (relative path: ./node_modules)
          using description file: /Users//code/frontend/playground/storybook-module-metadata/package.json (relative path: ./node_modules/babel-loader)
            no extension
              /Users//code/frontend/playground/storybook-module-metadata/node_modules/babel-loader doesn't exist
            .js
              /Users//code/frontend/playground/storybook-module-metadata/node_modules/babel-loader.js doesn't exist
            .json
              /Users//code/frontend/playground/storybook-module-metadata/node_modules/babel-loader.json doesn't exist
            as directory
              /Users//code/frontend/playground/storybook-module-metadata/node_modules/babel-loader doesn't exist

logs after installing babel-loader manually:

ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users//code/frontend/playground/storybook-module-metadata/node_modules/babel-loader/lib/index.js:10:11)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at loadLoader (/Users//code/frontend/playground/storybook-module-metadata/node_modules/loader-runner/lib/loadLoader.js:18:17)
    at iteratePitchingLoaders (/Users//code/frontend/playground/storybook-module-metadata/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/Users//code/frontend/playground/storybook-module-metadata/node_modules/loader-runner/lib/LoaderRunner.js:365:2)
    at NormalModule.doBuild (/Users//code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:281:3)
    at runLoaders (/Users//code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:302:20)
    at /Users//code/frontend/playground/storybook-module-metadata/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users//code/frontend/playground/storybook-module-metadata/node_modules/loader-runner/lib/LoaderRunner.js:172:11
    at loadLoader (/Users//code/frontend/playground/storybook-module-metadata/node_modules/loader-runner/lib/loadLoader.js:32:11)
    at iteratePitchingLoaders (/Users//code/frontend/playground/storybook-module-metadata/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
    at runLoaders (/Users//code/frontend/playground/storybook-module-metadata/node_modules/loader-runner/lib/LoaderRunner.js:365:2)
    at NormalModule.doBuild (/Users//code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:281:3)
    at NormalModule.build (/Users//code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:428:15)
    at Compilation.buildModule (/Users//code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:635:10)
    at factory.create (/Users//code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:884:14)
    at factory (/Users//code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:405:6)
    at hooks.afterResolve.callAsync (/Users//code/frontend/playground/storybook-module-metadata/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:155:13)
    at _fn0 (eval at create (/Users//code/frontend/playground/storybook-module-metadata/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at fileExistsWithCase (/Users//code/frontend/playground/storybook-module-metadata/node_modules/case-sensitive-paths-webpack-plugin/index.js:155:9)
    at that.fileExistsWithCase (/Users//code/frontend/playground/storybook-module-metadata/node_modules/case-sensitive-paths-webpack-plugin/index.js:112:7)
    at that.fileExistsWithCase (/Users//code/frontend/playground/storybook-module-metadata/node_modules/case-sensitive-paths-webpack-plugin/index.js:112:7)

[androdel]

I fixed it by just adding node-sass to my devDependencies

[shilman]

@kroeder is this also a problem with examples/angular-cli in the monorepo?

[nategreen]

I just encountered this error also, when attempting to switch from node-sass to sass (Dart Sass). Same setup as described above: default project is a lib, styleUrl .scss files @import .scss files from other packages.

[shilman]

@kroeder @MaximSagan @CodeByAlex I'm seeing this when trying to run examples/angular-cli in our monorepo. Any chance one of the angular maintainers can prioritize this?

[owen26]

As a workaround, what you can do is:

Create a new project entry in angular.json called "storybook",

angular.json

{
  "projects": {
    "your-app": {...},
    "your-lib": {...},
    "storybook": {
      "projectType": "application",
      "root": "copy-from-your-app",
      "sourceRoot": "copy-from-your-app",
      "architect": {
        "build": {
          "options": { ...copy from your-app }
        }
      }
    }
  },
  "defaultProject": "your-lib"
}

With this change, you basically tell storybook what's your intended project in your multi-projects angular workspace to let storybook start/build.

[valentinpalkovic]

Please create a reproduction on Stackblitz (https://storybook.new) for Storybook 7. I will close this in the meantime. Please feel free to reopen the issue, if it is still reproducible in SB 7.