All minor versions after 2.8.2 may be broken due to a completely changed package structure #8942

elboletaire · 2024-10-15T13:39:10Z

elboletaire
Oct 15, 2024

Description

Upgrading Chakra UI from 2.8.2 to 2.9 or 2.10 shouldn’t be an issue at all, since they are considered minor versions, but the distribution of the packages is completely different, causing projects dependent on older dependencies to completely break.

Also, the versions after 2.8.2 are not tagged here on GitHub, which adds even more confusion.

Here's the version 2.8.2 package.json file:

< 2.9.0 package.json

{
  "name": "@chakra-ui/react",
  "version": "2.8.2",
  "description": "Responsive and accessible React UI components built with React and Emotion",
  "main": "dist/index.js",
  "files": [
    "dist"
  ],
  "sideEffects": false,
  "publishConfig": {
    "access": "public"
  },
  "dependencies": {
    "@chakra-ui/accordion": "2.3.1",
    "@chakra-ui/alert": "2.2.2",
    "@chakra-ui/avatar": "2.3.0",
    "@chakra-ui/breadcrumb": "2.2.0",
    "@chakra-ui/button": "2.1.0",
    "@chakra-ui/card": "2.2.0",
    "@chakra-ui/checkbox": "2.3.2",
    "@chakra-ui/close-button": "2.1.1",
    "@chakra-ui/control-box": "2.1.0",
    "@chakra-ui/counter": "2.1.0",
    "@chakra-ui/css-reset": "2.3.0",
    "@chakra-ui/editable": "3.1.0",
    "@chakra-ui/focus-lock": "2.1.0",
    "@chakra-ui/form-control": "2.2.0",
    "@chakra-ui/hooks": "2.2.1",
    "@chakra-ui/icon": "3.2.0",
    "@chakra-ui/image": "2.1.0",
    "@chakra-ui/input": "2.1.2",
    "@chakra-ui/layout": "2.3.1",
    "@chakra-ui/live-region": "2.1.0",
    "@chakra-ui/media-query": "3.3.0",
    "@chakra-ui/menu": "2.2.1",
    "@chakra-ui/modal": "2.3.1",
    "@chakra-ui/number-input": "2.1.2",
    "@chakra-ui/pin-input": "2.1.0",
    "@chakra-ui/popover": "2.2.1",
    "@chakra-ui/popper": "3.1.0",
    "@chakra-ui/portal": "2.1.0",
    "@chakra-ui/progress": "2.2.0",
    "@chakra-ui/provider": "2.4.2",
    "@chakra-ui/radio": "2.1.2",
    "@chakra-ui/react-env": "3.1.0",
    "@chakra-ui/select": "2.1.2",
    "@chakra-ui/skeleton": "2.1.0",
    "@chakra-ui/skip-nav": "2.1.0",
    "@chakra-ui/slider": "2.1.0",
    "@chakra-ui/spinner": "2.1.0",
    "@chakra-ui/stat": "2.1.1",
    "@chakra-ui/stepper": "2.3.1",
    "@chakra-ui/styled-system": "2.9.2",
    "@chakra-ui/switch": "2.1.2",
    "@chakra-ui/system": "2.6.2",
    "@chakra-ui/table": "2.1.0",
    "@chakra-ui/tabs": "3.0.0",
    "@chakra-ui/tag": "3.1.1",
    "@chakra-ui/textarea": "2.1.2",
    "@chakra-ui/theme": "3.3.1",
    "@chakra-ui/theme-utils": "2.0.21",
    "@chakra-ui/toast": "7.0.2",
    "@chakra-ui/tooltip": "2.3.1",
    "@chakra-ui/transition": "2.1.0",
    "@chakra-ui/utils": "2.0.15",
    "@chakra-ui/visually-hidden": "2.2.0"
  },
  "peerDependencies": {
    "@emotion/react": "^11.0.0",
    "@emotion/styled": "^11.0.0",
    "framer-motion": ">=4.0.0",
    "react": ">=18",
    "react-dom": ">=18"
  },
  "author": "Segun Adebayo <sage@adebayosegun.com>",
  "license": "MIT",
  "homepage": "https://chakra-ui.com/",
  "repository": {
    "type": "git",
    "url": "https://github.com/chakra-ui/chakra-ui",
    "directory": "packages/components/react"
  },
  "keywords": [
    "react",
    "ui",
    "design-system",
    "react-components",
    "uikit",
    "accessible",
    "components",
    "emotion",
    "library",
    "design-system"
  ],
  "storybook": {
    "title": "Chakra UI",
    "url": "https://storybook.chakra-ui.com"
  },
  "devDependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "framer-motion": "^10.16.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "clean-package": "2.2.0"
  },
  "clean-package": "../../../clean-package.config.json",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },
    "./package.json": "./package.json"
  },
  "scripts": {
    "build": "tsup src --dts",
    "dev": "pnpm build:fast -- --watch",
    "clean": "rimraf dist .turbo",
    "typecheck": "tsc --noEmit",
    "build:fast": "tsup src"
  }
}

And here's the 2.9.0 one (and all subsequent ones):

>=2.9.0 package.json

{
  "name": "@chakra-ui/react",
  "version": "2.10.2",
  "description": "Responsive and accessible React UI components built with React and Emotion",
  "main": "dist/cjs/index.cjs",
  "module": "dist/esm/index.mjs",
  "types": "dist/types/index.d.ts",
  "files": [
    "dist"
  ],
  "sideEffects": false,
  "publishConfig": {
    "access": "public"
  },
  "author": "Segun Adebayo <sage@adebayosegun.com>",
  "license": "MIT",
  "homepage": "https://chakra-ui.com/",
  "repository": {
    "type": "git",
    "url": "https://github.com/chakra-ui/chakra-ui",
    "directory": "packages/components/react"
  },
  "keywords": [
    "react",
    "ui",
    "design-system",
    "react-components",
    "uikit",
    "accessible",
    "components",
    "emotion",
    "library",
    "design-system"
  ],
  "storybook": {
    "title": "Chakra UI",
    "url": "https://storybook.chakra-ui.com"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "@zag-js/focus-visible": "^0.31.1",
    "aria-hidden": "^1.2.3",
    "react-fast-compare": "3.2.2",
    "react-focus-lock": "^2.9.6",
    "react-remove-scroll": "^2.5.7",
    "@chakra-ui/hooks": "2.4.2",
    "@chakra-ui/utils": "2.2.2",
    "@chakra-ui/theme": "3.4.6",
    "@chakra-ui/styled-system": "2.11.2"
  },
  "peerDependencies": {
    "@emotion/react": ">=11",
    "@emotion/styled": ">=11",
    "framer-motion": ">=4.0.0",
    "react": ">=18",
    "react-dom": ">=18"
  },
  "devDependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@tanstack/react-table": "^8.10.7",
    "@testing-library/react": "^14.0.0",
    "framer-motion": "10.16.15",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-frame-component": "^5.2.6",
    "react-lorem-component": "^0.13.0",
    "react-hook-form": "^7.48.2",
    "react-icons": "^4.12.0",
    "react-router-dom": "^6.20.1",
    "react-spinners": "^0.13.8"
  },
  "exports": {
    ".": {
      "import": {
        "types": "./dist/types/index.d.ts",
        "default": "./dist/esm/index.mjs"
      },
      "require": {
        "types": "./dist/types/index.d.ts",
        "default": "./dist/cjs/index.cjs"
      }
    },
    "./package.json": "./package.json",
    "./*": {
      "import": {
        "types": "./dist/types/*/index.d.ts",
        "default": "./dist/esm/*/index.mjs"
      },
      "require": {
        "types": "./dist/types/*/index.d.ts",
        "default": "./dist/cjs/*/index.cjs"
      }
    }
  },
  "scripts": {
    "build": "tsup --dts",
    "dev": "pnpm build:fast --watch",
    "clean": "rimraf dist .turbo",
    "typecheck": "tsc --noEmit",
    "build:fast": "tsup"
  }

}

Versions prior to 2.9.0 had more than 50 packages as dependencies, whereas versions after 2.9.0 only have 11 packages.

This should have been considered a major upgrade, since it breaks compatibility with any package built using the included dependencies by the react package, which are not currently included.

n1xx1 · 2024-10-15T15:27:10Z

n1xx1
Oct 15, 2024

The components are now all bundled inside the single @chakra-ui/react package, you shouldn't use the individual packages anymore.

0 replies

elboletaire · 2024-10-15T17:41:35Z

elboletaire
Oct 15, 2024
Author

The components are now all bundled inside the single @chakra-ui/react package, you shouldn't use the individual packages anymore.

Yeah but that should have been a major upgrade.

In my case my project fails due to a dependency which included the individual packages as peer dependencies, so installing @chakra-ui/react in my project worked perfectly, but it's not compatible anymore with the new format.

0 replies

Gwened · 2024-11-15T14:36:42Z

Gwened
Nov 15, 2024

Also got issues with missing libs and functions in chakra-ui libs setup using ^ in package.json's semantic versioning.
For instance, the functions focus() and normalizeEventKey() disappeared from @chakra-ui/utils.
For now, I had to freeze @chakra-ui/react at 2.5.1 and @chakra-ui/utils at 2.0.15.

0 replies

bhainesva · 2024-12-23T17:15:39Z

bhainesva
Dec 23, 2024

Is there any guidance on how to deal with issues when trying to upgrade to 2.9.0? After bumping the version my vite builds fail with:

error during build:
[commonjs--resolver] Missing "./context" specifier in "@chakra-ui/utils" package
    at e (file:///Users/bhaines/.nvm/versions/node/v21.2.0/lib/node_modules/vite/dist/node/chunks/dep-BEhTnQAI.js:45978:25)
    at n (file:///Users/bhaines/.nvm/versions/node/v21.2.0/lib/node_modules/vite/dist/node/chunks/dep-BEhTnQAI.js:45978:627)
    at o (file:///Users/bhaines/.nvm/versions/node/v21.2.0/lib/node_modules/vite/dist/node/chunks/dep-BEhTnQAI.js:45978:1297)

My project isn't importing @chakra-ui/utils anywhere and doesn't have it in its package.json.

1 reply

elboletaire Dec 24, 2024
Author

Use npm list @chakra-ui/utils or yarn why @chakra-ui/utils to detect which package is using it and either update it or open an issue to its owner to update it to latest chakra version.

ajayjoseaji · 2025-03-12T05:02:45Z

ajayjoseaji
Mar 12, 2025

When I try to run any unit test file that includes Chakra UI components, the test fails with the following error:

● Test suite failed to run

    Cannot find module '@chakra-ui/utils/context' from 'node_modules/@chakra-ui/react/dist/cjs/checkbox/checkbox-context.cjs'
    
        Require stack:
      node_modules/@chakra-ui/react/dist/cjs/checkbox/checkbox-context.cjs
      node_modules/@chakra-ui/react/dist/cjs/checkbox/checkbox.cjs
      node_modules/@chakra-ui/react/dist/cjs/index.cjs

I'm using the following dependencies:

    "@chakra-ui/icons": "^1.1.7",
    "@chakra-ui/react": "2.10.6",
    "@chakra-ui/system": "^1.12.1",
    "@chakra-ui/theme-tools": "^2.2.8",
    
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.2.0",

1 reply

ryanahamilton Apr 28, 2025

Hi @ajayjoseaji, I am curious if you found a resolution to this? We are encountering the exact same issue when attempting to upgrade from 2.8.2 to 2.10.7.

Habeebullahi01 · 2025-06-27T12:07:20Z

Habeebullahi01
Jun 27, 2025

I'm facing a similar issue with keyframes for animation. It seems to have been removed from later minor version upgrades. The best fix is still to freeze @chakra-ui/react at 2.8.2 in the package.json, i.e removing the caret (^) before 2.8.2. Thanks @Gwened.
It would've been nice to know all the changes between 2.8.2 and subsequent versions in order to ease migration.

0 replies

Uh oh!

All minor versions after 2.8.2 may be broken due to a completely changed package structure #8942

Uh oh!

Uh oh!

elboletaire Oct 15, 2024

Description

Replies: 6 comments · 2 replies

Uh oh!

n1xx1 Oct 15, 2024

Uh oh!

elboletaire Oct 15, 2024 Author

Uh oh!

Uh oh!

Gwened Nov 15, 2024

Uh oh!

bhainesva Dec 23, 2024

Uh oh!

elboletaire Dec 24, 2024 Author

Uh oh!

ajayjoseaji Mar 12, 2025

Uh oh!

ryanahamilton Apr 28, 2025

Uh oh!

Habeebullahi01 Jun 27, 2025

elboletaire
Oct 15, 2024

Replies: 6 comments 2 replies

n1xx1
Oct 15, 2024

elboletaire
Oct 15, 2024
Author

Gwened
Nov 15, 2024

bhainesva
Dec 23, 2024

elboletaire Dec 24, 2024
Author

ajayjoseaji
Mar 12, 2025

Habeebullahi01
Jun 27, 2025