There seems to be something wrong with tree shaking

When I import {useFocusTrap} from "@vueuse/integrations", all the lib is bundled (qrcode, buffer & co … ). repro npm install, npm run dev See stats.html in dist after build.

[antfu]

Oh, that’s a good point and I didn’t notice that as I thought rollup will tree-shake unused modules. But looks like there is also no way to explicitly mark an import statement pure (https://github.com/rollup/rollup/issues/2874). The solution of this that comes up my mind is to separate functions into several sub-modules, e.g.

import {useFocusTrap} from "@vueuse/integrations/useFocusTrap"
import {useQRCode} from "@vueuse/integrations/useQRCode"

What do you think?

If we go that way, it will be a breaking change and I would like to do that in v5.

[milesingrams]

When using the import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component' in a Nuxt 3 project with @vueuse/integrations: 7.3.0 I’m getting the error:

SyntaxError: The requested module '/_nuxt/node_modules/qrcode/lib/browser.js?v=93c8fa7e' does not provide an export named 'default'

It appears that two things may be going on:

1. Tree shaking is not happening and therefore the useQRCode composable is being loaded
2. Somehow the useQRCode composable is possibly incorrectly importing qrcode

However this also may be an issue in Nuxt 3 and how it performs imports? Any help would be much appreciated!