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