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

Tallyb · 2023-01-31T11:52:47Z

Describe the bug

Upgrading from 7.0.0-beta.29 to beta.30 results this error.
the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead.
We do not load browserModule in our configuration at all.
This is likely a result of #20559

To Reproduce

Private repo. The storybook build exists on chromatic and can be provided, if needed.

System

System:
    OS: macOS 13.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 18.13.0 - ~/.nvm/versions/node/v18.13.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.24.2 - node_modules/.bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 104.0.2
    Safari: 16.2
  npmPackages:
    @storybook/addon-actions: 7.0.0-beta.30 => 7.0.0-beta.30
    @storybook/addon-docs: 7.0.0-beta.30 => 7.0.0-beta.30
    @storybook/addon-essentials: 7.0.0-beta.30 => 7.0.0-beta.30
    @storybook/addon-interactions: 7.0.0-beta.30 => 7.0.0-beta.30
    @storybook/addon-knobs: 6.4.0 => 6.4.0
    @storybook/addon-links: 7.0.0-beta.30 => 7.0.0-beta.30
    @storybook/addon-viewport: 7.0.0-beta.30 => 7.0.0-beta.30
    @storybook/addons: 7.0.0-beta.30 => 7.0.0-beta.30
    @storybook/angular: 7.0.0-beta.30 => 7.0.0-beta.30
    @storybook/builder-webpack5: 7.0.0-beta.30 => 7.0.0-beta.30
    @storybook/cli: 7.0.0-beta.30 => 7.0.0-beta.30
    @storybook/html-webpack5: 7.0.0-beta.30 => 7.0.0-beta.30
    @storybook/preset-scss: 1.0.3 => 1.0.3
    @storybook/theming: 7.0.0-beta.30 => 7.0.0-beta.30

Additional context

We have worked with angualr.json configuration for storybook prior to this version.

The text was updated successfully, but these errors were encountered:

valentinpalkovic · 2023-01-31T16:52:32Z

Hey @Tallyb,

Could you try the latest beta once again? (v7.0.0-beta.38)

In v7.0.0-beta.33 I have fixed an issue related to BrowserModule, which might fix your problem.

ghaiat · 2023-01-31T22:27:10Z

same with 38

valentinpalkovic · 2023-02-01T08:40:12Z

I will provide a hotfix where BrowserModule is simply filtered out from imports, even if it is provided somewhere deeply nested. This is the only solution I have in mind currently.

Background:

We changed the way how components are mounted to the DOM. We use a Standalone component, which is mounted via bootstrapApplication API to the DOM. Note that the BrowserModule providers are automatically included when starting an application with bootstrapApplication().

Tallyb · 2023-02-01T08:57:18Z

We use a wrapper component to the components loaded which is also a standalone component. Could that be the issue? (although it does not really make sense)

@Component({
  selector: 'storybook-root',
  templateUrl: './storybook-root.component.html',
  styleUrls: ['./storybook-root.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  standalone: true,
  imports: [TranslateModule]
})

valentinpalkovic · 2023-02-01T09:05:35Z

@Tallyb Which Angular version do you have in place?

valentinpalkovic · 2023-02-01T09:13:26Z

@Tallyb Could you provide me with the chromatic build? You can also ping me on Discord (vatcoop#9122) if you want

Tallyb · 2023-02-01T09:26:12Z

@valentinpalkovic - sorry, cannot find you on discord. Can you try and ping me (Tally#5648)

shilman · 2023-02-03T13:33:47Z

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.41 containing PR #20868 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

ghaiat · 2023-02-03T14:13:42Z

hey, this is not fixed, when trying 41 i have this error now :
(node:48724) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use node --trace-warnings ... to show where the warning was created)
ERR! TypeError: Converting circular structure to JSON
ERR! --> starting at object with constructor 'Array'
ERR! | index 0 -> object with constructor 'Object'
ERR! | property 'loc' -> object with constructor 'SourceLocation'
ERR! --- property 'tokens' closes the circle
ERR! at JSON.stringify ()
ERR! at enter (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:74:5850)
ERR! at NodePath._call (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:26692)
ERR! at NodePath.call (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:26514)
ERR! at NodePath.visit (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:27650)
ERR! at TraversalContext.visitQueue (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:61144)
ERR! at TraversalContext.visitMultiple (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:60699)
ERR! at TraversalContext.visit (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:61434)
ERR! at traverseNode (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:62041)
ERR! at NodePath.visit (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:27819)
ERR! TypeError: Converting circular structure to JSON
ERR! --> starting at object with constructor 'Array'
ERR! | index 0 -> object with constructor 'Object'
ERR! | property 'loc' -> object with constructor 'SourceLocation'
ERR! --- property 'tokens' closes the circle
ERR! at JSON.stringify ()
ERR! at enter (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:74:5850)
ERR! at NodePath._call (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:26692)
ERR! at NodePath.call (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:26514)
ERR! at NodePath.visit (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:27650)
ERR! at TraversalContext.visitQueue (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:61144)
ERR! at TraversalContext.visitMultiple (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:60699)
ERR! at TraversalContext.visit (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:61434)
ERR! at traverseNode (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:62041)
ERR! at NodePath.visit (/Users/gilleshaiat/Documents/Development/yoobic-ng-6-calenda/node_modules/@storybook/csf-tools/dist/index.js:58:27819)

valentinpalkovic · 2023-02-03T14:40:05Z

@ghaiat Please open a new issue; it does not seem related to the original one.

Tallyb · 2023-02-05T17:05:06Z

@valentinpalkovic - #20940
The issue happened as error on js files (require, module.exports) but warns when using mjs or ts file.
Repro provided in the issue.

AymaneK24 · 2024-07-15T21:57:12Z

i have the probleme also i'm workin in angular 18 and it says this , and when i check everything is good

NG05100: 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 (C:\Users\mj\Desktop\Gestion-Budgétaire-Project\projet.angular\cache\18.1.0\vite\deps_ssr\chunk-FA2YTCK3.js:1136:13)
at Object.BrowserModule_Factory (C:\Users\mj\Desktop\Gestion-Budgétaire-Project\projet.angular\cache\18.1.0\vite\deps_ssr\chunk-FA2YTCK3.js:1160:10)
at Object.factory (C:\Users\mj\Desktop\Gestion-Budgétaire-Project\projet.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:14930:32)
at eval (C:\Users\mj\Desktop\Gestion-Budgétaire-Project\projet.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:14851:35)
at runInInjectorProfilerContext (C:\Users\mj\Desktop\Gestion-Budgétaire-Project\projet.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:13453:5)
at R3Injector.hydrate (C:\Users\mj\Desktop\Gestion-Budgétaire-Project\projet.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:14850:11)
at R3Injector.get (C:\Users\mj\Desktop\Gestion-Budgétaire-Project\projet.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:14740:23)
at injectInjectorOnly (C:\Users\mj\Desktop\Gestion-Budgétaire-Project\projet.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:13585:36)
at ɵɵinject (C:\Users\mj\Desktop\Gestion-Budgétaire-Project\projet.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:13591:59)
at useValue (C:\Users\mj\Desktop\Gestion-Budgétaire-Project\projet.angular\cache\18.1.0\vite\deps_ssr\chunk-KKSCXERX.js:14561:25

valentinpalkovic · 2024-07-16T04:16:55Z

@AymaneK24 Can you provide a minimal reproduction? https://storybook.new

Tallyb added bug needs triage labels Jan 31, 2023

valentinpalkovic added the angular label Jan 31, 2023

valentinpalkovic self-assigned this Jan 31, 2023

valentinpalkovic mentioned this issue Feb 1, 2023

Support NoopAnimationsModule #20868

Merged

5 tasks

sheriffMoose closed this as completed in #20868 Feb 3, 2023

AnalogJ mentioned this issue Apr 30, 2023

[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. #22323

Closed

VictorienTardif mentioned this issue Jun 2, 2023

[Bug]: Either Storybook 6 must work with Angular 16 or Storybook 7 must work with non-standalone components #22888

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Tallyb commented Jan 31, 2023

valentinpalkovic commented Jan 31, 2023

ghaiat commented Jan 31, 2023

valentinpalkovic commented Feb 1, 2023 •

edited

Loading

Tallyb commented Feb 1, 2023

valentinpalkovic commented Feb 1, 2023

valentinpalkovic commented Feb 1, 2023 •

edited

Loading

Tallyb commented Feb 1, 2023

shilman commented Feb 3, 2023

ghaiat commented Feb 3, 2023

valentinpalkovic commented Feb 3, 2023

Tallyb commented Feb 5, 2023

AymaneK24 commented Jul 15, 2024

valentinpalkovic commented Jul 16, 2024

[Bug]: the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead. #20855

[Bug]: the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead. #20855

Comments

Tallyb commented Jan 31, 2023

Describe the bug

To Reproduce

System

Additional context

valentinpalkovic commented Jan 31, 2023

ghaiat commented Jan 31, 2023

valentinpalkovic commented Feb 1, 2023 • edited Loading

Tallyb commented Feb 1, 2023

valentinpalkovic commented Feb 1, 2023

valentinpalkovic commented Feb 1, 2023 • edited Loading

Tallyb commented Feb 1, 2023

shilman commented Feb 3, 2023

ghaiat commented Feb 3, 2023

valentinpalkovic commented Feb 3, 2023

Tallyb commented Feb 5, 2023

AymaneK24 commented Jul 15, 2024

valentinpalkovic commented Jul 16, 2024

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

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

valentinpalkovic commented Feb 1, 2023 •

edited

Loading

valentinpalkovic commented Feb 1, 2023 •

edited

Loading