Storybook: Storybook doesn't work with Angular 8

[chan-dev]

Describe the bug
First off, it's my first time using storybook. So i followed the tutorial in the documentation in the Angular section as it is. But Storybook doesn't work as expected.

Since i'm using scss for my Angular project, i also extended the config with this code as stated in the document as well.

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../'),
  });

  // Return the altered config
  return config;
};

Expected behavior
It works as expected with Angular 8

Screenshots

Code snippets

package.json

{
  "name": "ng-storybook",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.3",
    "@angular/common": "~8.2.3",
    "@angular/compiler": "~8.2.3",
    "@angular/core": "~8.2.3",
    "@angular/forms": "~8.2.3",
    "@angular/platform-browser": "~8.2.3",
    "@angular/platform-browser-dynamic": "~8.2.3",
    "@angular/router": "~8.2.3",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.0",
    "@angular/cli": "~8.3.0",
    "@angular/compiler-cli": "~8.2.3",
    "@angular/language-service": "~8.2.3",
    "@babel/core": "^7.5.5",
    "@storybook/addon-actions": "^5.1.11",
    "@storybook/addon-links": "^5.1.11",
    "@storybook/addon-notes": "^5.1.11",
    "@storybook/addons": "^5.1.11",
    "@storybook/angular": "^5.1.11",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "babel-loader": "^8.0.6",
    "codelyzer": "^5.0.0",
    "css-loader": "^3.2.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "protractor": "~5.4.0",
    "sass-loader": "^7.0.0",
    "style-loader": "^1.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

System:
Environment Info:

System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5 CPU M 560 @ 2.67GHz
Binaries:
Node: 12.8.1 - C:\Program Files\nodejs\node.EXE
npm: 6.10.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.267.0
npmPackages:
@storybook/addon-actions: ^5.1.11 => 5.1.11
@storybook/addon-links: ^5.1.11 => 5.1.11
@storybook/addon-notes: ^5.1.11 => 5.1.11
@storybook/addons: ^5.1.11 => 5.1.11
@storybook/angular: ^5.1.11 => 5.1.11

[shilman]

I'm not sure whether this is a dupe to the other Angular 8 bugs, so I'm marking it as high priority in the hopes that somebody from the Angular world has a chance to look at it.

[chan-dev]

@shilman Thanks, i really want to start learning this tool but currently got stuck with this bug.

[sod]

if you add your own sass loader chain, you have to remove the storybooks just before pushing your own one like:

const isStorybookSassLoader = (rule) => rule.test && rule.test.toString() === '/\\.s(c|a)ss$/')
config.module.rules = config.module.rules.filter((rule) => !isStorybookSassLoader(rule));

It matches just the storybooks test regex in https://github.com/storybookjs/storybook/blob/a65bd69bbe0e5dff716f8295785ac4fd60214d4e/app/angular/src/server/framework-preset-angular.ts#L38 and removes it from the rules.

Be aware that this can break at any storybook update. And be aware that if you do that, you have to inject global css into the document yourself and hot reloading wont work for those global styles anymore.

[Tallyb]

Similar to what @sod did, I had to change 2 webpack rules to make it work. It is somewhat hacky, and any suggestions on the correct way to modify webpack rules are welcome!

//.storybook/webpack.config.js
module.exports = async ({ config, mode }) => {
  let scssLoader = config.module.rules.find(i => !!'a.scss'.match(i.test));
      scssLoader.use = ['to-string-loader', ...scssLoader.use];

  let htmlLoader = config.module.rules.find(i => !!'a.html'.match(i.test));
  htmlLoader.loader = 'html-loader';

  return config;
};

[Rogier-blip]

@Tallyb solution worked for me.

I did have to install, to-string-loader and html-loader.

Thanks for the workaround!

[gpulido]

Hello!,
Sorry for wakeup this issue, I'm using storybook 5.2.6, with angular and sass and I have the problems of this issue.
When i try to fixed it using @Tallyb solution, the storybook builds but it doesn't apply any scss sidecar files for my components...

I have tried almost everything:

• update to sass-loader 8 and using the original webpack configuration without 'to-string-loader': sass-loader 8 has changed the options configuration and It complains about the includePaths option.
• update storybook to 5.3.0-beta.1. Same result as the previous as 5.3.0 uses sass-loader 8.
• I even tested new angular 9 betas, but same problems.
  I don't know what else do :(

[Tallyb]

@gpulido
This seems to work for me in angular 8.2.14 and SB 5.2.6 under the storybook/webpack.config.js:

module.exports = async ({ config, mode }) => {
  let scssLoader = config.module.rules.find(i => !!'a.scss'.match(i.test));
  scssLoader.use = [
    'to-string-loader',
    {
        loader: 'css-loader',
        options: {
            sourceMap: true
        }
    },
    {
        loader: 'sass-loader',
        options: {
            sourceMap: true
        }
    }
];
  let htmlLoader = config.module.rules.find(i => !!'a.html'.match(i.test));
  htmlLoader.loader = 'html-loader';

  console.dir(config.module.rules, {depth: 10, colors: true});
  return config;
};

[gpulido]

@Tallyb Thank you!!
It solved the problem, I have also added the includepaths on the options so I can use the "@import 'app'" on the scss.

[luenmuvel]

@Tallyb Thank you!!
It solved the problem, I have also added the includepaths on the options so I can use the "@import 'app'" on the scss.

Hello, how do can I make the same? Where I need to go? Please help me :(

[gpulido]

@luenmuvel you need to add the @Tallyb solution on the storybook/webpack.config.js

[dfagan2]

@Tallyb and @sod 's solutions didn't work for me either. Getting the same includePaths error

[dfagan2]

Spoke too soon. Wasn't the above solutions for me, but an upgrade to the new 5.3.2 via that npx npm-check-updates '/storybook/' -u && npm install script, then dumping package-lock.json and node_modules and re-running npm install. Up and running now!

[shilman]

Gonna close this and see who complains 🙈

[owen26]

Replicable with the following:

My Angular project has a configuration in angular.json similar to the following:

"stylePreprocessorOptions": {
  "includePaths": [...]
}

This make storybook complains "options has an unknown property "includePaths".

My guess is that my current Angular project (8.2.14) relies on a sass-loader of version 7+, but sotrybook (5.3.6) relies on version 8+ which introduced breaking change to option's validation schema?

I've also checked relevant changes on Angular side, they have this upgrade introduce in v9.0 which is not released yet

https://github.com/angular/angular-cli/commit/2c8b12f45c6f3cd779e860c809db03059b5754b5

So the changes on Storybook side obviously break angular project from being use stylePreprocessorOptions properly.

[Roen00]

I followed the tutorial and I got tons of issues. Could somebody try to setup the project with the newest angular and sass?

[pf1gura]

By forcing sass-loader to version 7 I was able to run storybook again.

yarn add --dev [email protected]

Does anyone have better ideas?

[GreymondTheLong]

Can confirm this is still an issue with v6.1.9. Can confirm that the @storybook/preset-scss project doesn't fix it either.

Using sass-loader version 7 fixes the issue