storybook: [Bug]: Error: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.

Describe the bug

Added storybook to an existing project. Saw that https://github.com/storybookjs/storybook/issues/21284 and https://github.com/storybookjs/storybook/issues/20855 were closed with the release of v7.0.0-betas but I’m on v7.0.7 and still seeing this issue.

To Reproduce

not an official reproduction but the issue is present in this repo: https://github.com/fastenhealth/fasten-onprem/tree/storybook-update/frontend

System

Environment Info:

  System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 19.5.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.3.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 112.0.1
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-essentials: ^7.0.7 => 7.0.7 
    @storybook/addon-interactions: ^7.0.7 => 7.0.7 
    @storybook/addon-links: ^7.0.7 => 7.0.7 
    @storybook/angular: ^7.0.7 => 7.0.7 
    @storybook/blocks: ^7.0.7 => 7.0.7 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

Error: Providers from the `BrowserModule` have already been loaded. If you need access to common directives such as NgIf and NgFor, import the `CommonModule` instead.
  at BrowserModule_Factory (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:68442:10)
  at factory (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:45016:32)
  at hydrate (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:44934:29)
  at get (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:44835:23)
  at injectInjectorOnly (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:41147:29)
  at ɵɵinject (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:41151:59)
  at useValue (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:44630:33)
  at resolveInjectorInitializers (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:44875:9)
  at EnvironmentNgModuleRefAdapter (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:57646:14)
  at createEnvironmentInjector (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:57670:19)
  at getOrCreateStandaloneInjector (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:57697:57)
  at ɵɵStandaloneFeature/definition.getStandaloneInjector (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:57732:50)
  at create (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:50012:51)
  at bootstrap (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:63306:38)
  at internalCreateApplication/</< (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:62783:18)
  at ./node_modules/zone.js/dist/zone.js/</_ZoneDelegate</_ZoneDelegate.prototype.invoke (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115786:160)
  at onInvoke (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:62202:25)
  at ./node_modules/zone.js/dist/zone.js/</_ZoneDelegate</_ZoneDelegate.prototype.invoke (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115786:48)
  at ./node_modules/zone.js/dist/zone.js/</Zone</Zone.prototype.run (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115560:37)
  at scheduleResolveOrReject (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:116718:28)
  at ./node_modules/zone.js/dist/zone.js/</_ZoneDelegate</_ZoneDelegate.prototype.invokeTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115813:173)
  at onInvokeTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:62191:25)
  at ./node_modules/zone.js/dist/zone.js/</_ZoneDelegate</_ZoneDelegate.prototype.invokeTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115813:56)
  at ./node_modules/zone.js/dist/zone.js/</Zone</Zone.prototype.runTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115609:39)
  at drainMicroTaskQueue (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115994:25)
  at promise callback*nativeScheduleMicroTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115971:20)
  at scheduleMicroTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115981:32)
  at ./node_modules/zone.js/dist/zone.js/</_ZoneDelegate</_ZoneDelegate.prototype.scheduleTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115805:30)
  at ./node_modules/zone.js/dist/zone.js/</Zone</Zone.prototype.scheduleTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115648:37)
  at ./node_modules/zone.js/dist/zone.js/</Zone</Zone.prototype.scheduleMicroTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115667:21)
  at scheduleResolveOrReject (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:116708:12)
  at ./node_modules/zone.js/dist/zone.js/</ZoneAwarePromise</ZoneAwarePromise.prototype.then (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:116920:34)
  at asyncGeneratorStep (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:118775:28)
  at _next (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:118787:27)
  at _asyncToGenerator/< (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:118794:12)
  at ZoneAwarePromise (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:116739:23)
  at _asyncToGenerator (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:118783:12)
  at _renderToCanvas (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:73219:26)
  at renderToCanvas (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:73196:26)
  at render (/sb-preview/runtime.mjs:74:10937)
  at runPhase (/sb-preview/runtime.mjs:74:8770)
  at render (/sb-preview/runtime.mjs:74:10870)
  at async*renderToElement (/sb-preview/runtime.mjs:74:9427)
  at renderStoryToElement (/sb-preview/runtime.mjs:80:3837)
  at ./node_modules/ (storybook/blocks/dist/index.mjs/InlineStory/<@/vendors-node_modules_storybook_blocks_dist_index_mjs.iframe.bundle.js:810:39)
  at Rj (/vendors-node_modules_storybook_blocks_dist_index_mjs.iframe.bundle.js:34227:21)
  at Ik (/vendors-node_modules_storybook_blocks_dist_index_mjs.iframe.bundle.js:35493:21)
  at ./node_modules/react-dom/cjs/react-dom.production.min.js/Xk (/vendors-node_modules_storybook_blocks_dist_index_mjs.iframe.bundle.js:35360:5)
  at J (/vendors-node_modules_storybook_blocks_dist_index_mjs.iframe.bundle.js:36821:18)
  at R (/vendors-node_modules_storybook_blocks_dist_index_mjs.iframe.bundle.js:36852:11)
  at EventHandlerNonNull*./node_modules/scheduler/cjs/scheduler.production.min.js (/vendors-node_modules_storybook_blocks_dist_index_mjs.iframe.bundle.js:36864:3)
  at __webpack_require__ (/runtime~main.iframe.bundle.js:28:33)
  at fn (/runtime~main.iframe.bundle.js:340:25)
  at ./node_modules/scheduler/index.js (/vendors-node_modules_storybook_blocks_dist_index_mjs.iframe.bundle.js:36997:20)
  at __webpack_require__ (/runtime~main.iframe.bundle.js:28:33)
  at fn (/runtime~main.iframe.bundle.js:340:25)
  at ./node_modules/react-dom/cjs/react-dom.production.min.js (/vendors-node_modules_storybook_blocks_dist_index_mjs.iframe.bundle.js:29187:27)
  at __webpack_require__ (/runtime~main.iframe.bundle.js:28:33)
  at fn (/runtime~main.iframe.bundle.js:340:25)
  at ./node_modules/react-dom/index.js (/vendors-node_modules_storybook_blocks_dist_index_mjs.iframe.bundle.js:36341:20)
  at __webpack_require__ (/runtime~main.iframe.bundle.js:28:33)
  at fn (/runtime~main.iframe.bundle.js:340:25)
  at ./node_modules/react-dom/client.js (/node_modules_storybook_addon-docs_dist_DocsRenderer-7FRJXR4N_mjs.iframe.bundle.js:174:28)
  at __webpack_require__ (/runtime~main.iframe.bundle.js:28:33)
  at fn (/runtime~main.iframe.bundle.js:340:25)
  at ./node_modules/ (storybook/react-dom-shim/dist/react-18.mjs@/node_modules_storybook_addon-docs_dist_DocsRenderer-7FRJXR4N_mjs.iframe.bundle.js:122:93)
  at __webpack_require__ (/runtime~main.iframe.bundle.js:28:33)
  at fn (/runtime~main.iframe.bundle.js:340:25)
  at ./node_modules/ (storybook/addon-docs/dist/chunk-PCJTTTQV.mjs@/node_modules_storybook_addon-docs_dist_DocsRenderer-7FRJXR4N_mjs.iframe.bundle.js:36:102)
  at __webpack_require__ (/runtime~main.iframe.bundle.js:28:33)
  at fn (/runtime~main.iframe.bundle.js:340:25)
  at ./node_modules/ (storybook/addon-docs/dist/DocsRenderer-7FRJXR4N.mjs@/node_modules_storybook_addon-docs_dist_DocsRenderer-7FRJXR4N_mjs.iframe.bundle.js:15:96)
  at __webpack_require__ (/runtime~main.iframe.bundle.js:28:33)
  at fn (/runtime~main.iframe.bundle.js:340:25)
  at ./node_modules/zone.js/dist/zone.js/</_ZoneDelegate</_ZoneDelegate.prototype.invoke (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115786:160)
  at ./node_modules/zone.js/dist/zone.js/</Zone</Zone.prototype.run (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115560:37)
  at scheduleResolveOrReject (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:116718:28)
  at ./node_modules/zone.js/dist/zone.js/</_ZoneDelegate</_ZoneDelegate.prototype.invokeTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115813:173)
  at ./node_modules/zone.js/dist/zone.js/</Zone</Zone.prototype.runTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115609:39)
  at drainMicroTaskQueue (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115994:25)
  at promise callback*nativeScheduleMicroTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115971:20)
  at scheduleMicroTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115981:32)
  at ./node_modules/zone.js/dist/zone.js/</_ZoneDelegate</_ZoneDelegate.prototype.scheduleTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115805:30)
  at ./node_modules/zone.js/dist/zone.js/</Zone</Zone.prototype.scheduleTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115648:37)
  at ./node_modules/zone.js/dist/zone.js/</Zone</Zone.prototype.scheduleMicroTask (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:115667:21)
  at scheduleResolveOrReject (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:116708:12)
  at resolvePromise (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:116649:36)
  at makeResolver (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:116567:25)
  at wrapper (/vendors-node_modules_angular_localize_fesm2020_init_mjs-node_modules_storybook_addon-docs_ang-199ab6.iframe.bundle.js:116583:27)
  at webpackJsonpCallback (/runtime~main.iframe.bundle.js:1251:42)
  at /vendors-node_modules_storybook_blocks_dist_index_mjs.iframe.bundle.js:1:65

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 4
  • Comments: 26 (9 by maintainers)

Most upvoted comments

provide the BrowserAnimationsModule into decorators worked for us

 export default {
  title: 'TestComponent',
  component: TestComponent,
  decorators: [
    moduleMetadata({
      imports: [CheckboxModule, TestModule],
    }),
    applicationConfig({
      providers: [importProvidersFrom(BrowserAnimationsModule)],
    }),
  ],
  
  ....
+8
miminerd on Jun 30, 2023

Also running into this.

+4
yharaskrik on May 2, 2023

Hi!! After a lot of research, I found the final solution for my problem! Here is the link to the stackoverflow, absolute hero 😍 https://stackoverflow.com/questions/72504142/how-to-add-browseranimationsmodule-or-noopanimationsmodule-to-standalone-compone

+2
jaelzamora on Jan 31, 2024

@yharaskrik Please open another GitHub Issue for your issue to handle it separately and let me know about it.

@valentinpalkovic here you go

https://github.com/storybookjs/storybook/issues/22352

+1
yharaskrik on May 2, 2023

@AnalogJ My wild guess is that BrowserModule is used in one SharedModule, which is also used within Storybook, because the SharedModule is used by some components. As stated here, BrowserModule should only be imported in the root AppModule. In Storybook, you don’t have to import it at all, because it is imported by default. But let me take a deeper look at your shared repository and let me figure out, whether I can reproduce it.

+1
valentinpalkovic on May 2, 2023

@yharaskrik FYI, I was able to kind-of work around this issue by converting my components to standalone components

+1
AnalogJ on May 2, 2023
Read more comments on GitHub
← storybook: [Bug]: Error installing storybook in monorepo
storybook: [Bug]: Failed to load preset: "@storybook/**/preset" →