storybookjs/storybook

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

Open

#24903 opened on Nov 19, 2023

View on GitHub
 (3 comments) (1 reaction) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bugbuilder-vitehelp wantedreact

Description

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

Contributor guide

Tech stack
reacttypescriptvite
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
1
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
95
Research direction
The bug is in `code/lib/react dom shim/src/react 18.tsx` where `import ReactDOM from 'react dom/client'` should be `import { createRoot } from 'react dom/client'` and `ReactDOM.createRoot(el)` should be `createRoot(el)`. Confirm there are no other uses of `ReactDOM` in the file and that the fix doesn't break other React versions. Check if similar patterns exist in other shim files.