Storybook: Angular 6 setup errors - starting from the docs - Module build failed (from ./node_modules/postcss-loader/lib/index.js):

[KolbySisk]

Bug or support request summary

I'm going to share my journey to get storybook angular to work again in my project. It was working fine when I was running Angular 5, but after updating to 6 ... it stoped.

So I'm starting with a fresh Angular 6.0.3 project.

Following the Storybook documentation, after a basic setup, I get the error:

node_modules/webpack/lib/DefinePlugin.js:42
                compiler.hooks.compilation.tap(
                               ^
TypeError: Cannot read property 'compilation' of undefined

After digging around the current issues I learned that this was a problem with webpack that arose when updating from a5 to 6. Was told that this was fixed in the 4.0.0-alpha.11+ release.

~ During this point, depending on the alpha version, I've gotten an error about moment not being installed. Assuming this is fixed now with the latest alpha release since I didnt see it with .22. ~

Now I'll try installing the latest alpha 4.0.0-alpha.22. I get the error:
Error: Cannot find module 'babel-loader/package.json

I can't find any threads mentioning this error, so I'll just take a guess and install babel-loader
Cool, seemed to do something. Now I get the error:
Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core'

ok, npm i @babel/core

Now I get:

ERROR in ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/@storybook/core/node_modules/style-loader!./node_modules/css-loader??ref--17-1!./node_modules/@storybook/core/node_modules/postcss-loader/src??postcss!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Syntax Error

(2:1) Unknown word

After removing /src/styles.css from my angular.json file it appears to be working. So now the only problem appears to be how can I include these styles in the angular.json?

[nunos7]

Hi, i have a similar problem...
I use in my project angular 6.1.0 and @storybook/angular 4.0.0-alpha.22, when i try to start storybook i get this error:

info @storybook/angular v4.0.0-alpha.22
info
info => Loading presets
TypeError: Cannot read property 'build' of undefined

[igor-dv]

@KolbySisk,
Just to clarify, there was a lot of work form the 3.4 release (that worked with angular < 6) until today.
One of the major changes is moving to webpack 4 (angular 6 have to work with webpack 4) and moving to babel 7 (I know, for TS user it's less intuitive, I will check what we can do with this), as a result we, currently, have a peer dep for babel-loader (that has a peer dep for babel-core or @babel/core, depends on the version)

Anyway, do you have any custom webpack.config.js in .storybook dir you can share, also package.json may be helpful? Other custom stuff?

@nunos, what exactly similar do you have to this issue?

[nunos7]

Hi @igor-dv,
I said similar, because i did the same steps, described by @KolbySisk.
I create an angular 6 project, then i install storybook (v3.x.x), and after some search i update to storybook 4alpha22, after that i install @babel/core, babel-loader, @angular-devkit/core...
After this i got a diferente error, but the steps are basically the same...

If you prefer i open a new issue?
Thank you for your help.

[igor-dv]

@nunos7, do you have any stack trace of the Cannot read property 'build' of undefined

[nunos7]

Hi @igor-dv,

`info @storybook/angular v4.0.0-alpha.22
info
info => Loading presets
TypeError: Cannot read property 'build' of undefined

at getAngularCliWebpackConfigOptions (......\node_modules\@storybook\angular\dist\server\angular-cli_config.js:44:42)
at Object.webpack (....\node_modules\@storybook\angular\dist\server\framework-preset-angular-cli.js:14:90)
at ....\node_modules\@storybook\core\dist\server\presets.js:73:26
at Array.reduce (<anonymous>)
at applyPresets (.....\node_modules\@storybook\core\dist\server\presets.js:66:18)
at Object.apply (.....\node_modules\@storybook\core\dist\server\presets.js:84:14)
at Object.webpack (.....\node_modules\@storybook\core\dist\server\config.js:30:22)
at getWebpackConfig (.....\node_modules\@storybook\core\dist\server\config.js:60:18)
at _default (......\node_modules\@storybook\core\dist\server\config.js:74:10)
at _default (.....\node_modules\@storybook\core\dist\server\middleware.js:40:36)`

[igor-dv]

Ok, I see. How does your angular.json look like?

[nunos7]

angular.json.txt

[igor-dv]

I see you don't have an architect field, why so? (I am not familiar with the full angular.json structure)

[nunos7]

Hi @igor-dv
You read my mind :), i see angular.json again and detect that "architect" was replaced by "target", i have to consult with my colleagues why and when this appened... but i change "target" to architect and them works...

[mayureshs]

Hi,
I am still getting the same error even with "architect" in the angular.json file (attached). package json is also attached. (Tagging @igor-dv,)
packagejson.txt

ERROR in ./src/app/components/header.component.css
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:40) Unknown word

1 | .element {

2 | position: relative;.tile.tax-forms .recent-form-value ul > li
| ^
3 | top: 50%;
4 | transform: translateY(-50%);

angularjson.txt