storybook: [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!"

@snutij Can confirm the sorcery.

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]
    })
  ]

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.

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

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",

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.

Face this issue too.

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

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.

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.

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

export const parameters = {
  angularLegacyRendering: true,
};

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

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 _

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…

@snutij Solution worked.

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

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.

This PR fixes the issue: https://github.com/storybookjs/storybook/pull/20559

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.

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

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