storybook: Storybook doesn't work with Angular 8

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 Capture

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® Core™ 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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 19 (3 by maintainers)

Most upvoted comments

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

Roen00 on Jan 20, 2020

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.

owen26 on Jan 20, 2020

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;
};

Tallyb on Sep 13, 2019

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!

dfagan2 on Jan 14, 2020

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

gpulido on Jan 12, 2020

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.

sod on Sep 10, 2019