search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.93k stars 9.21k forks source link

Type Errors With Angular Package #19225

Open user-aslkdflkc opened 1 year ago

user-aslkdflkc commented 1 year ago

Describe the bug I'm having trouble getting Storybook to install. I'm able to install it with a fresh Angular 13 repo, but as soon as I import the popular calendar package fullcalendar it stops working. Here's a minimal repo reproducing the error. (I don't think it's specific to that package, because you get the same error if you have a minimal repo using other packages as well (eg, vue-advanced-chat).

user@computer:~/Downloads/testing-storybook/fullcalendar-example-projects/angular13$ npm run storybook

> angular13@0.0.0 storybook /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13
> npm run docs:json && start-storybook -p 6006

> angular13@0.0.0 docs:json /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13
> compodoc -p ./tsconfig.json -e json -d .

1.1.19

TypeScript version used by Compodoc : 4.5.5

TypeScript version of current project : 4.4.3

Node.js version : v14.19.3

Operating system : Linux 5.15

[08:43:28] No configuration file found, switching to CLI flags.
[08:43:28] Using tsconfig file : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/tsconfig.json
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.browserslistrc
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.gitignore
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/README.md
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/karma.conf.js
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.editorconfig
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/angular.json
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/package-lock.json
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/package.json
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/tsconfig.app.json
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/tsconfig.json
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/tsconfig.spec.json
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.idea/.gitignore
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.idea/angular13.iml
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.idea/modules.xml
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.idea/vcs.xml
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.idea/workspace.xml
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.storybook/main.js
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.storybook/preview.js
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.storybook/tsconfig.json
[08:43:28] Ignoring       : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.storybook/typings.d.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/scripts/copy-fc.sh
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/favicon.ico
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/index.html
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/main.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/polyfills.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/styles.scss
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/test.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/app/app.component.html
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/app/app.component.scss
[08:43:28] Ignoring       : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/app/app.component.spec.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/app/app.module.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/app/event-utils.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/app/app.component.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/assets/.gitkeep
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/environments/environment.prod.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/environments/environment.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/Button.stories.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/Header.stories.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/Introduction.stories.mdx
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/Page.stories.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/User.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/button.component.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/button.css
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/header.component.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/header.css
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/page.component.ts
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/page.css
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/assets/code-brackets.svg
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/assets/colors.svg
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/assets/direction.svg
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/assets/comments.svg
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/assets/flow.svg
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/assets/plugin.svg
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/assets/repo.svg
[08:43:28] Including      : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/assets/stackalt.svg
[08:43:28] Searching package.json file
[08:43:28] package.json file found
[08:43:28] Processing package.json dependencies
[08:43:28] Searching README.md, CHANGELOG.md, CONTRIBUTING.md, LICENSE.md, TODO.md files
[08:43:28] README.md file found
[08:43:28] Error during /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/CHANGELOG read
[08:43:28] Continuing without CHANGELOG.md file
[08:43:28] Error during /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/CONTRIBUTING read
[08:43:28] Continuing without CONTRIBUTING.md file
[08:43:28] Error during /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/LICENSE read
[08:43:28] Continuing without LICENSE.md file
[08:43:28] Error during /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/TODO read
[08:43:28] Continuing without TODO.md file
[08:43:28] Get dependencies data
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/main.ts
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/polyfills.ts
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/test.ts
[08:43:28] found          : require
[08:43:28] found          : context
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/app/app.module.ts
[08:43:28] found          : AppModule
[08:43:28]                : - imports:
[08:43:28]                :     - BrowserModule
[08:43:28]                : - declarations:
[08:43:28]                :     - AppComponent
[08:43:28]                : - bootstrap:
[08:43:28]                :     - AppComponent
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/app/event-utils.ts
[08:43:28] found          : eventGuid
[08:43:28] found          : TODAY_STR
[08:43:28] found          : INITIAL_EVENTS
[08:43:28] found          : createEventId
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/app/app.component.ts
[08:43:28] found          : AppComponent
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/environments/environment.prod.ts
[08:43:28] found          : environment
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/environments/environment.ts
[08:43:28] found          : environment
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/Button.stories.ts
[08:43:28] found          : Template
[08:43:28] found          : Primary
[08:43:28] found          : Secondary
[08:43:28] found          : Large
[08:43:28] found          : Small
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/Header.stories.ts
[08:43:28] found          : Template
[08:43:28] found          : LoggedIn
[08:43:28] found          : LoggedOut
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/Page.stories.ts
[08:43:28] found          : Template
[08:43:28] found          : LoggedOut
[08:43:28] found          : LoggedIn
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/User.ts
[08:43:28] found          : User
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/button.component.ts
[08:43:28] found          : ButtonComponent
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/header.component.ts
[08:43:28] found          : HeaderComponent
[08:43:28] parsing        : /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/src/stories/page.component.ts
[08:43:28] found          : PageComponent
[08:43:28] -------------------
[08:43:28] Project statistics 
[08:43:28] - files      : 53
[08:43:28] - module     : 1
[08:43:28] - component  : 4
[08:43:28] - interface  : 1
[08:43:28] -------------------
[08:43:28] Prepare components
[08:43:28]  AppComponent has a templateUrl, include it
[08:43:28]  AppComponent has styleUrls, include them
[08:43:28]  ButtonComponent has styleUrls, include them
[08:43:28]  HeaderComponent has styleUrls, include them
[08:43:28]  PageComponent has styleUrls, include them
[08:43:28] Prepare modules
[08:43:28] Prepare interfaces
[08:43:28] Prepare miscellaneous
[08:43:28] Process documentation coverage report
[08:43:28] Generating documentation in export format json
[08:43:28] Documentation generated in ./ in 0.511 seconds
info @storybook/angular v6.5.12
info 
info => Loading presets
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular project with "tsConfig:/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/.storybook/tsconfig.json"
WARN Your Storybook startup uses a solution that will not be supported in version 7.0. 
WARN You must use angular builder to have an explicit configuration on the project used in angular.json
WARN Read more at:
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
WARN - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
info => Using angular project "angular13:build" for configuring Storybook
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules
info => Ignoring cached manager due to change in manager config
<i> [webpack-dev-middleware] wait until bundle finished
<i> [webpack-dev-middleware] wait until bundle finished: /__webpack_hmr
<i> [webpack-dev-middleware] wait until bundle finished: /__webpack_hmr
55% building 15/18 entries 6354/6364 dependencies 1550/1577 modulesassets by chunk 6.08 MiB (id hint: vendors)
  assets by status 5.86 MiB [big]
    asset vendors-node_modules_storybook_addon-actions_manager_js-node_modules_storybook_addon-backgrou-076004.manager.bundle.js 4.43 MiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_formatter-0d5cb0eb_js.manager.bundle.js 882 KiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_OverlayScrollbars-1355f44c_js.manager.bundle.js 295 KiB [emitted] [big] (id hint: vendors)
    asset vendors-node_modules_storybook_components_dist_esm_syntaxhighlighter-b07b042a_js.manager.bundle.js 286 KiB [emitted] [big] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_WithTooltip-167e9982_js.manager.bundle.js 126 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_Color-f953d088_js.manager.bundle.js 82.8 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_storybook_components_dist_esm_GlobalScrollAreaStyles-8793ce4a_js.manager.bundle.js 15.5 KiB [emitted] (id hint: vendors)
asset runtime~main.manager.bundle.js 14.5 KiB [emitted] (name: runtime~main)
asset index.html 3.59 KiB [emitted]
asset main.manager.bundle.js 1.55 KiB [emitted] (name: main)
asset node_modules_unfetch_dist_unfetch_js.manager.bundle.js 1.28 KiB [emitted]
Entrypoint main [big] 4.45 MiB = runtime~main.manager.bundle.js 14.5 KiB vendors-node_modules_storybook_addon-actions_manager_js-node_modules_storybook_addon-backgrou-076004.manager.bundle.js 4.43 MiB main.manager.bundle.js 1.55 KiB
orphan modules 967 KiB [orphan] 124 modules
runtime modules 9.01 KiB 14 modules
modules by path ./node_modules/ 5.38 MiB 816 modules
./util.inspect (ignored) 15 bytes [built] [code generated]
manager (webpack 5.64.1) compiled successfully in 41182 ms
99% done plugins webpack-hot-middlewarewebpack built preview b184c7cfc6203d8fe04d in 57354ms
WARN Force closed manager build
Error: node_modules/@storybook/theming/dist/ts3.9/index.d.ts:18:13 - error TS2724: 'React' has no exported member named 'ReactElement'. Did you mean 'createElement'?

18 }) => React.ReactElement;
               ~~~~~~~~~~~~

    at addError (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:29)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:17:17
    at AngularWebpackPlugin.updateJitProgram (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:483:9)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:203:24
    at Hook.eval [as call] (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:19:1)
    at Hook.CALL_DELEGATE [as _call] (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1054:30)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:41:1)
    at eval (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:55:1)
Error: node_modules/@storybook/theming/dist/ts3.9/index.d.ts:106:70 - error TS2694: Namespace 'React' has no exported member 'ComponentType'.

106 export declare type CreateStyledComponentExtrinsic<Tag extends React.ComponentType<any>, ExtraProps, Theme extends object> = CreateStyledComponentBase<PropsOf<Tag>, ExtraProps, Theme>;
                                                                         ~~~~~~~~~~~~~

    at addError (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:29)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:17:17
    at AngularWebpackPlugin.updateJitProgram (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:483:9)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:203:24
    at Hook.eval [as call] (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:19:1)
    at Hook.CALL_DELEGATE [as _call] (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1054:30)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:41:1)
    at eval (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:55:1)
Error: node_modules/@storybook/theming/dist/ts3.9/index.d.ts:112:75 - error TS2694: Namespace 'React' has no exported member 'JSXElementConstructor'.

112 export declare type PropsOf<C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>;
                                                                              ~~~~~~~~~~~~~~~~~~~~~

    at addError (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:29)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:17:17
    at AngularWebpackPlugin.updateJitProgram (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:483:9)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:203:24
    at Hook.eval [as call] (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:19:1)
    at Hook.CALL_DELEGATE [as _call] (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1054:30)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:41:1)
    at eval (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:55:1)
Error: node_modules/@storybook/theming/dist/ts3.9/index.d.ts:112:143 - error TS2694: Namespace 'React' has no exported member 'ComponentPropsWithRef'.

112 export declare type PropsOf<C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>;
                                                                                                                                                  ~~~~~~~~~~~~~~~~~~~~~

    at addError (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:29)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:17:17
    at AngularWebpackPlugin.updateJitProgram (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:483:9)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:203:24
    at Hook.eval [as call] (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:19:1)
    at Hook.CALL_DELEGATE [as _call] (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1054:30)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:41:1)
    at eval (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:55:1)
Error: node_modules/@storybook/theming/dist/ts3.9/index.d.ts:113:54 - error TS2694: Namespace 'React' has no exported member 'ClassAttributes'.

113 export declare type ReactClassPropKeys = keyof React.ClassAttributes<any>;
                                                         ~~~~~~~~~~~~~~~

    at addError (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:29)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:17:17
    at AngularWebpackPlugin.updateJitProgram (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:483:9)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:203:24
    at Hook.eval [as call] (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:19:1)
    at Hook.CALL_DELEGATE [as _call] (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1054:30)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:41:1)
    at eval (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:55:1)
Error: node_modules/@storybook/theming/dist/ts3.9/index.d.ts:125:24 - error TS2694: Namespace 'React' has no exported member 'ComponentType'.

125     <Tag extends React.ComponentType<any>, ExtraProps = {}>(tag: Tag, options?: StyledOptions): CreateStyledComponentExtrinsic<Tag, ExtraProps, Theme>;
                           ~~~~~~~~~~~~~
    at addError (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:29)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:17:17
    at AngularWebpackPlugin.updateJitProgram (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:483:9)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:203:24
    at Hook.eval [as call] (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:19:1)
    at Hook.CALL_DELEGATE [as _call] (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1054:30)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:41:1)
    at eval (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:55:1)
Error: node_modules/@storybook/theming/dist/ts3.9/index.d.ts:162:37 - error TS2694: Namespace 'React' has no exported member 'ComponentType'.

162     withComponent<Tag extends React.ComponentType<any>>(tag: Tag): StyledComponent<PropsOf<Tag>, StyleProps, Theme>;
                                        ~~~~~~~~~~~~~

    at addError (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:31:29)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/diagnostics.js:17:17
    at AngularWebpackPlugin.updateJitProgram (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:483:9)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/@ngtools/webpack/src/ivy/plugin.js:203:24
    at Hook.eval [as call] (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:19:1)
    at Hook.CALL_DELEGATE [as _call] (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/Hook.js:14:14)
    at Compiler.newCompilation (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1054:30)
    at /home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/webpack/lib/Compiler.js:1099:29
    at _next0 (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:41:1)
    at eval (eval at create (/home/user/Downloads/testing-storybook/fullcalendar-example-projects/angular13/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:55:1)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

info => Loading presets
99% done plugins webpack-hot-middlewarewebpack built preview 91c9439121b2fbde3a2d in 1053ms
✖ Would you like to send crash reports to Storybook? … yes

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angular13@0.0.0 storybook: `npm run docs:json && start-storybook -p 6006`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the angular13@0.0.0 storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2022-09-20T15_44_45_270Z-debug.log
user@computer:~/Downloads/testing-storybook/fullcalendar-example-projects/angular13$

To Reproduce

You can reproduce the error by initializing Storybook in the FullCalendar sample repo, and I've copy/pasted the commands below. 

git clone https://github.com/fullcalendar/fullcalendar-example-projects.git
cd fullcalendar-example-projects/angular13
npm install
npx storybook init --type angular

I provided the reproduction this way because you can see that the repo both with and without Storybook, but I'm happy to provide a repo generated via npx storybook@next repro as well, please let me know if you'd like that as well.

System Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
  Binaries:
    Node: 14.19.3 - ~/.nvm/versions/node/v14.19.3/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v14.19.3/bin/yarn
    npm: 6.14.17 - ~/.nvm/versions/node/v14.19.3/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 105.0
  npmPackages:
    @storybook/addon-actions: ^6.5.12 => 6.5.12 
    @storybook/addon-essentials: ^6.5.12 => 6.5.12 
    @storybook/addon-interactions: ^6.5.12 => 6.5.12 
    @storybook/addon-links: ^6.5.12 => 6.5.12 
    @storybook/angular: ^6.5.12 => 6.5.12 
    @storybook/builder-webpack5: ^6.5.12 => 6.5.12 
    @storybook/manager-webpack5: ^6.5.12 => 6.5.12 
    @storybook/testing-library: 0.0.13 => 0.0.13

Additional context Add any other context about the problem here.

I posted about this in Discord as well, here is the link: https://discord.com/channels/486522875931656193/490770949910691862

user-aslkdflkc commented 1 year ago

Hi there,

No pressure, I know you guys are swamped with the v7 release. I just wanted to let you know that we we're here if you have any questions about this issue. We're very excited to use storybook for writing all of our angular components in our production system, but type errors like this keep coming up which prevent us from using it. We've been debugging for a little over a week, and don't have any ideas how to fix it, happy to work with you if you have ideas you'd like us to try.

DarwinOnLine commented 1 year ago

Same problem here. I have fullcalendar in my project, and exactly same errors.

DarwinOnLine commented 1 year ago

@user-aslkdflkc I found the cause to these errors. fullcalendar use Preact, and this React alternative framework exports its namespace as... React. So this namespace overrides the Storybook React namespace, and Preact has no members such as ReactElement or ComponentType...

A very (very) dirty hack to get the build OK is rename this export to React2 in node_modules/preact/compat/src/index.d.ts, but I don't know how override this export in the build elegantly...

Hope that helps

user-aslkdflkc commented 1 year ago

@DarwinOnLine , that's pretty cool that it has to do with fullcalendar's use of Preact. I'm afraid that I don't think we can use this (clever) technique --- I don't see a non-hacky way to do it in our production codebase.

DOrlov77 commented 1 year ago

my fix: storybook-type-errors-with-angular-project-and-fullcalendar-lib

valentinpalkovic commented 1 year ago

@user-aslkdflkc Is this still an issue in Storybook 7?

bastiW commented 11 months ago

Having this issue now with Angular 15, SB 7.4 and some custom storybook plugins.

This issue appeared after the upgrade from 7.3 to 7.4