Webpack can't find ReactDOM.createRoot

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"
  }

[gaearon]

We’ve added the unstable_ prefix back.

[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.