Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook 6.4.17 produces errors when ran with a fresh Angular 9 project

See original GitHub issue

Describe the bug Hey, we are trying to upgrade from 6.3.4 to 6.4.17. We are getting various errors post-update. I have created a repo that replicates the errors.

Storybook produces errors when npm run storybook in a fresh Angular 9 project. The errors are relating to webpack, infer and LeftSegment (angular router).

ERR! Error: Cannot find module '@angular-devkit/build-angular/src/webpack/configs'
ERR! Require stack:
ERR! - /Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-12.2.x.js
ERR! - /Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-cli.js
ERR! - /Users/me/repo/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /Users/me/repo/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /Users/me/repo/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /Users/me/repo/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /Users/me/repo/node_modules/@storybook/core/server.js
ERR! - /Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/index.js
ERR! - /Users/me/repo/node_modules/@storybook/angular/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:667:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:887:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-12.2.x.js:57:10)
ERR!     at Module._compile (internal/modules/cjs/loader.js:999:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:863:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:708:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:887:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-cli.js:84:36)
ERR!     at Module._compile (internal/modules/cjs/loader.js:999:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:863:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:708:14)
ERR!  Error: Cannot find module '@angular-devkit/build-angular/src/webpack/configs'
ERR! Require stack:
ERR! - /Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-12.2.x.js
ERR! - /Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-cli.js
ERR! - /Users/me/repo/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /Users/me/repo/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /Users/me/repo/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /Users/me/repo/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /Users/me/repo/node_modules/@storybook/core/server.js
ERR! - /Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/index.js
ERR! - /Users/me/repo/node_modules/@storybook/angular/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:667:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:887:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-12.2.x.js:57:10)
ERR!     at Module._compile (internal/modules/cjs/loader.js:999:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:863:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:708:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:887:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-cli.js:84:36)
ERR!     at Module._compile (internal/modules/cjs/loader.js:999:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:863:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:708:14) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '/Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/angular-cli-webpack-12.2.x.js',
ERR!     '/Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-cli.js',
ERR!     '/Users/me/repo/node_modules/@storybook/core-common/dist/cjs/presets.js',
ERR!     '/Users/me/repo/node_modules/@storybook/core-common/dist/cjs/index.js',
ERR!     '/Users/me/repo/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR!     '/Users/me/repo/node_modules/@storybook/core/dist/cjs/server.js',
ERR!     '/Users/me/repo/node_modules/@storybook/core/server.js',
ERR!     '/Users/me/repo/node_modules/@storybook/angular/dist/ts3.9/server/index.js',
ERR!     '/Users/me/repo/node_modules/@storybook/angular/bin/index.js'
ERR!   ]
ERR! }
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
ERR! @storybook/addon-angular-router

…

ERROR in /Users/me/repo/node_modules/react-router/index.d.ts
ERROR in /Users/me/repo/node_modules/react-router/index.d.ts(151,77):
TS2304: Cannot find name 'infer'.

ERROR in /Users/me/repo/node_modules/react-router/index.d.ts
ERROR in /Users/me/repo/node_modules/react-router/index.d.ts(151,83):
TS2304: Cannot find name 'LeftSegment'.
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.28 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 2.03 KiB {HtmlWebpackPlugin_0} [built]
{
  rawMessage: "ERROR TS2304: Cannot find name 'infer'.",
  message: '\u001b[1m\u001b[31mERROR in \u001b[39m\u001b[22m\u001b[1m\u001b[36m/Users/me/repo/node_modules/react-router/index.d.ts(151,77)\u001b[39m\u001b[22m\u001b[1m\u001b[31m:\u001b[39m\u001b[22m\n' +
    "\u001b[90mTS2304: \u001b[39mCannot find name 'infer'.",
  location: { line: 151, character: 77 },
  file: '/Users/me/repo/node_modules/react-router/index.d.ts'
}
{
  rawMessage: "ERROR TS2304: Cannot find name 'LeftSegment'.",
  message: '\u001b[1m\u001b[31mERROR in \u001b[39m\u001b[22m\u001b[1m\u001b[36m/Users/me/repo/node_modules/react-router/index.d.ts(151,83)\u001b[39m\u001b[22m\u001b[1m\u001b[31m:\u001b[39m\u001b[22m\n' +
    "\u001b[90mTS2304: \u001b[39mCannot find name 'LeftSegment'.",
  location: { line: 151, character: 83 },
  file: '/Users/me/repo/node_modules/react-router/index.d.ts'
}

To Reproduce Clone - https://github.com/jinwood/angular-9-sb npm i npm run storybook

(npx sb repro doesn’t support angular 9)

System

Environment Info:

  System:
    OS: macOS 12.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.22.1/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v12.22.1/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Firefox: 96.0.1
    Safari: 15.2
  npmPackages:
    @storybook/addon-actions: ^6.4.17 => 6.4.17
    @storybook/addon-essentials: ^6.4.17 => 6.4.17
    @storybook/addon-links: ^6.4.17 => 6.4.17
    @storybook/angular: ^6.4.17 => 6.4.17

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:6
  • Comments:5

github_iconTop GitHub Comments

6reactions
thayna-oliveiracommented, Feb 21, 2022

same error here!

0reactions
rafawaltercommented, Oct 26, 2022

Same error here.

@angular 9.1 @storybook 6.5.12

Read more comments on GitHub >

github_iconTop Results From Across the Web

storybookjs/storybook (Raised $170.00) - Issuehunt
[Bug]: TypeScript build errors with Lit TS project. Unfunded#20353created by ... Storybook 6.4.17 produces errors when ran with a fresh Angular 9 project....
Read more >
angular/angular-cli - Gitter
I think when I ran npm install, a new patch was applied somewhere or something because it worked fine a few months ago,...
Read more >
Add Storybook to Angular v10 Project - Stack Overflow
You can replicate this by creating a v10 Angular project (set the local @angular/cli to v10, then use ng new ). And then...
Read more >
storybook/addon-storyshots NPM
Angular · Vue. StoryShots In Action. To use StoryShots, you must use your existing Storybook stories as the input for Jest Snapshot Testing....
Read more >
Storybook for Webpack 5 - JS.ORG
Ecosystem compatibility; Access to new features like module federation; Improved performance. Furthermore, as part of this work, we've created a ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

`babelModeV7` should use `babel.config.json` at monorepo root

Next page

[vue3] Introduction page of base repro example does not render