Skip to content

[Bug]: React "open in stackblitz" links do not work for preview components #20599

@tay1orjones

Description

@tay1orjones

Package

@carbon/react

Browser

Chrome

Package version

1.92.0

React version

19

Description

Refs #18344

when opening the stackblitz preview from storybook .mdx files, preview components don't work.

Image

Similar for layout, missing in the import statement

Image

I think this is happening because stackblitzPrefillConfig compares the list of exports from the top-level entrypoint to what's in the story. Stories use IconIndicator, but the top level export we expose to consumers is preview__IconIndicator.

I think it's just this filter function that needs updated to look at both componentName and "preview__" + componentName and then use the preview one in the generated stackblitz output.

return componentNames.filter((componentName) => {
// Grab the component and add the "<" resulting in"`<ComponentName`
const regex = new RegExp(`<${componentName}\\b`, 'g');
// Check if the component exists in the `storyCode`
return regex.test(storyCode);
});

Reproduction/example

react.carbondesignsystem.com

Steps to reproduce

Go to the storybook, click on an overview page for a preview component, try to open in stackblitz.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

n/a

Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    Status

    ⏱ Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions