@storybook/angular: Expected 'styles' to be an array of strings #7877

christianliebel · 2019-08-27T08:47:00Z

Describe the bug

Components with SCSS or LESS (probably others too) styleUrls don’t load in Storybook. The following error message is printed to the console:

zone.js:703 Unhandled Promise rejection: Expected 'styles' to be an array of strings. ; Zone: <root> ; Task: setTimeout ; Value: Error: Expected 'styles' to be an array of strings.
    at assertArrayOfStrings (compiler.js:5668)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:21024)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:21670)
    at compiler.js:21318
    at Array.map (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:21318)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:27376)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:27357)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:27317)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143) Error: Expected 'styles' to be an array of strings.
    at assertArrayOfStrings (http://localhost:6006/vendors~main.34d29019bd40f8e6720a.bundle.js:12731:19)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:6006/vendors~main.34d29019bd40f8e6720a.bundle.js:28087:13)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata (http://localhost:6006/vendors~main.34d29019bd40f8e6720a.bundle.js:28733:28)
    at http://localhost:6006/vendors~main.34d29019bd40f8e6720a.bundle.js:28381:53
    at Array.map (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (http://localhost:6006/vendors~main.34d29019bd40f8e6720a.bundle.js:28381:18)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (http://localhost:6006/vendors~main.34d29019bd40f8e6720a.bundle.js:34439:51)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (http://localhost:6006/vendors~main.34d29019bd40f8e6720a.bundle.js:34420:36)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (http://localhost:6006/vendors~main.34d29019bd40f8e6720a.bundle.js:34380:37)
    at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (http://localhost:6006/vendors~main.34d29019bd40f8e6720a.bundle.js:73681:31)

The referenced stylesheet seems to be loaded as a module, where it should actually be a string (see screenshot below).

To Reproduce
Steps to reproduce the behavior:

ng new test-app
npx -p @storybook/cli@next sb init
In stories/Welcome.stories.ts, use AppComponent instead of Welcome as the component
Launch Storybook.

Expected behavior

The components should successfully show.

Screenshots

Code snippets

N/A

System:

  System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 11.3.0 - ~/.nvm/versions/node/v11.3.0/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v11.3.0/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-actions: ^5.2.0-beta.40 => 5.2.0-beta.40
    @storybook/addon-links: ^5.2.0-beta.40 => 5.2.0-beta.40
    @storybook/addon-notes: ^5.2.0-beta.40 => 5.2.0-beta.40
    @storybook/addons: ^5.2.0-beta.40 => 5.2.0-beta.40
    @storybook/angular: ^5.2.0-beta.40 => 5.2.0-beta.40
  npmGlobalPackages:
    @storybook/cli: 5.2.0-beta.19

Angular CLI: 8.3.0
Node: 11.3.0
OS: darwin x64
Angular: 8.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.0
@angular-devkit/build-angular     0.803.0
@angular-devkit/build-optimizer   0.803.0
@angular-devkit/build-webpack     0.803.0
@angular-devkit/core              8.3.0
@angular-devkit/schematics        8.3.0
@angular/cli                      8.3.0
@ngtools/webpack                  8.3.0
@schematics/angular               8.3.0
@schematics/update                0.803.0
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

Additional context

This seems to be a reincarnation of #3593. The workarounds from this issue did not work for me.

The text was updated successfully, but these errors were encountered:

bufke · 2019-08-28T17:02:29Z

This happens with Angular CLI 8.3.0. As a temp work around you can use 8.2.x

        "@angular-devkit/build-angular": "~0.802.0",
        "@angular/cli": "~8.2.0",

lppedd · 2019-08-29T13:03:40Z

I think this depends on how builds are done using CLI 8.3. The mechanism has changed a bit.
I'm currently blocked on 8.2 because of this.

bufke · 2019-08-30T18:30:22Z

@shilman I recommend tagging this as a bug or feature request. A new angular project with scss will result in this error. I don't think it's a question. To reproduce:

install the latest angular CLI
ng new my-project
select scss
npx -p @storybook/cli sb init --type angular

I would expect the default installation to work. Instead a user would need to find this bug report and then downgrade their Angular version.

YIPG · 2019-09-02T02:15:33Z

Same issue HERE 😿

builtbyjay · 2019-09-02T12:34:43Z

Hi there, I can report that I'm experiencing the same problem.

The @angular/cli and @angular-devkit/build-angular downgrades suggested by @bufke work 👍

I've also had to create an empty default project of type application so that storybook can find the angular-cli webpack config - having a library project type as default doesn't seem to work.

darondel · 2019-09-05T09:46:25Z

Hey, I can reproduce the issue as well.
The default AppComponent is using both templateUrl and styleUrls. However the compiler is loading these data, before getting the error:

I do not know the behind-the-scene Angular compiler though, so I do not know if it is perfectly fine or if the issue may be related to this.

@builtbyjay I had the same issue as well, when the first project is a library, I got the same webpack config warning. I think the solution is to create a project named storybook inside your Angular workspace, but it would be nice to have a documentation on this behaviour.

bufke · 2019-09-08T14:10:22Z

I think the solution is to create a project named storybook

Does anyone have a work around that involves just editing angular.json instead of downgrading Angular CLI? I'd like to get the faster differential builds that 8.3 has. I already have a customized angular.json with a storybook project but it still suffers from this issue.

lppedd · 2019-09-08T15:28:25Z

@bufke afaik, there is no way, if you want to build on the same workspace (and thus on the same NPM modules).

BrsJsk · 2019-09-12T08:37:30Z

So...no way other then to downgrade angular CLI version?

Anthbs · 2019-09-15T09:37:29Z

I got it working in a library only workspace using the following in .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';

    return config;
};

To fix the angular-cli webpack config warning you need to add

"styles": [],
"scripts": [],
"outputPath": ""

to angular.json in the build options.

hiepxanh · 2019-09-15T13:31:30Z

hope this will be fix soon

anvlkv · 2019-09-15T14:43:41Z

@Anthbs trying to use your configuration but getting

ERROR in ./src/styles/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--9-3!./src/styles/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'includePaths'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

My options are just like yours tho:

{
            loader: 'sass-loader',
            options: {
                sourceMap: true
            }
        }

any idea?

Anthbs · 2019-09-15T16:15:43Z

@Anthbs trying to use your configuration but getting

ERROR in ./src/styles/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--9-3!./src/styles/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'includePaths'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

My options are just like yours tho:

{
            loader: 'sass-loader',
            options: {
                sourceMap: true
            }
        }

any idea?

I think its cause your file is empty?
See: webpack-contrib/sass-loader#756

anvlkv · 2019-09-15T16:25:42Z

Yes, saw this one as well. I'm not adding any rules myself but I see there are these two:

exclude: Array(2)
0: "C:\Code\Development\Applications\SimaBiz.Web\SimaProNgApp\src\styles\styles.scss"
1: "C:\Code\Development\Applications\SimaBiz.Web\Content\Bootstrap\css\bootstrap-modal.css"
length: 2
__proto__: Array(0)
test: /\.scss$|\.sass$/
use: Array(3)
0: {loader: "raw-loader"}
1: {loader: "postcss-loader", options: {…}}
2: {loader: "sass-loader", options: {…}}
length: 3
__proto__: Array(0)
__proto__: Object

and

include: Array(2)
0: "C:\Code\Development\Applications\SimaBiz.Web\SimaProNgApp\src\styles\styles.scss"
1: "C:\Code\Development\Applications\SimaBiz.Web\Content\Bootstrap\css\bootstrap-modal.css"
length: 2
__proto__: Array(0)
test: /\.scss$|\.sass$/
use: Array(4)
0: "style-loader"
1: "C:\Code\Development\Applications\SimaBiz.Web\SimaProNgApp\node_modules\@angular-devkit\build-angular\src\angular-cli-files\plugins\raw-css-loader.js"
2: {loader: "postcss-loader", options: {…}}
3: {loader: "sass-loader", options: {…}}
length: 4
__proto__: Array(0)
__proto__: Object

and yes they have incorrect options according to the error I'm getting

I see this is coming from my angular.json which is picked up by storybook. Can I tell storybook which build configuration to use?

lcpautotester · 2019-09-17T23:15:53Z

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';
return config;
};

How did you make this work?
it just fails

simondel · 2019-09-23T09:29:17Z

@shilman Could you give an indication on when this could be fixed? It has been high priority for 23 days now. Having an indication on when it could be fixed could help us determine when to upgrade to the latest version.

shilman · 2019-09-23T09:35:00Z

@simondel I think @kroeder is better positioned to answer that.

literalpie · 2019-09-23T17:19:15Z

I'm also curious if this can be fixed in a way that ensures it won't break again in the future. It's troubling that a CLI release without any breaking changes would cause problems like this. Does this project use unsupported/private functionality of Angular CLI?

kroeder · 2019-09-24T07:03:19Z

@literalpie Storybook hooks into the configuration of Angular in order to provide a zero-configuration environment. While in theory this sounds amazing it actually is troublesome if Angular changes their way of handling webpack stuff. Also troublesome are webpack dependencies that are shared between Angular and Storybook (or possibly installed twice due to version mismatch)

Regarding the webpack stuff: I might have a possible improvement to future changes of Angular CLI but it's still just an idea.

Possible workaround

For running the latest Angular + Storybook version please try to npm i -D raw-loader@1.0.0. It works for me in my companies 60+ stories framework without any trouble. It's not a solution but hopefully a working workaround for most of you

What's going on?

@angular-devkit/build-angular uses raw-loader@3.1.0
@storybook/core uses raw-loader@2.0.0

The angular app itself seems to work with 3.1.0 (just an assumption) because it works just fine using 1.0.0. But Storybook for Angular only works if 1.0.0 is installed. It hasn't worked when I tried to manually install 2.0.0.

Still an assumption: @storybook/core and @storybook/angular are having compatibility issues and we haven't noticed. We'll try to figure out a way that is backwards compatible and brings back a zero-configuration environment.

So far so good, I hope the workaround is working for everyone who has trouble right now 🤞

hiepxanh · 2019-09-24T07:32:47Z

. We'll try to figure out a way that is backwards compatible and brings back a zero-configuration environment.

I think breaking changes must happen if it's necessary sir. Hope more good new from you and StorybookJS team.
p/s: Thank for your solution. It's seem working now. You're saving my life sir ❤️ ❤️ ❤️

lppedd · 2019-09-24T07:43:01Z

@kroeder thanks!

If someone has the time to try this out with v9 BETA, please let us all know if it works too.

kroeder · 2019-09-29T09:53:53Z

According to webpack-contrib/raw-loader#79 this seems to be a general issue, not only a Storybook specific issue

I also found several other issues in other repositories. Although a lot of people saying "use 1.0.0 in order to fix this" I will first check if we can use the latest version or at least raw-loader 2.0.0

lppedd · 2019-09-29T11:21:18Z

@kroeder thanks a lot for your effort, on Sundays too. We appreciate it.

urish · 2019-09-30T13:18:59Z

My workaround was to patch angular2-template-loader to be compatible with the latest raw-loader.

You can achieve the same by installing patch-package, adding a postinstall script (as explained in patch-package documentation), and creating patches/angular2-template-loader+0.6.2.patch with this content:

diff --git a/node_modules/angular2-template-loader/index.js b/node_modules/angular2-template-loader/index.js
index 587cf75..f26754b 100644
--- a/node_modules/angular2-template-loader/index.js
+++ b/node_modules/angular2-template-loader/index.js
@@ -11,6 +11,6 @@ function replaceStringsWithRequires(string) {
     if (url.charAt(0) !== ".") {
       url = "./" + url;
     }
-    return "require('" + url + "')";
+    return "require('" + url + "').default";
   });
 }

lppedd · 2019-09-30T21:05:48Z

@urish that's some nice trickery here. Gonna try that too. Thanks.

lppedd · 2019-10-01T08:24:16Z

Mmmh, the @urish trick works.
However it breaks again on this issue #4796.
Edit: caused by another dependency importing React 15. Madness.

kroeder · 2019-10-02T06:06:14Z

@urish thanks for sharing this! I contacted the owner of angular2-template-loader and want to discuss the future of this package.

urish · 2019-10-02T06:59:40Z

@kroeder happy to help :-)

If you want the workaround to be backward compatible with the older raw-loader, I'd consider changing that line to:

    return "(require('" + url + "').default||require('" + url + "'))";

shilman · 2019-10-14T08:01:20Z

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.18 containing PR #8269 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

shilman · 2019-10-14T09:49:34Z

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.4 containing PR #8269 that references this issue. Upgrade today to try it out!

lppedd · 2019-10-14T12:39:10Z

@shamin seems working on 5.2.4 ;) Thanks!

shilman added angular question / support labels Aug 29, 2019

shilman added bug high priority and removed question / support labels Aug 31, 2019

guillermoarellano mentioned this issue Sep 7, 2019

Unable to install @storybook/angular to a new Angular project. #6804

Closed

VladislavLobakh mentioned this issue Sep 10, 2019

Cannot find type definition file for 'webpack-env' #7855

Closed

kroeder self-assigned this Sep 10, 2019

makimenko mentioned this issue Sep 16, 2019

PR #110 Error: Expected 'styles' to be an array of strings. makimenko/angular-template-for-threejs#112

Closed

This was referenced Oct 2, 2019

Angular: Fix angular2-template-loader / raw-loader version conflicts #8269

Merged

Doesn't work with raw-loader v2.0.0 TheLarkInn/angular2-template-loader#86

Closed

HansCronau mentioned this issue Oct 8, 2019

"export 'ThemePalette' was not found in '@angular/material' #8329

Closed

shilman closed this as completed Oct 14, 2019

jonniebigodes mentioned this issue Oct 19, 2019

Storybook fails to restart in Angular tutorial at config section chromaui/learnstorybook.com#104

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@storybook/angular: Expected 'styles' to be an array of strings #7877

@storybook/angular: Expected 'styles' to be an array of strings #7877

christianliebel commented Aug 27, 2019 •

edited

bufke commented Aug 28, 2019

lppedd commented Aug 29, 2019

bufke commented Aug 30, 2019

YIPG commented Sep 2, 2019

builtbyjay commented Sep 2, 2019

darondel commented Sep 5, 2019

bufke commented Sep 8, 2019

lppedd commented Sep 8, 2019

BrsJsk commented Sep 12, 2019

Anthbs commented Sep 15, 2019 •

edited

hiepxanh commented Sep 15, 2019

anvlkv commented Sep 15, 2019 •

edited

Anthbs commented Sep 15, 2019

anvlkv commented Sep 15, 2019 •

edited

lcpautotester commented Sep 17, 2019

simondel commented Sep 23, 2019

shilman commented Sep 23, 2019

literalpie commented Sep 23, 2019

kroeder commented Sep 24, 2019 •

edited

hiepxanh commented Sep 24, 2019 •

edited

lppedd commented Sep 24, 2019

kroeder commented Sep 29, 2019

lppedd commented Sep 29, 2019

urish commented Sep 30, 2019

lppedd commented Sep 30, 2019

lppedd commented Oct 1, 2019 •

edited

kroeder commented Oct 2, 2019 •

edited

urish commented Oct 2, 2019

shilman commented Oct 14, 2019

shilman commented Oct 14, 2019

lppedd commented Oct 14, 2019 •

edited

@storybook/angular: Expected 'styles' to be an array of strings #7877

@storybook/angular: Expected 'styles' to be an array of strings #7877

Comments

christianliebel commented Aug 27, 2019 • edited

bufke commented Aug 28, 2019

lppedd commented Aug 29, 2019

bufke commented Aug 30, 2019

YIPG commented Sep 2, 2019

builtbyjay commented Sep 2, 2019

darondel commented Sep 5, 2019

bufke commented Sep 8, 2019

lppedd commented Sep 8, 2019

BrsJsk commented Sep 12, 2019

Anthbs commented Sep 15, 2019 • edited

hiepxanh commented Sep 15, 2019

anvlkv commented Sep 15, 2019 • edited

Anthbs commented Sep 15, 2019

anvlkv commented Sep 15, 2019 • edited

lcpautotester commented Sep 17, 2019

simondel commented Sep 23, 2019

shilman commented Sep 23, 2019

literalpie commented Sep 23, 2019

kroeder commented Sep 24, 2019 • edited

Possible workaround

What's going on?

hiepxanh commented Sep 24, 2019 • edited

lppedd commented Sep 24, 2019

kroeder commented Sep 29, 2019

lppedd commented Sep 29, 2019

urish commented Sep 30, 2019

lppedd commented Sep 30, 2019

lppedd commented Oct 1, 2019 • edited

kroeder commented Oct 2, 2019 • edited

urish commented Oct 2, 2019

shilman commented Oct 14, 2019

shilman commented Oct 14, 2019

lppedd commented Oct 14, 2019 • edited

christianliebel commented Aug 27, 2019 •

edited

Anthbs commented Sep 15, 2019 •

edited

anvlkv commented Sep 15, 2019 •

edited

anvlkv commented Sep 15, 2019 •

edited

kroeder commented Sep 24, 2019 •

edited

hiepxanh commented Sep 24, 2019 •

edited

lppedd commented Oct 1, 2019 •

edited

kroeder commented Oct 2, 2019 •

edited

lppedd commented Oct 14, 2019 •

edited