[BUG] When upgrading to React18/Chakra2: createStylesContext is not a function

[benjamincharity]

Description

After upgrading to React 18 / Chakra v2 I am hitting one last issue from this package. I am seeing this message:

(0 , _chakra_ui_system__WEBPACK_IMPORTED_MODULE_1__.createStylesContext) is not a function

I've tried rolling back but just get useContext errors. Any tips here would be great; I'd love to complete this upgrade :)

 >  NX   Report complete - copy this into the issue template

   Node : 16.15.1
   OS   : darwin arm64
   yarn : 1.22.19

   nx : 14.4.2
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.4.2
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.4.2
   @nrwl/eslint-plugin-nx : 14.4.2
   @nrwl/express : Not Found
   @nrwl/jest : 14.4.2
   @nrwl/js : 14.4.2
   @nrwl/linter : 14.4.2
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 14.4.2
   @nrwl/nx-cloud : 14.2.0
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.4.2
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.4.2
   @nrwl/web : 14.4.2
   @nrwl/workspace : 14.4.2
   typescript : 4.7.4
   ---------------------------------------

package.json

{
  "name": "flowpath",
  "version": "0.0.0",
  "license": "none",
  "scripts": {
    "postinstall": "tsc -p tools/tsconfig.tools.json"
  },
  "private": true,
  "engines": {
    "node": ">= 16.0.0",
    "npm": ">= 6.0.0",
    "yarn": ">= 1.0.0"
  },
  "dependencies": {
    "@amcharts/amcharts5": "^5.2.10",
    "@amcharts/amcharts5-geodata": "^5.0.3",
    "@appsignal/javascript": "^1.3.23",
    "@appsignal/react": "^1.0.20",
    "@chakra-ui/icons": "^2.0.4",
    "@chakra-ui/react": "^2.2.4",
    "@dnd-kit/core": "^6.0.5",
    "@dnd-kit/modifiers": "^6.0.0",
    "@dnd-kit/sortable": "^7.0.1",
    "@dnd-kit/utilities": "^3.2.0",
    "@emotion/react": "11.9.3",
    "@emotion/styled": "11.9.3",
    "@fontsource/nunito-sans": "^4.5.8",
    "@fortawesome/fontawesome-svg-core": "6.1.1",
    "@fortawesome/pro-light-svg-icons": "6.1.1",
    "@fortawesome/pro-solid-svg-icons": "6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@hookform/resolvers": "^2.9.6",
    "@khanacademy/react-multi-select": "^0.3.3",
    "@loadable/component": "^5.15.2",
    "@react-hook/window-size": "^3.0.7",
    "@react-hookz/web": "^15.0.1",
    "@splitsoftware/splitio-react": "^1.6.0",
    "@storybook/builder-webpack5": "6.5.9",
    "@storybook/core-server": "6.4.22",
    "@storybook/manager-webpack5": "6.5.9",
    "@tanstack/react-location": "^3.7.4",
    "@tanstack/react-virtual": "^3.0.0-beta.2",
    "@trendmicro/react-sidenav": "^0.5.0",
    "axios": "^0.27.2",
    "boring-avatars": "^1.7.0",
    "buffer": "^6.0.3",
    "chakra-react-select": "4.1.3",
    "change-case": "^4.1.2",
    "chroma-js": "^2.4.2",
    "classnames": "^2.3.1",
    "core-js": "^3.21.1",
    "d3": "^7.3.0",
    "date-fns": "^2.28.0",
    "downshift": "^6.1.7",
    "formik": "^2.2.9",
    "framer-motion": "^6.5.1",
    "html5-qrcode": "^2.2.1",
    "http-status-codes": "^2.2.0",
    "interactjs": "^1.10.11",
    "just-debounce-it": "^3.0.1",
    "lodash.debounce": "^4.0.8",
    "lodash.isempty": "^4.4.0",
    "lodash.isequal": "^4.5.0",
    "md5": "^2.3.0",
    "moment": "^2.29.3",
    "moment-timezone": "^0.5.34",
    "notification-service-js": "^0.6.2",
    "pluralize": "^8.0.0",
    "pondjs": "^0.9.0",
    "query-string": "^7.1.1",
    "randomcolor": "^0.6.2",
    "rc-time-picker": "^3.7.3",
    "react": "18.2.0",
    "react-accessible-accordion": "^3.3.5",
    "react-autocomplete-input": "^1.0.18",
    "react-beautiful-dnd": "^13.1.0",
    "react-big-calendar": "^0.40.1",
    "react-calendar-timeline": "^0.27.0",
    "react-code-blocks": "^0.0.9-0",
    "react-collapsible": "^2.8.4",
    "react-confirm-alert": "^2.8.0",
    "react-csv": "^2.2.2",
    "react-date-range": "^1.4.0",
    "react-datepicker": "^4.8.0",
    "react-dates": "^21.8.0",
    "react-datetime-picker": "^3.5.0",
    "react-debounce-input": "^3.2.5",
    "react-dom": "18.2.0",
    "react-dropdown-tree-select": "^2.7.1",
    "react-dropzone": "^14.2.2",
    "react-fade-in": "^2.0.1",
    "react-fast-compare": "^3.2.0",
    "react-floating-action-button": "^1.0.5",
    "react-fullstory": "^1.4.0",
    "react-google-recaptcha": "^2.1.0",
    "react-grid-layout": "^1.3.4",
    "react-highlight-words": "^0.18.0",
    "react-hook-form": "^7.33.1",
    "react-html5-camera-photo": "^1.5.10",
    "react-images-upload": "^1.2.8",
    "react-images-uploading": "^3.1.7",
    "react-is": "18.2.0",
    "react-linkify": "^1.0.0-alpha",
    "react-linkify-it": "^1.0.7",
    "react-loading": "^2.0.3",
    "react-loading-overlay": "^1.0.1",
    "react-map-gl": "^6.1.17",
    "react-minimal-pie-chart": "^8.2.0",
    "react-modal": "^3.15.1",
    "react-multi-date-picker": "^3.3.0",
    "react-number-format": "^4.9.3",
    "react-qr-code": "^2.0.7",
    "react-query": "^3.39.2",
    "react-recaptcha": "^2.3.10",
    "react-redux": "8.0.2",
    "react-router": "^6.3.0",
    "react-router-dom": "6.3.0",
    "react-select": "^5.2.2",
    "react-show-more-text": "^1.5.2",
    "react-sweet-progress": "^1.1.2",
    "react-table": "^7.8.0",
    "react-table-v6": "^6.8.6",
    "react-tag-autocomplete": "^6.2.0",
    "react-tag-input": "^6.8.0",
    "react-textarea-autosize": "^8.3.4",
    "react-timeseries-charts": "^0.16.1",
    "react-to-print": "^2.14.7",
    "react-tooltip": "^4.2.21",
    "react-transition-group": "^4.4.2",
    "react-use": "^17.4.0",
    "react-use-intercom": "^2.0.0",
    "react-vis": "^1.11.7",
    "react-weekly-day-picker": "^1.0.3",
    "react-window-size": "^1.2.2",
    "reactjs-popup": "^2.0.5",
    "redux": "^4.1.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.3.0",
    "regenerator-runtime": "0.13.9",
    "rooks": "^5.11.8",
    "styled-components": "5.3.5",
    "three": "0.142.0",
    "tslib": "^2.0.0",
    "us-zips": "^2021.11.4",
    "use-places-autocomplete": "^4.0.0",
    "vanta": "^0.5.22",
    "webpack-retry-chunk-load-plugin": "^3.1.1",
    "workbox-core": "^6.5.3",
    "workbox-expiration": "^6.5.3",
    "workbox-precaching": "^6.5.3",
    "workbox-routing": "^6.5.3",
    "workbox-strategies": "^6.5.3",
    "workbox-webpack-plugin": "^6.5.3",
    "yup": "^0.32.11",
    "zod": "^3.17.3",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "7.18.6",
    "@babel/preset-typescript": "7.18.6",
    "@chakra-ui/cli": "^2.1.2",
    "@faker-js/faker": "^7.3.0",
    "@hookform/devtools": "^4.2.2",
    "@netlify/functions": "^1.0.0",
    "@nrwl/cli": "14.4.2",
    "@nrwl/cypress": "14.4.2",
    "@nrwl/eslint-plugin-nx": "14.4.2",
    "@nrwl/jest": "14.4.2",
    "@nrwl/js": "14.4.2",
    "@nrwl/linter": "14.4.2",
    "@nrwl/node": "14.4.2",
    "@nrwl/nx-cloud": "14.2.0",
    "@nrwl/react": "14.4.2",
    "@nrwl/storybook": "14.4.2",
    "@nrwl/web": "14.4.2",
    "@nrwl/workspace": "14.4.2",
    "@playwright/test": "^1.23.3",
    "@snek-at/storybook-addon-chakra-ui": "^1.0.0",
    "@storybook/addon-essentials": "6.5.9",
    "@storybook/react": "6.5.9",
    "@svgr/webpack": "^6.2.1",
    "@tanstack/react-location-devtools": "^3.4.4",
    "@testing-library/react": "13.3.0",
    "@types/jest": "27.4.1",
    "@types/moment": "^2.13.0",
    "@types/node": "18.0.0",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "@types/react-grid-layout": "^1.3.2",
    "@types/react-is": "17.0.3",
    "@types/react-router-dom": "5.3.3",
    "@types/styled-components": "5.1.25",
    "@typescript-eslint/eslint-plugin": "5.30.6",
    "@typescript-eslint/parser": "5.30.6",
    "@welldone-software/why-did-you-render": "^7.0.1",
    "babel-jest": "28.1.3",
    "babel-loader": "8.2.5",
    "babel-plugin-styled-components": "2.0.7",
    "copyfiles": "^2.4.1",
    "cors": "^2.8.5",
    "csstype": "^3.0.11",
    "cypress": "^8.3.0",
    "eslint": "8.15.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-deprecation": "^1.3.2",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsdoc": "^39.3.3",
    "eslint-plugin-jsx-a11y": "6.6.0",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "eslint-plugin-react": "7.30.1",
    "eslint-plugin-react-hooks": "4.6.0",
    "express": "^4.18.1",
    "helmet": "^4.6.0",
    "heroku-ssl-redirect": "^0.1.1",
    "jest": "27.5.1",
    "namor": "^2.0.4",
    "node-fetch": "^3.2.8",
    "nx": "14.4.2",
    "prettier": "2.7.1",
    "prettier-plugin-sh": "^0.12.6",
    "react-test-renderer": "18.2.0",
    "source-map-explorer": "^2.5.2",
    "ts-jest": "27.1.4",
    "typescript": "4.7.4",
    "url-loader": "^4.1.1",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-merge": "^5.8.0",
    "webpack-stats-plugin": "^1.0.3"
  }
}

chakra-react-select Version

4.1.3

Link to Reproduction

Of course this is a private repo so no public repro 😞

TypeScript?

• Yes I use TypeScript

Steps to reproduce

1. Build app

Operating System

• macOS
• Windows
• Linux
• iOS/iPadOS
• Android

Additional Information

[csandman]

Hmm that is strange, that function is definitely available in @chakra-ui/react^2.0.0. It's possible something got messed up with lingering dependencies from an older version of chakra-react-select. Here's a couple options for what you could try (in the order I'd try them) to see if its a simple fix:

1. Uninstall @chakra-ui/react and chakra-react-select completely then install them again one at a time in that order
2. Wipe out your node_modules folder and try a fresh install
3. Wipe out your node_modules and package-lock.json (or yarn.lock?) and try a fresh install

If none of those work I can take a deeper look into it. I see you have yarn listed under your engines field, is that what you're using? If so it might be a yarn thing, I've been having trouble getting the whole dependencies/peer dependencies thing working consistently on both npm and yarn. So if none of those work, and you are using yarn, let me know which version of it you're using.

[benjamincharity]

Thanks for the quick response!

We are using Yarn v1.22.19

1. I tried this after trying to remove the yarn.lock file and see the same results
2. I have tried this a few times with no luck.
3. I just not tried this and while I still get the error in the browser I also see the warning in console now:

And the browser error leads me here:

[kafiln]

I'm having the exact same issue described above !
The issue seem to be present on version 4.1.3 but fortunately not on 4.1.2, so a quick workaround for me was to use version 4.1.2

[csandman]

Thanks @kafiln I think I've figured out what's causing issue but I'm still not sure specifically why it's happening. createStylesContext was not added in @chakra-ui/[email protected] as I thought, it was actually added in @chakra-ui/[email protected]. If I want to keep using it I should pin that peer dep to that version or above, which I'm not sure I want to do just yet as is could cause conflicts.

The part I'm confused about is why a version of @chakra-ui/system lower than v2.1.2 would be getting installed, especially if you're trying a fresh install after deleting the yarn.lock @benjamincharity. Unless the default behavior of yarn is just to install whatever the base version of a peer dep is, ignoring the ^ to allow for higher versions?

I actually just tried making a test app with yarn, installing all of the dependencies from scratch, and I'm not seeing this issue. Could you search your yarn.lock file for all instances of @chakra-ui/system and let me know if any of them are listed as lower than v2.1.2?

---

Regardless of your answer, I'm planning to revert back to the StylesProvider component and useStyles hook I was using in v4.1.2 for now, but it would be nice to have as many details as I can get to avoid introducing this issue in the future.

[csandman]

Ok, I ended up fixing it by just removing the need for a styles context in the first place. The change has been published in v4.1.4.

Before upgrading to it @benjamincharity I'm still curious about my question in my last comment, whether or not you have any instances of @chakra-ui/system in your yarn.lock file. This would definitely help me troubleshoot issues like this in the future!

And If either of you are still having any issues after upgrading, feel free to re-open!

[benjamincharity]

Sorry for the delay @csandman - I just added this package back to my Chakra v2 app and DO see older versions of chakra system in my lock file. Looking through our dependencies and tracked it down to this item:

"@snek-at/storybook-addon-chakra-ui": "^1.0.0",

This was forcing a 1.x install of chakra system. Once I removed that package, yarn.lock and node_modules and did a fresh install this package is working just fine 👍

Thanks again for looking into this!

[matthewrose]

I saw this issue with createStylesContext as well. It seems odd that they would deprecate the original StylesProvider for this new approach, since the Chakra docs currently don't explain it or what it does.

[csandman]

@matthewrose it does seem odd, but my solution was just to stop using the old and new methods entirely just to not have to think about it.

The Chakra docs could definitely use some work though...