Unable to upgrade react version to 18 from 16

[mti-at-ili]

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

[alexcjohnson]

Dash itself still by default still runs with React 16, regardless of what you've defined in your component. As described in the Dash 2.9 changelog we added:

Experimental support for React 18. The default is still React v16.14.0, but to use React 18 you can either set the environment variable REACT_VERSION=18.2.0 before running your app, or inside the app call dash._dash_renderer._set_react_version("18.2.0"). THIS FEATURE IS EXPERIMENTAL. It has not been tested with component suites outside the Dash core, and we may add or remove available React versions in any future release.

[mti-at-ili]

Thanks @alexcjohnson. It resolved my issue and has been able to load my application throught React 18.