Rollup fails to resolve @vue/reactivity with @vueuse/components v10

[wopian]

Describe the bug

After upgrading to version 10 of @vueue/components, builds of our vue3 vite app fail because Rollup cannot find the @vue/reactivity import in @vueuse/components/index.mjs

This bug appears to have been introduced via f87f877 which adds the import on @vue/reactivity without declaring it as a peer dependency.

Error log

[vite]: Rollup failed to resolve import "@vue/reactivity" from "[system path]/node_modules/@vueuse/components/index.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "@vue/reactivity" from "[system path]/node_modules/@vueuse/components/index.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (file:///[system path]/node_modules/vite/dist/node/chunks/dep-79892de8.js:46368:19)
    at onwarn (file:///[system path]/node_modules/vite/dist/node/chunks/dep-79892de8.js:46138:13)
    at Object.onwarn (file:///[system path]/node_modules/rollup/dist/es/shared/node-entry.js:25149:13)
    at ModuleLoader.handleInvalidResolvedId (file:///[system path]/node_modules/rollup/dist/es/shared/node-entry.js:23784:26)
    at file:///[system path]node_modules/rollup/dist/es/shared/node-entry.js:23744:26
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Reproduction

https://github.com/wopian/vueuse-repro2

Reproduction Steps

1. Have Yarn installed on system
2. Run yarn to install dependencies with Yarn 3.5.0
3. Run yarn build to build the Vite 4 app

System Info

System:
    OS: macOS 13.3
    CPU: (8) arm64 Apple M1
    Memory: 99.84 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 19.9.0 - /opt/homebrew/bin/node
    Yarn: 3.5.0 - /opt/homebrew/bin/yarn
    npm: 9.6.3 - /opt/homebrew/bin/npm

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[wopian]

Thank you for the super quick fix! ❤️

[wanming1994]

Hi,how to fix this?

[wanming1994]

Rollup failed to resolve import "@vue/reactivity" from "/usr/local/myTomcat/tomcat/webapps/jenkins/workspace/finchina-ep-pc-new-dev/node_modules/.pnpm/element-plus@2.5.3_vue@3.2.47/node_modules/element-plus/es/hooks/use-lockscreen/index.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external�[39m
�[31merror during build:
Error: [vite]: Rollup failed to resolve import "@vue/reactivity" from "/usr/local/myTomcat/tomcat/webapps/jenkins/workspace/finchina-ep-pc-new-dev/node_modules/.pnpm/element-plus@2.5.3_vue@3.2.47/node_modules/element-plus/es/hooks/use-lockscreen/index.mjs".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external

[wopian]

@wanming1994 your error has nothing to do with this repository. Report the issue to the element-plus developers. They do the same bad behaviour as reported in this issue (that was fixed in vueuse/components)