[Bug]: Type "MyComponent" is part of the declarations of 2 modules: StorybookComponentModule and StorybookComponentModule

[DB-CL]

Describe the bug

I have two libraries : Library A and Library B. The libraries are two totally different projects. Library A is included in Library B via npm install @myscope/libraryA

In Library A, I declare Component A in module A.
In Library B, I declare Component B in module B.
The component B is using Component A with something similar to <div lib-component-A [model]="..." ></div>.

The ModuleB imports ModuleA like so :

@NgModule({
  declarations: [
    ComponentB
  ],
  imports: [BrowserModule, CommonModule, ModuleA],
  exports: [ComponentB],
})
export class ModuleB {}

Note : the component A is using attribute selector like a directive : selector: '[lib-component-A]'. But I don't think it matters.

My story is configured that way :

const meta: Meta<ComponentB> = {
  title: 'Library/ComponentB',
  component: ComponentB,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  decorators: [
    moduleMetadata({
      declarations: [
        ComponentB,
      ],
      imports: [CommonModule, ModuleA],
    }),
  ],
};

And the error I have is the following : Type ComponentB is part of the declarations of 2 modules: StorybookComponentModule and StorybookComponentModule! Please consider moving ComponentB to a higher module that imports StorybookComponentModule and StorybookComponentModule. You can also create a new NgModule that exports and includes ComponentB then import that NgModule in StorybookComponentModule and StorybookComponentModule.

I don't understand. ModuleA has nothing to do with ComponentB. Importing ModuleA should not trigger a double declaration for ComponentB

I've tried to play with the imports and the declarations, and when I remove the ModuleA import, I have the very classical runtime error : Can't bind to 'model' since it isn't a known property of 'div'. This error often indicates that the ComponentA is not recognized because the module is not properly imported.

I've found this old error : #14026 or this one #19289

But both should have been resolved with 7.0, and I'm running Storybook v 7.1.1 with angular 15.2

Am I doing something wrong or is this a bug in storybook ? If so, does anyone know a workaround ?

To Reproduce

I've added a minimal reproduction repository here : https://github.com/DB-CL/bug-storybook/
The instructions to reproduce are in the readme

System

Environment Info:

  System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 115.0.5790.110
  npmPackages:
    @storybook/addon-essentials: ^7.1.1 => 7.1.1 
    @storybook/addon-interactions: ^7.1.1 => 7.1.1 
    @storybook/addon-links: ^7.1.1 => 7.1.1 
    @storybook/angular: ^7.1.1 => 7.1.1 
    @storybook/blocks: ^7.1.1 => 7.1.1 
    @storybook/testing-library: ^0.2.0 => 0.2.0 

Additional context

Since my modules are not using any services, I didn't use applicationConfig
But I tried it anyway : I pretented my LibraryA provided a service and I did something like :

const meta: Meta<ComponentBComponent> = {
  title: 'Example/ComponentBComponent',
  component: ComponentBComponent,
  tags: ['autodocs'],
  decorators: [
    applicationConfig({
      providers: [importProvidersFrom(LibraryAModule)],
    }),
    moduleMetadata({
      declarations: [ComponentBComponent],
      imports: [CommonModule, LibraryAModule],
    }),
  ],
};

Just to see if there was any difference. And it behave the same way with the same error.

[DB-CL]

Ok, I found the problem I think.

First, the real error message is not [Bug]: Type "MyComponent" is part of the declarations of 2 modules: StorybookComponentModule and StorybookComponentModule, it's actually Error: Cannot read properties of null (reading 'bindingStartIndex')

I missed that because the first page Storybook loads is the Documentation, and I immediately click on my first component when the doc is loaded. This click fires the "2 modules" error, I don't know why (and this is very misleading).

When I reload the page with F5 when I'm on a component directly, I have the blindingStartIndex error.

After a few searches on Google, I found that linking the library with npm link was causing this. Even with the preserveSymlinks in the JSON configuration of angular.

So in the end I think this bug is related to : #17601

Storybook seems to not support the local linking of libraries, because it seems there is no way to pass the preserveSymlinks boolean to the builder.

[valentinpalkovic]

Hi @DB-CL,

Thank you for the investigations! So this issue can be closed?

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.