profile
viewpoint

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

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.

storybookjs/storybook

Answer questions 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',
             },
           },
useful!
source:https://uonfu.com/
Github User Rank List