angularstorybookangular-storybookangular16

Not able to run storybook in angular project due to "type 'serveroptions' is not generic" in angular storybook


I installed storybook by npx sb init but when try to run storybook in angular 16 I got below error. These errors are not pointing to any specific code in the project but some random code in node and angular.

Variable 'AbortSignal' must be of type '{ new (): AbortSignal; prototype: AbortSignal; abort(reason?: any): AbortSignal; timeout(milliseconds: number): AbortSignal; }', but here has type '{ new (): AbortSignal; prototype: AbortSignal; }

Type 'ServerOptions' is not generic

Here is the detailed error message:


Error: node_modules/@types/node/globals.d.ts:72:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'AbortSignal' must be of type '{ new (): AbortSignal; prototype: AbortSignal; abort(reason?: any): AbortSignal; timeout(milliseconds: number): AbortSignal; }', but here has type '{ new (): AbortSignal; prototype: AbortSignal; }'.

72 declare var AbortSignal: {
               ~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:2090:13
    2090 declare var AbortSignal: {
                     ~~~~~~~~~~~
    'AbortSignal' was also declared here.

    at addError (/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:27)
    at /node_modules/@ngtools/webpack/src/ivy/diagnostics.js:18:9
    at AngularWebpackPlugin.updateJitProgram (/node_modules/@ngtools/webpack/src/ivy/plugin.js:371:5)
    at AngularWebpackPlugin.setupCompilation (/node_modules/@ngtools/webpack/src/ivy/plugin.js:152:87)
    at /node_modules/@ngtools/webpack/src/ivy/plugin.js:100:14
    at Hook.eval [as call] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:14:14), <anonymous>:24:1)
    at Hook.CALL_DELEGATE [as _call] (/node_modules/tapable/lib/Hook.js:11:15)
    at Compiler.newCompilation (/node_modules/webpack/lib/Compiler.js:884:32)
    at /node_modules/webpack/lib/Compiler.js:924:32
    at _next0 (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:41:1)
Error: node_modules/webpack/types.d.ts:6157:5 - error TS2315: Type 'ServerOptions' is not generic.

6157   | ServerOptionsImport<typeof IncomingMessage>
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    at addError (/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:27)
    at /node_modules/@ngtools/webpack/src/ivy/diagnostics.js:18:9
    at AngularWebpackPlugin.updateJitProgram (/node_modules/@ngtools/webpack/src/ivy/plugin.js:371:5)
    at AngularWebpackPlugin.setupCompilation (/node_modules/@ngtools/webpack/src/ivy/plugin.js:152:87)
    at /node_modules/@ngtools/webpack/src/ivy/plugin.js:100:14
    at Hook.eval [as call] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:14:14), <anonymous>:24:1)
    at Hook.CALL_DELEGATE [as _call] (/node_modules/tapable/lib/Hook.js:11:15)
    at Compiler.newCompilation (/node_modules/webpack/lib/Compiler.js:884:32)
    at /node_modules/webpack/lib/Compiler.js:924:32
    at _next0 (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:41:1)
Error: node_modules/webpack/types.d.ts:10934:41 - error TS2315: Type 'ServerOptions' is not generic.

10934 > = SecureContextOptions & TlsOptions & ServerOptionsImport<Request, Response>;
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    at addError (/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:27)
    at /node_modules/@ngtools/webpack/src/ivy/diagnostics.js:18:9
    at AngularWebpackPlugin.updateJitProgram (/node_modules/@ngtools/webpack/src/ivy/plugin.js:371:5)
    at AngularWebpackPlugin.setupCompilation (/node_modules/@ngtools/webpack/src/ivy/plugin.js:152:87)
    at /node_modules/@ngtools/webpack/src/ivy/plugin.js:100:14
    at Hook.eval [as call] (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:14:14), <anonymous>:24:1)
    at Hook.CALL_DELEGATE [as _call] (/node_modules/tapable/lib/Hook.js:11:15)
    at Compiler.newCompilation (/node_modules/webpack/lib/Compiler.js:884:32)
    at /node_modules/webpack/lib/Compiler.js:924:32
    at _next0 (eval at create (/node_modules/tapable/lib/HookCodeFactory.js:28:14), <anonymous>:41:1)

āœ” Would you like to help improve Storybook by sending anonymous crash reports? ā€¦ yes
Broken build, fix the error above.
You may need to refresh the browser.


Solution

  • The issue was I was using node 18.12.1 but "@types/node": "17.0.23"` was installed in my dev dependencies.

    When I updated the "@types/node": "18.16.15" all the issues gone away and able to run and see storybook in browser