React: Webpack can't find ReactDOM.createRoot

[brneto]

Hi,

I'm kinda in doubt if this is an error or is just me doing something wrong.

I am trying the new react experimental in a very simple existing app I have. Although I had installed the react experimental versions in my package.json, it seems it doesn't recognize ReactDOM.createRoot.

When I try to run my project I receive the error message from the console:

Uncaught TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.createRoot is not a function
    at Module../src/client/index.js (main.chunk.js:2437)
    at __webpack_require__ (runtime.bundle.js:786)
    at fn (runtime.bundle.js:151)
    at Object.0 (main.chunk.js:4324)
    at __webpack_require__ (runtime.bundle.js:786)
    at checkDeferredModules (runtime.bundle.js:46)
    at Array.webpackJsonpCallback [as push] (runtime.bundle.js:33)
    at main.chunk.js:1

This only happens when I try using ReactDOM.createRoot. Using ReactDOM.render everything works perfectly.

Any idea why this is happening?

"dependencies": {
    "chalk": "^3.0.0",
    "compression": "^1.7.4",
    "express": "^4.17.1",
    "morgan": "^1.9.1",
    "uuid": "^3.4.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.4",
    "@babel/node": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/plugin-proposal-decorators": "^7.7.4",
    "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
    "@babel/plugin-proposal-function-bind": "^7.7.4",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
    "@babel/plugin-proposal-pipeline-operator": "^7.7.7",
    "@babel/plugin-proposal-private-methods": "^7.7.4",
    "@babel/plugin-proposal-throw-expressions": "^7.7.4",
    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.7.4",
    "@babel/preset-typescript": "^7.8.3",
    "@hot-loader/react-dom": "^16.11.0",
    "@testing-library/jest-dom": "^5.1.1",
    "@testing-library/react": "^9.4.0",
    "autoprefixer": "^9.7.4",
    "babel-eslint": "^11.0.0-beta.2",
    "babel-jest": "^25.1.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-dynamic-import-node": "^2.3.0",
    "babel-plugin-styled-components": "^1.10.7",
    "case-sensitive-paths-webpack-plugin": "^2.3.0",
    "circular-dependency-plugin": "^5.2.0",
    "clean-webpack-plugin": "^3.0.0",
    "connected-react-router": "^6.6.1",
    "copy-webpack-plugin": "^5.1.1",
    "core-js": "^3.6.2",
    "css-hot-loader": "^1.4.4",
    "css-loader": "^3.4.1",
    "deep-freeze": "^0.0.1",
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-ramda": "^2.5.1",
    "eslint-plugin-react": "^7.18.3",
    "eslint-plugin-react-hooks": "^2.3.0",
    "eslint-plugin-redux-saga": "^1.1.3",
    "eslint-watch": "^6.0.1",
    "file-loader": "^5.0.2",
    "hard-source-webpack-plugin": "^0.13.1",
    "history": "^4.10.1",
    "html-webpack-plugin": "^3.2.0",
    "immer": "^5.3.4",
    "jest": "^25.1.0",
    "jest-styled-components": "^7.0.0",
    "lodash": "^4.17.15",
    "mini-css-extract-plugin": "^0.9.0",
    "moment": "^2.24.0",
    "nock": "^11.7.1",
    "normalizr": "^3.5.0",
    "npm-run-all": "^4.1.5",
    "open": "^7.0.2",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "pm2": "^4.2.3",
    "postcss-flexbugs-fixes": "^4.2.0",
    "postcss-loader": "^3.0.0",
    "prop-types": "^15.7.2",
    "ramda": "^0.27.0",
    "react": "^0.0.0-experimental-241c4467e",
    "react-dom": "^0.0.0-experimental-241c4467e",
    "react-hooks-testing-library": "^0.6.0",
    "react-hot-loader": "^4.12.19",
    "react-is": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-test-renderer": "^16.12.0",
    "redux": "^4.0.5",
    "redux-actions": "^2.6.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "redux-saga-test-plan": "^4.0.0-rc.3",
    "regenerator-runtime": "^0.13.3",
    "reselect": "^4.0.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^1.1.3",
    "styled-components": "^5.0.1",
    "stylelint": "^13.0.0",
    "stylelint-bare-webpack-plugin": "^2.0.0",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-config-standard": "^19.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-custom-processor-loader": "^0.6.0",
    "stylelint-order": "^4.0.0",
    "stylelint-processor-styled-components": "^1.9.0",
    "stylelint-selector-bem-pattern": "^2.1.0",
    "thread-loader": "^2.1.3",
    "typescript": "^3.7.5",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.4",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-manifest-plugin": "^2.2.0",
    "webpack-merge": "^4.2.2",
    "webpack-pwa-manifest": "^4.1.1",
    "workbox-webpack-plugin": "^5.0.0"
  }

[brneto]

I've found the cause of the issue. It had to do with the react-hot-loader w/ hooks support. To have hooks support enabled I've set in my Webpack config an alias to @hot-loader/react-dom. That alias was replacing the react-dom@experimental and somehow as hiding the react concurrent mode function unstable_createRoot.

Another misunderstanding was the name of the function. I was trying to use the createRoot while the name in the experimental react-dom package was unstable_createRoot.

After I remove @hot-loader/react-dom the package, remove it from the Webpack resolve.alias and use the method unstable_createRoot, it started working back again.

[MincePie]

I'm having the same issue - following the docs here: https://github.com/FirebaseExtended/reactfire/blob/master/docs/quickstart.md

[gaearon]

Those docs use an experimental API as if it were stable. It’s not. You can only get it in experimental React builds. https://reactjs.org/docs/concurrent-mode-adoption.html

[gaearon]

In other words those docs are misleading because they rely on experimental features without clearly stating so. Wouldn’t suggest to use in a stable project.

[MincePie]

Okay - thanks. Is there any indication of timing for when this might be ready? I'm in a world of hell trying to configure react hooks to talk to firebase. https://stackoverflow.com/questions/59977856/firebase-listener-with-react-hooks

[gaearon]

Sorry to hear that.

Is there any indication of timing for when this might be ready?

No, but it also should be unrelated to your problem. You don't "need" this to talk to Firebase. I'm not sure why the package author decided to use experimental features. I suggest to use other packages.

I'm in a world of hell trying to configure react hooks to talk to firebase.

Sorry to hear that. Your post is a bit difficult to follow because it seems to jump between unrelated problems. For example, you say:

That breaks when the page updates, so I am trying to figure out how to move the listener to react hooks.

What does it mean that it "breaks when the page updates"? It's not clear. And why does fixing that involve moving to Hooks? That's also not clear. Hooks aren't a solution to any breakage. If something was breaking for you with a class, it wasn't because you weren't using Hooks. So if you struggle with Hooks, I suggest going back to a class based approach and figuring out what problem you had, and fixing that problem first.

You mention later:

when I try this, I get an error in the Dashboard2 component that says: Firebase' is not defined

Instead of finding a source and fixing that error (which is caused by using an undefined variable), you proceeded to add more stuff to the project. That's why it gets more and more complex.

I suggest to try to slow down again and investigate why Firebase is undefined. In your example, it's undefined because you never defined it. You defined something called Firebase in another file (I don't know if that's the thing you intended to use), but you never imported it from Dashboard. So it's expected that Firebase would not work in that file.

Overall, I'm really sorry about the poor experience you're running into. I think part of the reason is that when you run into a problem, you don't diagnose the root cause but add more stuff to the project or drastically change your approach.

If you could put your original app somewhere on GitHub as a demo (even in a broken state), I could try to take a look and see if I can fix it. It's unfortunately hard to help when there's so many moving parts added just to fix some original problem that could've been a one-line fix. So let's focus on that first.

[MincePie]

Thank you so much! I added you to the repo.

I have made a clean repo with nothing other than this problem in it to try
to get rid of all the different attempts I've made over the last years of
trying to figure this out.

https://github.com/MincePie/nextfirebaseattempt/tree/master/src

That is beyond kind of you to have a look.

Mel

On Fri, Mar 27, 2020 at 8:51 AM Dan Abramov [e-mail]
wrote:

Sorry to hear that.

Is there any indication of timing for when this might be ready?

No, but it also should be unrelated to your problem. You don't "need" this
to talk to Firebase. I'm not sure why the package author decided to use
experimental features. I suggest to use other packages.

I'm in a world of hell trying to configure react hooks to talk to firebase.

Sorry to hear that. Your post is a bit difficult to follow because it
seems to jump between unrelated problems. For example, you say:

That breaks when the page updates, so I am trying to figure out how to
move the listener to react hooks.

What does it mean that it "breaks when the page updates"? It's not clear.
And why does fixing that involve moving to Hooks? That's also not clear.
Hooks aren't a solution to any breakage. If something was breaking for you
with a class, it wasn't because you weren't using Hooks. So if you
struggle with Hooks, I suggest going back to a class based approach and
figuring out what problem you had, and fixing that problem first.

You mention later:

when I try this, I get an error in the Dashboard2 component that says:
Firebase' is not defined

Instead of finding a source and fixing that error (which is caused by
using an undefined variable), you proceeded to add more stuff to the
project. That's why it gets more and more complex.

I suggest to try to slow down again and investigate why Firebase is
undefined. In your example, it's undefined because you never defined it.
You defined something called Firebase in another file (I don't know if
that's the thing you intended to use), but you never imported it from
Dashboard. So it's expected that Firebase would not work in that file.

Overall, I'm really sorry about the poor experience you're running into. I
think part of the reason is that when you run into a problem, you don't
diagnose the root cause but add more stuff to the project or drastically
change your approach.

If you could put your original app somewhere on GitHub as a demo (even in
a broken state), I could try to take a look and see if I can fix it. It's
unfortunately hard to help when there's so many moving parts added just to
fix some original problem that could've been a one-line fix. So let's focus
on that first.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react/issues/17994#issuecomment-604705323,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ACM76D62MB4JN4N555AECD3RJPE5VANCNFSM4KRFAEUA
.

[eps1lon]

In other words those docs are misleading because they rely on experimental features without clearly stating so. Wouldn’t suggest to use in a stable project.

I mean they do state that this is meant to be used with experimental builds before going into any API.

I don't think it's valuable to repeat this warning on every page if your whole package relies on it.

[gaearon]

@MincePie I left my attempt at a solution here: https://github.com/MincePie/nextfirebaseattempt/pull/3. Hope it helps.

[samifmlx]

For me it works for some react experimental versions and doesn't work for some..

Works fine for:
"react": "0.0.0-experimental-5faf377df",

Does NOT work for me:
"react": "0.0.0-experimental-33c3af284",

[gaearon]

We’ve added the unstable_ prefix back.

[irfanzainudin]

I got the same error and I don't know how to resolve it. I tried editing my Webpack config in my node_modules but it doesn't work.

Code

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <div>Hello world!</div>
  )
}

ReactDOM.unstable_createRoot(document.getElementById('root')).render(<App />);

Error

TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.unstable_createRoot is not a function
Module../src/index.js
src/index.js:10
   7 |   )
   8 | }
   9 | 
> 10 | ReactDOM.unstable_createRoot(document.getElementById('root')).render(<App />);
  11 | 
  12 | // ReactDOM.render(
  13 | //   <React.StrictMode>
View compiled
__webpack_require__
/Users/macbookpro/Documents/firelobby/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/macbookpro/Documents/firelobby/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:60:18
__webpack_require__
/Users/macbookpro/Documents/firelobby/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
checkDeferredModules
/Users/macbookpro/Documents/firelobby/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
/Users/macbookpro/Documents/firelobby/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:71