Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When using TippyModule.forRoot().providers inside storybook component I get this error: Converting circular structure to JSON starting at object with constructor 'InjectionToken' #56

Closed
manyx opened this issue Jul 2, 2021 · 1 comment

Comments

@manyx
Copy link

manyx commented Jul 2, 2021

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I am using storybook 6.3.2 and I have a component that uses TippyModule. When I add the providers to that component story I get the error I mentioned:

decorators: [ moduleMetadata({ imports: [TooltipModule, TippyModule], providers: TippyModule.forRoot().providers || [] }) ],

and this is the error:
Converting circular structure to JSON --> starting at object with constructor 'InjectionToken' | property 'ɵprov' -> object with constructor 'Object' --- property 'token' closes the circle TypeError: Converting circular structure to JSON --> starting at object with constructor 'InjectionToken' | property 'ɵprov' -> object with constructor 'Object' --- property 'token' closes the circle at JSON.stringify (<anonymous>) at CanvasRenderer.push../node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.js.AbstractRenderer.fullRendererRequired (http://localhost:6006/vendors~main.iframe.bundle.js:117109:42) at CanvasRenderer.<anonymous> (http://localhost:6006/vendors~main.iframe.bundle.js:117069:35) at step (http://localhost:6006/vendors~main.iframe.bundle.js:117001:23) at Object.next (http://localhost:6006/vendors~main.iframe.bundle.js:116982:53) at http://localhost:6006/vendors~main.iframe.bundle.js:116976:71 at new ZoneAwarePromise (http://localhost:6006/vendors~main.iframe.bundle.js:300092:33) at push../node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.js.__awaiter (http://localhost:6006/vendors~main.iframe.bundle.js:116972:12) at CanvasRenderer.push../node_modules/@storybook/angular/dist/ts3.9/client/preview/angular-beta/AbstractRenderer.js.AbstractRenderer.render (http://localhost:6006/vendors~main.iframe.bundle.js:117061:16) at CanvasRenderer.<anonymous> (http://localhost:6006/vendors~main.iframe.bundle.js:117229:74)

Expected behavior

I shouldn't get any error when using TippyModule.forRoot() together with storybook

Minimal reproduction of the problem with instructions

Install storybook 6.3.2, add a component that uses TippyModule, inside the story file add the decorators imports property:

decorators: [ moduleMetadata({ imports: [ TooltipModule, TippyModule], providers: TippyModule.forRoot().providers || [] }) ],

What is the motivation / use case for changing the behavior?

It's a bug: Converting circular structure to JSON

Environment



 System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.12.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.0

Angular version: 11.2.13

Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
@jon-coffey
Copy link

I'm using Storybook and it's working perfectly fine. You have to use the TippyModule.forRoot() in the imports section of your ng module. I don't know what the intention is behind to use the provider directly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants