[Bug]: Storybook 7.5.3 react-dom-shim uses default export from a module that has only named exports

nstuyvesant commented 10 months ago

Describe the bug

I am unable to run storybook for a package written in React 18 using @storybook/react-vite (have to use @storybook/react-webpack5). I get an error

Uncaught SyntaxError: ambiguous indirect export: default

on this line of 'react-dom-shim'...

When I look at react-dom/client.js, I only see two named exports - no default.

Shouldn't

import ReactDOM from 'react-dom/client';

be

import { createRoot } from 'react-dom';

and then change line 48 from:

root = ReactDOM.createRoot(el);

to

root = createRoot(el);

To Reproduce

I don't have an easy repro though you could clone the @carbon/charts project and look at the react package's Storybook configuration.

System

Storybook Environment Info:

  System:
    OS: macOS 14.1.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - /opt/homebrew/bin/node
    Yarn: 4.0.2 - /opt/homebrew/bin/yarn <----- active
    npm: 10.2.4 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 119.0.6045.159
    Safari: 17.1

Additional context

No response

shilman commented 9 months ago

@nstuyvesant Pretty sure ReactDOM references the module and ReactDOM.createRoot references the export. @ndelangen please feel free to elaborate.

That said I don't see any issue with your proposed change. Please feel free to open a PR with the change and we can update.

SrMatheus2000 commented 5 months ago

Any updates or workarounds on this? having the same problem here

DanielMcFarlin commented 4 months ago

Yeah I am also running into a similar issue. My problem started when I tried to implement Storybook Composition. The issue that I am seeing specifically is:

TypeError: Failed to fetch dynamically imported module: http://localhost:6006/node_modules/.cache/sb-vite/deps/@storybook_addon-essentials_measure_preview.js?v=a0a039f4

Basically I have one component that I want storybook to display that is React. The reset of the design library is just Lit Element components. Is there any update on this issue and how to resolve it yet?

storybookjs / storybook