Unable to upgrade react version to 18 from 16 #154
Description
When running a project created by cookiecutter and boilerplate, I am upgrading the react and react-dom package to latest which is 18.2.0 at the moment. I am upgrading to 18.2.0 to use chakra-ui in my components. When using ChakraProvider as the main html element of my component. I get an exception after executing the usage.py, even npm run build works fine. The exception trace is:
Uncaught TypeError: (0 , Z.useSyncExternalStore) is not a function
at oe (react_chakra.v0_0_1m1685347273.min.js:2:591280)
at renderWithHooks (react-dom@16.v2_10_0m1685335932.14.0.js:14938:20)
at mountIndeterminateComponent (react-dom@16.v2_10_0m1685335932.14.0.js:17617:15)
at beginWork (react-dom@16.v2_10_0m1685335932.14.0.js:18731:18)
at HTMLUnknownElement.callCallback (react-dom@16.v2_10_0m1685335932.14.0.js:182:16)
at Object.invokeGuardedCallbackDev (react-dom@16.v2_10_0m1685335932.14.0.js:231:18)
at invokeGuardedCallback (react-dom@16.v2_10_0m1685335932.14.0.js:286:33)
at beginWork$1 (react-dom@16.v2_10_0m1685335932.14.0.js:23338:9)
at performUnitOfWork (react-dom@16.v2_10_0m1685335932.14.0.js:22289:14)
at workLoopSync (react-dom@16.v2_10_0m1685335932.14.0.js:22265:24)
My React Component Code is:
import React, { Component } from 'react';
import { Button, ChakraProvider } from '@chakra-ui/react';
export default function Label(props) {
const { id, value } = props;
return (
<ChakraProvider>
<div id={id}>
<Button>{value}</Button>
</div>
</ChakraProvider>
);
}
Label.defaultProps = {};
Label.propTypes = {
id: PropTypes.string,
value: PropTypes.string,
};
My package.json file:
{
"name": "react_chakra",
"version": "0.0.1",
"description": "Project Description",
"main": "build/index.js",
"scripts": {
"start": "webpack-serve --config ./webpack.serve.config.js --open",
"validate-init": "python _validate_init.py",
"prepublishOnly": "npm run validate-init",
"build:js": "webpack --mode production",
"build:backends": "dash-generate-components ./src/lib/components react_chakra -p package-info.json --r-prefix '' --jl-prefix '' --ignore \.test\.",
"build:backends-activated": "(. venv/bin/activate || venv\scripts\activate && npm run build:py_and_r)",
"build": "npm run build:js && npm run build:backends",
"build:activated": "npm run build:js && npm run build:backends-activated"
},
"author": "Tayyab Iqbal tayyab.iqbal@ili.digital",
"license": "",
"dependencies": {
"@chakra-ui/react": "^2.6.1",
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"framer-motion": "^4.1.17",
"ramda": "^0.26.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.5.4",
"@babel/plugin-proposal-object-rest-spread": "^7.5.4",
"@babel/preset-env": "^7.5.4",
"@babel/preset-react": "^7.0.0",
"@plotly/dash-component-plugins": "^1.2.0",
"@plotly/webpack-dash-dynamic-import": "^1.2.0",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"copyfiles": "^2.1.1",
"css-loader": "^3.0.0",
"eslint": "^6.0.1",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-react": "^7.14.2",
"prop-types": "^15.7.2",
"react-docgen": "^4.1.1",
"style-loader": "^0.23.1",
"styled-jsx": "^5.1.2",
"terser-webpack-plugin": "^2.3.0",
"webpack": "4.36.1",
"webpack-cli": "^3.3.12",
"webpack-serve": "3.1.0"
},
"engines": {
"node": ">=8.11.0",
"npm": ">=6.1.0"
}
}`
My environment:
Python 3.10.6
dash 2.10.0
chakra-ui 2.6.1