Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Build app

Operating System

macOS
Windows
Linux
iOS/iPadOS
Android

Additional Information

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

benjamincharitycommented, Jul 22, 2022

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!

1reaction

csandmancommented, Jul 20, 2022

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/system@2.0.0 as I thought, it was actually added in @chakra-ui/system@2.1.2. 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.