[BUG] Currently can't use the package with "@chakra-ui/react": "^2.9.3"

[sirdavis99]

Description

When i pulled the latest release, i am unable to run the react project managed with vite, i get this error

Could not resolve "@chakra-ui/form-control"

node_modules/chakra-react-select/dist/index.js:5:26:
  5 │ var formControl = require('@chakra-ui/form-control')

chakra-react-select Version

5.0.0-rc.8

Link to Reproduction

No response

TypeScript?

• Yes I use TypeScript

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Operating System

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

Additional Information

No response

[lucaslosi]

It seems like this new chakra version removes some dependencies that this package uses. I think it's maybe related to the new chakra v3, making the migration from v2 to v3 more seamless.

I've fixed the error explicitly adding the following packages to my project dependencies:

        "@chakra-ui/form-control": "2.2.0",
        "@chakra-ui/layout":"2.3.1",
        "@chakra-ui/system": "2.6.2",
        "@chakra-ui/media-query": "3.3.0",
        "@chakra-ui/menu": "2.2.1",
        "@chakra-ui/spinner": "2.1.0",

not happy, but...

[Milutin-P]

I got a similar error after updating @chakra-ui dependencies. I'm using "chakra-react-select": "^4.9.2",. It prevents me from starting the project.

"@chakra-ui/icons": "^2.1.1" --> "^2.2.4",
"@chakra-ui/react": "^2.8.2" --> "^2.10.1",

Error Log

✘ [ERROR] Could not resolve "@chakra-ui/form-control"

    node_modules/chakra-react-select/dist/index.mjs:4:31:
      4 │ import { useFormControl } from '@chakra-ui/form-control';
        ╵                                ~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@chakra-ui/form-control" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@chakra-ui/system"

    node_modules/chakra-react-select/dist/index.mjs:5:89:
      5 │ import { useTheme, useMultiStyleConfig, useStyleConfig, useColorModeValue, chakra } from '@chakra-ui/system';
        ╵                                                                                          ~~~~~~~~~~~~~~~~~~~

  You can mark the path "@chakra-ui/system" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@chakra-ui/layout"

    node_modules/chakra-react-select/dist/index.mjs:6:29:
      6 │ import { Box, Divider } from '@chakra-ui/layout';
        ╵                              ~~~~~~~~~~~~~~~~~~~

  You can mark the path "@chakra-ui/layout" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@chakra-ui/media-query"

    node_modules/chakra-react-select/dist/index.mjs:7:35:
      7 │ import { useBreakpointValue } from '@chakra-ui/media-query';
        ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@chakra-ui/media-query" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@chakra-ui/icon"

    node_modules/chakra-react-select/dist/index.mjs:9:21:
      9 │ import { Icon } from '@chakra-ui/icon';
        ╵                      ~~~~~~~~~~~~~~~~~

  You can mark the path "@chakra-ui/icon" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@chakra-ui/spinner"

    node_modules/chakra-react-select/dist/index.mjs:10:24:
      10 │ import { Spinner } from '@chakra-ui/spinner';
         ╵                         ~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@chakra-ui/spinner" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@chakra-ui/menu"

    node_modules/chakra-react-select/dist/index.mjs:11:31:
      11 │ import { MenuIcon, Menu } from '@chakra-ui/menu';
         ╵                                ~~~~~~~~~~~~~~~~~

  You can mark the path "@chakra-ui/menu" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

<PROJECT_DIR>/node_modules/esbuild/lib/main.js:1472
  let error = new Error(text);
              ^

Error: Build failed with 7 errors:
node_modules/chakra-react-select/dist/index.mjs:4:31: ERROR: Could not resolve "@chakra-ui/form-control"
node_modules/chakra-react-select/dist/index.mjs:5:89: ERROR: Could not resolve "@chakra-ui/system"
node_modules/chakra-react-select/dist/index.mjs:6:29: ERROR: Could not resolve "@chakra-ui/layout"
node_modules/chakra-react-select/dist/index.mjs:7:35: ERROR: Could not resolve "@chakra-ui/media-query"
node_modules/chakra-react-select/dist/index.mjs:9:21: ERROR: Could not resolve "@chakra-ui/icon"
...
    at failureErrorWithLog (<PROJECT_DIR>/node_modules/esbuild/lib/main.js:1472:15)
    at <PROJECT_DIR>/node_modules/esbuild/lib/main.js:945:25
    at <PROJECT_DIR>/node_modules/esbuild/lib/main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v20.17.0
error Command failed with exit code 1.

[csandman]

Sorry for the delay, I will take a look at this tonight or tomorrow when I get a chance.

[csandman]

Ok this should be fixed in v4.10.0! Please give it a shot any let me know if the issue is fixed for you. If it isn't, I'll reopen this issue.

Also @sirdavis99, if you're using the release candidate version, I published a new version for that as well, v5.0.0-rc.9. This will be the official version very soon, and is basically ready to go, so feel free to keep using that instead. I've just been procrastinating writing a migration guide for it.

[Milutin-P]

@csandman Thank you for your efforts. After upgrading I did not find any issues.