react: 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"
}
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 16
We’ve added the
unstable_
prefix back.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 thereact-dom@experimental
and somehow as hiding the react concurrent mode functionunstable_createRoot
.Another misunderstanding was the name of the function. I was trying to use the
createRoot
while the name in the experimentalreact-dom
package wasunstable_createRoot
.After I remove
@hot-loader/react-dom
the package, remove it from the Webpackresolve.alias
and use the methodunstable_createRoot
, it started working back again.@MincePie I left my attempt at a solution here: https://github.com/MincePie/nextfirebaseattempt/pull/3. Hope it helps.