[6.2.0-beta.1] Angular example stories throw "Unhandled Promise rejection: Type ButtonComponent is part of the declarations of 2 modules: StorybookModule and StorybookModule!"

[michelepatrassi]

Describe the bug
Switching the examples stories (like the ButtonComponent) throws an error in the console and the component is not rendered at all. Works the first time, but as soon as you go to the same component stories is gonna throw this

Unhandled Promise rejection: Type ButtonComponent is part of the declarations of 2 modules: StorybookModule and StorybookModule! Please consider moving ButtonComponent to a higher module that imports StorybookModule and StorybookModule. You can also create a new NgModule that exports and includes ButtonComponent then import that NgModule in StorybookModule and StorybookModule. ; Zone: <root> ; Task: Promise.then ; Value: Error: Type ButtonComponent is part of the declarations of 2 modules: StorybookModule and StorybookModule! Please consider moving ButtonComponent to a higher module that imports StorybookModule and StorybookModule. You can also create a new NgModule that exports and includes ButtonComponent then import that NgModule in StorybookModule and StorybookModule.
    at verifySemanticsOfNgModuleDef (core.umd.js:27446)
    at Function.get (core.umd.js:27384)
    at getInjectorDef (core.umd.js:365)
    at R3Injector.push../node_modules/@angular/core/bundles/core.umd.js.R3Injector.processInjectorType (core.umd.js:11537)
    at core.umd.js:11401
    at core.umd.js:4380
    at Array.forEach (<anonymous>)
    at deepForEach (core.umd.js:4380)
    at new R3Injector (core.umd.js:11401)
    at createInjectorWithoutInjectorInstances (core.umd.js:11373) 

To Reproduce
Steps to reproduce the behavior:

1. install 6.2.0-beta.1 (currently just npx sb upgrade --prerelease)
2. Open the console
3. Click on the button primary story
4. Click on the button secondary story
5. See error in console and component does not show

Expected behavior
No errors are thrown and component can render in every story

Screenshots
If applicable, add screenshots to help explain your problem.

System

Environment Info:

  System:
    OS: macOS 11.3
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
  Binaries:
    Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.11.3 - ~/.nvm/versions/node/v12.11.1/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Firefox: 81.0.2
    Safari: 14.1
  npmPackages:
    @storybook/addon-actions: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/addon-essentials: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/addon-links: ^6.2.0-beta.1 => 6.2.0-beta.1 
    @storybook/angular: ^6.2.0-beta.1 => 6.2.0-beta.1 

Additional context
My main goal was to get this change in #10272 (comment) so I could manage the component ng-content. Also tried to install 6.2.0-alpha.13 directly but can see this issue there as well (plus the UI is flickering, but that seems fixed in later versions)

[snutij]

hi ✌️ , I tried on a fresh install

ng new project
npx sb init
npx sb upgrade --prerelease

The problem also occurs on version 6.2.0-beta.5.

System:
    OS: Linux 4.15 Ubuntu 18.04.5 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Firefox: 86.0
  npmPackages:
    @storybook/addon-actions: ^6.2.0-beta.5 => 6.2.0-beta.5 
    @storybook/addon-essentials: ^6.2.0-beta.5 => 6.2.0-beta.5 
    @storybook/addon-links: ^6.2.0-beta.5 => 6.2.0-beta.5 
    @storybook/angular: ^6.2.0-beta.5 => 6.2.0-beta.5 

[Rush]

I have the same issue. Any ideas or suggestions?

│   Storybook 6.2.0-beta.14 started                  │

[Rush]

I just tested with 6.2.0-rc1 and the issue seems to be fixed!

[Rush]

Seems my message was premature. :) It's still occurring but I need to figure out exactly what triggers it because for a few minutes it was working well,

[ghost]

I am also having this issue, trying to investigate it...

[Rush]

I am also having this issue, trying to investigate it...

let me know if you figure something out. I am desperately looking for a workaround

[snutij]

I just had the problem again, on 6.2.0-beta.1

rm -rf node_modules
rm -rf build
npm cache clean --force
npm ci
start-storybook -p 6006 // your command to serve SB

Its works.
I don't know which command solves the problem and why, but it might be a workaround for you.

[ghost]

@snutij Can confirm the sorcery.

[TheColorRed]

@snutij running npm ci is what fixed it for me ("@storybook/angular": "^6.1.21").

I was only receiving this message when I saved modules/components/directives/etc.

I found --no-manager-cache. Not sure, but maybe there is a caching issue. I have not tried.

[mangei]

this is still a blocking issue for me with the latest version (6.2.8 and also 6.3.0-alpha.10).

I tried the approach/workaround from @snutij, but with no effect.

[dexster]

I have one project where this happens when I don't use @NgModule for the component. To get around it I just added an NgModule with the component declaration and then added the module to the default story export in moduleMetadata.

In a standard storybook install this doesn't happen so I'm trying to find out how to recreate it properly so we can hopefully get this fixed

[tuuling]

I spent a good part of 2 days on this. I don't know why, but the problem seems to be when a story has a module metadata decorator that has declarations:

decorators: [
    moduleMetadata({
       declarations: [MyComponent]
    })
  ]

The solution I found to this was to create a module that declares and exports this component.

@NgModule({
  declarations: [
    MyComponent
  ],
  exports: [
    MyComponent
  ]
})
export class MyModule
...
decorators: [
    moduleMetadata({
       declarations: [MyModule]
    })
  ]

[MartinJHammer]

@snutij Solution worked.

But what I'm even more stoked about is npm ci - didn't know that existed. DAMN it's fast.

[mangei]

I could now reproduce the bug. It is because of ngcc.

1. setup a new angular project (11.2.11):
   ng new storybook-test
2. include storybook (6.2.9):
   npx sb init within the new project
3. add "postinstall": "ngcc" in package.json

Navigating to a story once works... if you go again to the same story, it breaks.

Repo to check: https://github.com/mangei/storybook-ngcc-bug

I did not find a solution yet, how to fix that...

[ValentinFunk]

Getting this as well (6.2.9), in an addon-docs setup with MDX, e.g.

<Meta
	title="Detail Cards/Vessel Card"
	decorators={[withKnobs, moduleMetadata({ imports: [DecanterUiModule, DetailsCardsModule, CommonModule], declarations: [] })]}
/>

<Canvas>
	<Story name="Empty Vessels">
             {{
                 template: `<some-component></some-component>`
             }}
        </Story>
</Canvas>

When changing SomeComponent the error will appear with a whole lot of duplicates. Might be an issue with HMR in this scenario, however this worked in previous angular/storybook versions.

[ORIGINALUSRNM]

Just did a clean install and this is still happening with the example stories. I didn't even have to write a single line of code myself for the error to throw. I did, however have to click on the Example button story twice. I first viewed the Primary example and then when I clicked on the Secondary example the error occurred.

This is happening on the official release version 6.2.9 for me, not BETA. Still using node 12.10.0 and npm 6.10.3

[davicoradini]

Happend to me once I updated to @storybook/angular from 6.2.8 to 6.2.9, but because I use nx.dev and I ran its migration tool, it also updated @angular/core from 11.0.0 to 11.2.0 (among other things).

Downgrading @storybook/angular to 6.2.8 didn't work, so I thought, it's gotta be @angular, so:

I stepped back with nx migration and used @angular/core 11.0.0 + updated to @storybook/angular 6.2.9, guess what? worked! (did it twice, removing node_modules folder)

_I didn't try the @NgModule export thing just yet, I'm gonna _

[tuuling]

My guess it has something to do with angular decorating things in node_modules to be Ivy compatible, essentially rewriting some stuff in node_modules. By reinstalling node_modules you essentially remove what angular has done and storybook works as expected - for a while at least. I think that this works until you build with angular tools again, at witch point it redecorates and you get the same error.

[davicoradini]

I'm wondering if the way we create our stories is right:

//  poc-grid-actions.stories.ts
import { moduleMetadata, Story } from "@storybook/angular";
import { Meta } from "@storybook/angular/types-6-0";
import { PocGridActionsComponent } from "./poc-grid-actions.component";

export default {
    title: "POC/Grid/POC Actions",
    component: PocGridActionsComponent,
    decorators: [
        moduleMetadata({
            declarations: [PocGridActionsComponent],
        }),
    ],
} as Meta;

export const liveSample: Story<PocGridActionsComponent> = args => ({ props: args });

//  poc-grid-actions.component.ts
import { Component } from "@angular/core";

@Component({
    selector: "my-grid",
    template: "<div>test</div>",
    styles: [""],
})
export class PocGridActionsComponent {}

Problem when
@angular/core: 11.2.0
@storybook/angular: 6.2.8

No problem when
@angular/core: 11.0.0
@storybook/angular: 6.2.8

No problem when
@angular/core: 11.0.0
@storybook/angular: 6.2.9

[Jesse1989pp]

The issue was inside ngcc for me, not running that resolves the issue. Possibly also why npm ci worked for some people as a work around. My guess is that the postinstall, including ngcc, wasn't triggered.

Seems to be added in 6.3.0-alpha.11.. 6.3.0-alpha.19 is working fine to me.

[ronaldohoch]

Face this issue too.

It was solved using npx sb upgrade --prerelease, the snutij's solution.

[haoolii]

use npx sb upgrade --prerelease can solved this error, Angular use in other library is so hard haha.

[stones]

ngx sb upgrade --prerelease didn't work for me, importing the module did.

export default {
  title: 'Components/Spinner Dots',
  component: SpinnerDotsComponent,
  decorators: [
    moduleMetadata({ imports: [ SpinnerDotsModule ] })
  ],
} as Meta;

edit: I included the whole code block, as the 3 lines didn't provide any context

[KirillMetrik]

I confirm what @davicoradini said, the problem is in ngcc. Eliminating postinstall ngcc fixes the issue.

[roblevintennis]

I implemented what @tuuling mentioned using a specific module for the component I wanted to use 2+ times. Fwiw, this was using the latest nx storybook projects setup. Here's what worked for me:

// Created module ButtonModule
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ButtonComponent } from './button.component';

@NgModule({
  imports: [CommonModule],
  declarations:[ButtonComponent],
  exports:[ButtonComponent]
})

export class ButtonModule {}

And then was able to reuse this across various buttons like:

// Default button
import { text } from '@storybook/addon-knobs';
import { ButtonModule } from './button.module';
import { ButtonComponent } from './button.component';

export default {
  title: 'Default Button',
};

export const DefaultButton = () => ({
  moduleMetadata: {
    imports: [ButtonModule]
  },
  component: ButtonComponent,
  props: {
    label: text('label', 'Default Button'),
    css: text('css', 'btn')
  }
});

// Primary button

import { text } from '@storybook/addon-knobs';
import { ButtonModule } from './button.module';
import { ButtonComponent } from './button.component';

export default {
  title: 'Primary Button',
};

export const PrimaryButton = () => ({
  moduleMetadata: {
    imports: [ButtonModule]
  },
  component: ButtonComponent,
  props: {
    label: text('label', 'Primary Button'),
    css: text('css', 'btn btn-primary')
  }
});

...and so on. I'm an angular noob, but I wanted to figure out how to get it working this way as I suspect the error is legitimate in how Angular wants you to do things using ngmodules. So maybe this isn't really a bug ¯_(ツ)_/¯?

UPDATE: I hit this again recently and it was due to forgetting to export the component from a shared module fwiw — also a usage error I think.

[dexster]

You need to add the --create-ivy-entry-points option when running ngcc. Angular CLI does this automatically but I assume that most people above are either using Nx which does a postinstall and runs ngcc or you are running it manually for some other reason.

If you're using Nx just modify postinstall in your package.json to this below then delete your node_modules dir and do an npm install.

"postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main --create-ivy-entry-points",

[KirillMetrik]

@dexster for me it's vice versa. In my NX environment I've removed postinstall ngcc call and Storybook started to work properly. But with ngcc as part of postinstall it doesn't work.

[dexster]

@KirillMetrik We're saying the same thing. ngcc does not work by default in NX. Instead of removing the postinstall you can just add --create-ivy-entry-points which should make both nx and storybook happy

[vprothais]

Thank you @dexster for the tip. Storybook works well with --create-ivy-entry-points in my Nx repo. But it makes some Jest unit tests to fail.
It seems to have problems with the fixture or the declarations of some directives. Did you notice the same thing ?

[kbrilla]

I have found the issue:
/// button.module.ts

@NgModule({
  declarations: [ButtonComponent],
  imports: [CommonModule],
  exports: [ButtonComponent],
})
export class ButtonModule {}

export default {
  title: 'Components/Core/Button',
  component: ButtonComponent,
  decorators: [
    moduleMetadata({
      declarations: [],
      imports: [ButtonModule],
    }),
  ],
} as Meta;

const Overview: Story<ButtonComponent> = (args) => ({
  props: args,
  template: `
<button loButton [variant]="variant" [size]="size" type="button" >
Button
</button>
</div>
`,
});

the problems lies here:

component: ButtonComponent, //under the hood storybook declares ButtonComponent
...
   imports: [ButtonModule], //which export declared ButtonComponent
...

when we have import that exports and component and we want to use component: ButtonComponent as per documentation we under the hood also declare twice the ButtonComponent.

So component: ButtonComponent should NOT declare the component, for that in case we don't import it from module we should use declarations: [ButtonComponent].

In short, storybook should not declare components passed to component field or at least declare them only if not already declared

//checked at storybook 6.3.4

[tzuge]

I hit this among a bunch of other issues while trying to upgrade dependencies on a monorepo of UI components. A separate, apparently distinct, issue was related to i18n, and after adding import of @angular/localize/init in preview.js, this 'declaration of 2 modules' issue went away as well 🤷

All I did was add @angular/localize as a dev dependency, then add the following to preview.js:

import '@angular/localize/init';

If I simply comment out the import, the issue comes back.

This angular storybook previously worked fine without this (angular 11.2.6, storybook 6.1.21), but requires it post upgrade (angular 12.2.13, storybook 6.3.12). Note even the original version was already after angular introduced this i18n stuff.

[fasidOnGit]

removing the following from .storybook/preview.js fixes the issue

export const parameters = {
  angularLegacyRendering: true,
};

[activenode]

So in our case this was "fixed" by using a consolidating module that gets imported over the component import in delcarations

[sir-captainmorgan21]

@activenode no. I get the error either way. I think it has to do with the stories also being rendered in MDX.

[sir-captainmorgan21]

As soon as I go and comment out all the stories being referenced in the MDX docs, there error goes away.

[ArturQuirino]

I'm still facing the same error here. (Storybook at version 6.5.9). When I write the stories using MDX, there is this error of the declaration of 2 modules.

When I write the "same" stories using CSF, the error does not happen. :(

I tried all the previous possible solutions, and none worked.

[arbocurt]

I'm getting roughly the same error. To be honest, I can't even figure out where all of these Components in the "stories" directory are even being put in a Module at all.

[ArturQuirino]

What worked for me was setting the docs: { inlineStories: false }, on the preview.js file, starting using the iFrame solution. This way I stopped getting the 2 modules error.

[gdhog79]

.

[JonathanLefebvreV]

I just upgraded Storybook from 6.3.12 to 6.5.10 and I got the error. Thank you @ArturQuirino! Your workaround work for me as well.

[AndyKIron]

@ArturQuirino

What worked for me was setting the docs: { inlineStories: false }, on the preview.js file, starting using the iFrame solution. This way I stopped getting the 2 modules error.

It works for me. But maybe you know how to Remove scrollbar from iFrame without story height changes?

[andykono]

I tried iFrame solution with docs: { inlineStories: false } storybook v6.5.12. But it has performance issues that make this solution unusable :(
Any other solutions? Is this error exist in storybook v7?

[ndelangen]

@michelepatrassi does this issue still exist in 7.0 beta?

@andykono in 7.0 beta inline rendering has been overhauled, and iframe-rendering discouraged.

[valentinpalkovic]

This PR fixes the issue: #20559

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.30 containing PR #20559 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.