c-modal: Failed to resolve import "@vueuse/motion" occurs due to lack of the package in dependencies

[AumyF]

Bug report

Describe the bug

Vite fails to update dependencies because of lack of @vueuse/motion in @chakra-ui/c-modal

To reproduce

1. Clone https://github.com/AumyF/chakra-vue-next-vite-test
2. npm i
3. npx vite
4. See error
5. Once you explicitly add "@vueuse/motion" to project dependencies, this error will not occur

7:57:27 AM [vite] new dependencies found: @chakra-ui/vue-next, updating...
 > node_modules/@chakra-ui/c-modal/dist/esm/c-drawer.js:12:44: error: Could not resolve "@vueuse/motion" (mark it as external to exclude it from the bundle)
    12 │ import { MotionDirective, useMotions } from '@vueuse/motion';
       ╵                                             ~~~~~~~~~~~~~~~~

 > node_modules/@chakra-ui/c-modal/dist/esm/c-modal.js:18:44: error: Could not resolve "@vueuse/motion" (mark it as external to exclude it from the bundle)
    18 │ import { MotionDirective, useMotions } from '@vueuse/motion';
       ╵                                             ~~~~~~~~~~~~~~~~

7:57:27 AM [vite] error while updating dependencies:
Error: Build failed with 2 errors:
node_modules/@chakra-ui/c-modal/dist/esm/c-drawer.js:12:44: error: Could not resolve "@vueuse/motion" (mark it as external to exclude it from the bundle)
node_modules/@chakra-ui/c-modal/dist/esm/c-modal.js:18:44: error: Could not resolve "@vueuse/motion" (mark it as external to exclude it from the bundle)
    at failureErrorWithLog (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:1449:15)
    at /home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:1131:28
    at runOnEndCallbacks (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:921:63)
    at buildResponseToResult (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:1129:7)
    at /home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:1236:14
    at /home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:609:9
    at handleIncomingPacket (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:706:9)
    at Socket.readFromStdout (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/esbuild/lib/main.js:576:7)
    at Socket.emit (node:events:394:28)
    at Socket.emit (node:domain:470:12)
7:57:28 AM [vite] Internal server error: Failed to resolve import "@vueuse/motion" from "node_modules/@chakra-ui/c-modal/dist/esm/c-modal.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/@chakra-ui/c-modal/dist/esm/c-modal.js
  16 |  import { CAnimatePresence, CMotion } from '@chakra-ui/c-motion';
  17 |  import { CCloseButton } from '@chakra-ui/c-close-button';
  18 |  import { MotionDirective, useMotions } from '@vueuse/motion';
     |                                               ^
  19 |  import { useModal } from './use-modal';
  20 |  import { dialogMotionPresets } from './modal-transitions';
      at formatError (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50738:46)
      at TransformContext.error (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50734:19)
      at normalizeUrl (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:74223:26)
      at async TransformContext.transform (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:74356:57)
      at async Object.transform (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50939:30)
      at async transformRequest (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:66763:29)
      at async viteTransformMiddleware (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:66904:32)
7:57:28 AM [vite] Internal server error: Failed to resolve import "@vueuse/motion" from "node_modules/@chakra-ui/c-modal/dist/esm/c-drawer.js". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/@chakra-ui/c-modal/dist/esm/c-drawer.js
  10 |  import { chakra, useStyles, useTheme } from '@chakra-ui/vue-system';
  11 |  import { CModal, modalProps, useModalContext } from './c-modal';
  12 |  import { MotionDirective, useMotions } from '@vueuse/motion';
     |                                               ^
  13 |  import { useId } from '@chakra-ui/vue-composables';
  14 |  
      at formatError (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50738:46)
      at TransformContext.error (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50734:19)
      at normalizeUrl (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:74223:26)
      at async TransformContext.transform (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:74356:57)
      at async Object.transform (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:50939:30)
      at async transformRequest (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:66763:29)
      at async viteTransformMiddleware (/home/u/ghq/github.com/aumyf/chakra-vue-next-vite-test/node_modules/vite/dist/node/chunks/dep-c1a9de64.js:66904:32)

Minimal reproduction

https://github.com/AumyF/chakra-vue-next-vite-test

Expected behavior

Build correctly

System information

• OS: Ubuntu 20.04 on WSL (Windows 10 21H1)
• Version of @chakra-ui/core: 1.0.0-alpha.8
• Version of Node.js: 16.5.0

[codebender828]

Hi @AumyF Good catch! It seems this issue is caused by the @vueuse/motion plugin not being required by the @chakra-ui/vue-next package. 😬

chakra-ui-vue-next/packages/core/package.json

Lines 32 to 59 in 7530694

	"dependencies": {
	"@chakra-ui/c-accordion": "0.1.0-alpha.5",
	"@chakra-ui/c-alert": "1.0.0-alpha.5",
	"@chakra-ui/c-breadcrumb": "1.0.0-alpha.5",
	"@chakra-ui/c-button": "1.0.0-alpha.5",
	"@chakra-ui/c-close-button": "0.1.0-alpha.5",
	"@chakra-ui/c-code": "1.0.0-alpha.5",
	"@chakra-ui/c-color-mode": "0.1.0-alpha.4",
	"@chakra-ui/c-flex": "1.0.0-alpha.5",
	"@chakra-ui/c-focus-lock": "0.1.0-alpha.3",
	"@chakra-ui/c-icon": "1.0.0-alpha.5",
	"@chakra-ui/c-modal": "1.1.0-alpha.4",
	"@chakra-ui/c-motion": "0.1.0-alpha.4",
	"@chakra-ui/c-popper": "0.1.0-alpha.5",
	"@chakra-ui/c-portal": "0.1.0-alpha.5",
	"@chakra-ui/c-reset": "1.0.0-alpha.5",
	"@chakra-ui/c-scroll-lock": "0.1.0-alpha.3",
	"@chakra-ui/c-spinner": "1.0.0-alpha.5",
	"@chakra-ui/c-theme-provider": "1.0.0-alpha.5",
	"@chakra-ui/c-visually-hidden": "1.0.0-alpha.5",
	"@chakra-ui/styled-system": "^1.10.0",
	"@chakra-ui/utils": "^1.8.0",
	"@chakra-ui/vue-a11y": "0.1.0-alpha.4",
	"@chakra-ui/vue-composables": "0.1.0-alpha.4",
	"@chakra-ui/vue-layout": "0.1.0-alpha.6",
	"@chakra-ui/vue-system": "0.1.0-alpha.5",
	"@chakra-ui/vue-theme": "0.1.0-alpha.5",
	"@chakra-ui/vue-theme-tools": "0.1.0-alpha.5"

Monorepos can be hard sometimes.

Would you mind opening a PR including it? We can review it and merge it if you need this in a hurry. Thankfully there is also a work around for this:

Workaround:

yarn add @vueuse/motion