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.

vite:dep-pre-bundle cannot resolve entry for some Chakra UI packages

See original GitHub issue

Description

I have a Vite SPA using React and Typescript template from Vite. After installing dependencies and running “yarn dev” which starts the development server, errors like this pop up: “[plugin vite:dep-pre-bundle] Failed to resolve entry for package “@chakra-ui/react-utils”. The package may have incorrect main/module/exports specified in its package.json.”

Link to Reproduction

https://github.com/frle10/chakra-ui-package-versions-bug

Steps to reproduce

Clone repo from link to reproduction
Install dependencies using yarn (yarn berry is set up in the repo, make sure you’re installing with it)
Run yarn dev
See errors in logs from yarn dev that I described

Chakra UI Version

2.2.4

Browser

Google Chrome 103.0.5060.134

Operating System

macOS
Windows
Linux

Additional Information

Some error messages you should see:

[plugin vite:dep-scan] Failed to resolve entry for package "@chakra-ui/react".
The package may have incorrect main/module/exports specified in its package.json.

The plugin "vite:dep-scan" was triggered by this import
    src/main.tsx:4:31:
      4 │ import { ChakraProvider } from '@chakra-ui/react';

Interesting note, if you use yarn 1.22.19 and not yarn berry, everything works normally.

Issue Analytics

State:
Created a year ago
Reactions:7
Comments:13 (3 by maintainers)

Top GitHub Comments

7reactions

thtliifecommented, Jul 26, 2022

This is because the latest published packages are all missing the dist folder. They are all like 2 or 3kb and empty except for readme and package.json For some reason, yarn 2+ is resolving them as the latest versions, even though they appear to have been published with the “dev” tag and not the “latest” one…

My temporary workaround is to address all the affected packages by resolving them to the last patch version with the “resolutions” key at the root of my package.json like below:

{
  "name": "project-name",
  "version": "1.1.1",
  "deps": {
    "some-deps": "^1.0.0",
  },
  "resolutions": {
    "@chakra-ui/accordion": "2.0.6",
    "@chakra-ui/alert": "2.0.4",
    "@chakra-ui/anatomy": "2.0.1",
    "@chakra-ui/avatar": "2.0.5",
    "@chakra-ui/breadcrumb": "2.0.4",
    "@chakra-ui/button": "2.0.4",
    "@chakra-ui/checkbox": "2.1.3",
    "@chakra-ui/clickable": "2.0.4",
    "@chakra-ui/close-button": "2.0.4",
    "@chakra-ui/color-mode": "2.1.2",
    "@chakra-ui/control-box": "2.0.4",
    "@chakra-ui/counter": "2.0.4",
    "@chakra-ui/css-reset": "2.0.1",
    "@chakra-ui/descendant": "3.0.3",
    "@chakra-ui/editable": "2.0.4",
    "@chakra-ui/focus-lock": "2.0.5",
    "@chakra-ui/form-control": "2.0.4",
    "@chakra-ui/hooks": "2.0.4",
    "@chakra-ui/icon": "3.0.4",
    "@chakra-ui/icons": "2.0.4",
    "@chakra-ui/image": "2.0.5",
    "@chakra-ui/input": "2.0.4",
    "@chakra-ui/layout": "2.1.1",
    "@chakra-ui/live-region": "2.0.4",
    "@chakra-ui/media-query": "3.2.0",
    "@chakra-ui/menu": "2.0.6",
    "@chakra-ui/modal": "2.1.2",
    "@chakra-ui/number-input": "2.0.4",
    "@chakra-ui/pin-input": "2.0.6",
    "@chakra-ui/popover": "2.0.4",
    "@chakra-ui/popper": "3.0.2",
    "@chakra-ui/portal": "2.0.4",
    "@chakra-ui/progress": "2.0.5",
    "@chakra-ui/provider": "2.0.9",
    "@chakra-ui/radio": "2.0.5",
    "@chakra-ui/react-env": "2.0.4",
    "@chakra-ui/react": "2.2.4",
    "@chakra-ui/react-utils": "2.0.1",
    "@chakra-ui/select": "2.0.4",
    "@chakra-ui/skeleton": "2.0.9",
    "@chakra-ui/slider": "2.0.4",
    "@chakra-ui/spinner": "2.0.4",
    "@chakra-ui/stat": "2.0.4",
    "@chakra-ui/styled-system": "2.2.3",
    "@chakra-ui/switch": "2.0.6",
    "@chakra-ui/system": "2.2.2",
    "@chakra-ui/table": "2.0.4",
    "@chakra-ui/tabs": "2.0.6",
    "@chakra-ui/tag": "2.0.4",
    "@chakra-ui/textarea": "2.0.5",
    "@chakra-ui/theme": "2.1.3",
    "@chakra-ui/theme-tools": "2.0.5",
    "@chakra-ui/toast": "3.0.2",
    "@chakra-ui/tooltip": "2.0.5",
    "@chakra-ui/transition": "2.0.4",
    "@chakra-ui/utils": "2.0.4",
    "@chakra-ui/visually-hidden": "2.0.4"
  }
}

@frle10 feel free to copy paste that resolutions key, and then do yarn install in your project root… should get you going in the meantime until the bad versions are fixed.

6reactions

segunadebayocommented, Aug 4, 2022

I’m taking a look at this today and will get it fixed.

Top Results From Across the Web

Installation - Chakra UI

How to install and set up Chakra UI in your project.

chakra-react-select - npm

A Chakra UI wrapper for the popular library React Select. ... TypeScript icon, indicating that this package has built-in type declarations.

How to create forms with Chakra UI in React apps

To find the complete reference to style props, please refer to the official documentation here. Some of the common ones you are going...

Code completion and auto-import don't work for Chakra-UI ...

I've noticed that if some Chakra-Ui component has already been imported into ... Delete Node Modules and package-lock.json - Invalidate Cache and Restart...

Chakra UI: Sleek UI Components for React - KnowledgeHut

In the Chakra UI component library, there are several shorthand variations of the style props. The official documentation has a detailed ...