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.

Sign up for GitHub

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

Jump to bottom

Bug: Can't use createRoot with UMD without "react-dom/client" warning #24372

Closed
kentcdodds opened this issue Apr 13, 2022 · 5 comments
Closed

Bug: Can't use createRoot with UMD without "react-dom/client" warning #24372

kentcdodds opened this issue Apr 13, 2022 · 5 comments
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@kentcdodds
Copy link

React version: v18.0.0

Steps To Reproduce

Run this:

<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@18.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.js"></script>
  <script type="module">
    const rootElement = document.getElementById('root')
    const element = React.createElement('div', {
      className: 'container',
      children: 'Hello World',
    })
    ReactDOM.createRoot(rootElement).render(element)
  </script>
</body>
</html>

Link to code example: https://jsbin.com/hucetewebu/edit?html,js,console,output

The current behavior

Getting a console error:

index.js:1 Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

However, there's no UMD version of react-dom/client so the error is not actionable.

I am able to work around this by adding this to the top of the script:

ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint = true

But obviously that's not a great solution, especially for what I'm trying to do 😅

The expected behavior

Disable the warning for UMD or give some other way to use createRoot from the UMD.

Use case

I use the UMD as a way to ease people into React without introducing a bunch of tooling up-front. Getting an error in the console is not a great experience.
@kentcdodds kentcdodds added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Apr 13, 2022
@billyjanitsch
Copy link
Contributor

Is this a duplicate of #24221? If so, it was fixed by #24274 (but not released yet).

@gaearon
Copy link
Collaborator

gaearon commented Apr 14, 2022

Yes, this is a fixed bug. We're hoping to release next week if everything goes well.

@gaearon gaearon closed this as completed Apr 14, 2022
@kentcdodds
Copy link
Author

Good news! Thanks!

@gaearon
Copy link
Collaborator

gaearon commented Apr 27, 2022

Fixed in 18.1

@jackieli123723
Copy link

18.2.0 work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@gaearon @billyjanitsch @kentcdodds @jackieli123723