Avoid using of `import.meta.env.DEV` since it's not always available

[arianrhodsandlot]

System info

System:
OS: macOS 14.6.1
CPU: (8) arm64 Apple M1 Pro
Memory: 182.86 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.12.0 - ~/.local/state/fnm_multishells/18796_1725511489670/bin/node
Yarn: 1.22.22 - /opt/homebrew/bin/yarn
npm: 8.19.2 - ~/.local/state/fnm_multishells/18796_1725511489670/bin/npm
pnpm: 9.9.0 - /opt/homebrew/bin/pnpm
Browsers:
Edge: 128.0.2739.42
Safari: 17.6
npmPackages:
@vueuse/core: 11.0.3 => 11.0.3
@vueuse/motion: 2.2.3 => 2.2.3

Reproduction

https://stackblitz.com/edit/vitejs-vite-umygq7

Describe the bug

When using the Motion component with CSR, it works perfectly. But when it comes to SSR/SSG, the build process crashes with an error message "Cannot read properties of undefined (reading 'DEV')".

The error seems to be from here:

motion/src/utils/component.ts

Line 198 in c23efca

if (import.meta.env.DEV) {

We cannot ensure the import.meta.env is available when the code is running inside a Node.js process.

Additional context

No response

Logs

No response

[BobbieGoede]

Thanks for reporting and sorry for the late response 🙏

This should be resolved by #236 in v2.2.6, let me know if you're still experiencing issues!

[BobbieGoede]

@arianrhodsandlot
I'm working on #255 to reduce the build size of this package, for some reason my fix in #236 does not work when the build correctly externalizes certain dependencies.

Unfortunately your stackblitz reproduction seems to be deleted, so I can't test whether my changes will reintroduce this issue, do you happen to have a copy of the reproduction locally? 🙏

[BobbieGoede]

I found a copy of the reproduction on my other device, and I think I have found a different solution, so my previous comment can be ignored 😅