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.