Storybook: Error: Cannot find module '@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs'

[sam-warren-finnair]

Describe the bug
A clear and concise description of what the bug is.

Upgrading from 5.1.11 > 5.2.1 causes an error message to appear whilst building with the command start-storybook -s src/icons -p 9001 -c ./storybook. However the build will still complete and storybook opens successfully.

I have not yet been able to narrow down what part of my applications setup (possibly the tsconfig.json) has caused this but I will update the issue after further investigation.

I have a custom webpack config but this doesnt seem to be the cause.

info @storybook/angular v5.2.1
info 
info => Loading static files from: /Users/ay52231/development/repo/fcom-ui-styles/src/icons .
info => Loading presets
WARN   Failed to load preset: "/Users/ay52231/development/repo/fcom-ui-styles/node_modules/@storybook/angular/dist/server/framework-preset-angular-cli.js"
ERR! Error: Cannot find module '@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
ERR!     at Module.require (internal/modules/cjs/loader.js:692:17)
ERR!     at require (internal/modules/cjs/helpers.js:25:18)
ERR!     at Object.<anonymous> (/Users/ay52231/development/repo/fcom-ui-styles/node_modules/@storybook/angular/dist/server/angular-cli_utils.js:19:25)
ERR!     at Module._compile (internal/modules/cjs/loader.js:778:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:653:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
ERR!     at Module.require (internal/modules/cjs/loader.js:692:17)
ERR!     at require (internal/modules/cjs/helpers.js:25:18)
ERR!     at Object.<anonymous> (/Users/ay52231/development/repo/fcom-ui-styles/node_modules/@storybook/angular/dist/server/angular-cli_config.js:21:27)
ERR!     at Module._compile (internal/modules/cjs/loader.js:778:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:653:32)

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

No error to appear in the console

Screenshots
If applicable, add screenshots to help explain your problem.

Code snippets
If applicable, add code samples to help explain your problem.

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "removeComments": false,
    "sourceMap": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "target": "es5",
    "lib": ["es6", "dom"],
    "baseUrl": "."
  },
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true
  },
  "include": ["./"],
  "compileOnSave": false
}

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 10.16.2 - ~/.nvm/versions/node/v10.16.2/bin/node
    Yarn: 1.17.3 - ~/.nvm/versions/node/v10.16.2/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.2/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 67.0.4
    Safari: 12.1.2
  npmPackages:
    @storybook/addon-knobs: 5.2.1 => 5.2.1 
    @storybook/addon-viewport: 5.2.1 => 5.2.1 
    @storybook/angular: 5.2.1 => 5.2.1 

Additional context
Add any other context about the problem here.

[sam-warren-finnair]

I managed to fix this myself by adding some additional packages and an update to style-loader.

Add the packages below:

"@angular-devkit/build-angular": "^0.803.5",
"@angular/compiler-cli": "^8.2.7",
"css-loader": "^3.2.0", // you can probably skip this unless you use a custom webpack config with css-loader

Fix style-loader in my custom webpack config. Im not sure exactly what caused this change. Perhaps the update to url-loader in @storybook/core.

-    url-loader "^1.1.2"
+   url-loader "^2.0.1"

diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js
index aa280d3..c2b18ac 100644
--- a/storybook/webpack.config.js
+++ b/storybook/webpack.config.js
@@ -64,7 +64,7 @@ module.exports = async ({ config }) => {
         {
           loader: 'style-loader',
           options: {
-            attrs: {
+            attributes: {
               'data-id': 'storybook-components',
             },
           },
@@ -84,7 +84,7 @@ module.exports = async ({ config }) => {
         {
           loader: 'style-loader',
           options: {
-            attrs: {
+            attributes: {
               'data-id': 'global-styles',
             },
           },

[shilman]

@sam-warren-finnair mind issuing a PR for this?

[sam-warren-finnair]

Hey @shilman, sure I'll try and do that in the next couple of days :)

[kroeder]

Hm I'm wondering

The error is

Error: Cannot find module '@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs'

so isn't @angular-devkit/build-angular just missing or installed in an incompatible version?

We need this here: https://github.com/storybookjs/storybook/blob/next/app/angular/src/server/angular-cli_utils.ts#L6

Is it possible that you provide a repo with a reproduction?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[morr0350]

Looks like @storybook/angular/dist/server/angular-cli_utils.js is trying to load angular cli webpack configs from "@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs" on line 20, but the webpack configs in angular CLI have moved to a utils folder after Angular v8 - the error goes away if I update angular-cli_utils.js line 20 to:

var webpack_configs_1 = require("@angular-devkit/build-angular/src/utils/webpack-browser-config");

[Rescla]

And if that doesn't work, try:

var webpack_configs_1 = require("@angular-devkit/build-angular/src/webpack/configs");

Worked for me with "@angular-devkit/build-angular": "0.1100.1"