#7.0.0-rc10 to 7.0.0-rc11 Angular provider is broken

13 messages · Page 1 of 1 (latest)

tepid pewter
#

After upgrading we do get a lot errors in existing stories which used to work before

example after upgrade:
R3InjectorError(Standalone[StorybookWrapperComponent])[NewsletterService -> InjectionToken newsletter_api-cookies -> InjectionToken newsletter_api-cookies -> InjectionToken newsletter_api-cookies]:

code:

decorators: [
    moduleMetadata({
        declarations: [NewsletterComponent],
        imports: [
            CommonModule,
            NewsletterModule,
            MarkdownModule.forRoot({}),
            TranslateStorybookHelperModule,
            ToastrModule.forRoot(),
        ],
        providers: [
            {
                provide: NEWSLETTER_API_COOKIES,
                useValue: ``,
            },
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }),
    componentWrapperDecorator((story) => `<div>${story}</div>`),
],

any new way to setup my story?

golden oyster
#

Isn't 7.0.4 out? Wonder if it fixes it.

#

npx storybook@latest migrate csf-2-to-3 --glob="src/**/*.stories.js"

tepid pewter
#

I've updated to 7.0.4 indeed, but it was broken, so i wanted to know in which version it exactly broke. that is this version, maybe the devs have a clearer and better answer when they see which version the bug/feature was introduced

golden oyster
#

Ah ok I'm sure devs will chime in at some point. In the meantime you could try that script i pasted above to see if it helps at all. Also in the past sometimes i needed to nuke the node_modules folders when upgrading .

tepid pewter
#

will try to manual upgrade one or two to CSF3 if it fixes this, specifically, we have to many stories (already tried the migration script, didnt do any good)

#

overall the docs arent clear about this 'migration'

#

for other people, i was able to fix it now, the code above is updated as follows

decorators: [
    applicationConfig({
        providers: [
            importProvidersFrom(
                NewsletterModule,
                TranslateStorybookHelperModule,
                ToastrModule.forRoot(),
            ),
            {
                provide: NEWSLETTER_API_COOKIES,
                useValue: ``,
            },
        ],
    }),
    moduleMetadata({
        declarations: [NewsletterComponent],
        imports: [
            CommonModule,
            NewsletterModule,
            MarkdownModule.forRoot({}),
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }),
    componentWrapperDecorator((story) => `<div>${story}</div>`),
],
azure mango
#

@tepid pewter glad you figured it out, how could we change the docs or migration guide to make this clearer?

If you can give us a couple of sentences with an example, the maintainers (me!) would be happy to update the docs for you

tepid pewter
#

an example of a component which needs provider(s) would be sufficient, nowhere in the docs are applicationConfig and importProvidersFrom mentioned. had to discover them when going to the pull requests of the RC11 release

azure mango
#

@cobalt plover might be something to add to the docs

azure mango
#

@tepid pewter did you reference these docs when you were migrating?

GitHub
storybook/MIGRATION.md at next · storybookjs/storybook

Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation. - storybook/MIGRATION.md at next · storybookjs/storybook