Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
jinwood opened this issue Feb 2, 2022 · 5 comments
Open

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

jinwood opened this issue Feb 2, 2022 · 5 comments
Labels
bug needs triage

Comments

@jinwood
Copy link

jinwood commented Feb 2, 2022 •
edited

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
@thayna-oliveira
Copy link

same error here!

@blemaire
Copy link

blemaire commented Apr 8, 2022

Same with angular 8. also this may be a duplicate of this: #16691

@andender
Copy link

I am also having the same issue with Angular 9

@blemaire
Copy link

blemaire commented May 2, 2022

I had to install ~6.0 of all storybook packages to benefit from v6.

@rafawalter
Copy link

Same error here.

@angular 9.1
@storybook 6.5.12

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@rafawalter @andender @jinwood @blemaire @thayna-oliveira