Error when using vueuse/motion in SSR app-vite production and app-webpack

[lukadriel7]

Hello, I am currently using quasar/app-vite and trying to add vueuse/motion to a project. It works without any problem in dev but the production mode shows an error:

Instead change the require of D:\DiskC\Documents\VSCode\Quasar\test\test-ssr\node_modules\@vueuse\motion\dist\index.mjs to a dynamic import() which is available in all CommonJS modules.
    at Module.<anonymous> (D:\DiskC\Documents\VSCode\Quasar\test\test-ssr\dist\ssr\server\server-entry.js:1:960)
    at Object.<anonymous> (D:\DiskC\Documents\VSCode\Quasar\test\test-ssr\dist\ssr\index.js:1:1517)
    at Object.<anonymous> (C:\Users\User\AppData\Local\Yarn\Data\global\node_modules\@quasar\cli\bin\quasar-serve:113:5)
    at Object.<anonymous> (C:\Users\User\AppData\Local\Yarn\Data\global\node_modules\@quasar\cli\bin\quasar:29:3) {
  code: 'ERR_REQUIRE_ESM'
}

I tried on webpack but got a similar error even in dev:

[Quasar Dev Webserver] / -> error during render
Error [ERR_REQUIRE_ESM]: require() of ES Module D:\DiskC\Documents\VSCode\Quasar\quasar-project\node_modules\@vueuse\motion\dist\index.mjs not supported.
Instead change the require of D:\DiskC\Documents\VSCode\Quasar\quasar-project\node_modules\@vueuse\motion\dist\index.mjs to a dynamic import() which is available in all CommonJS modules.

My guess is that it is because the server uses CommonJS but tries to require an ES module. Has anyone encountered this problem before or know how to solve it ?

[suleimanas]

it has nothing to do with quasar, but i did encountered this problem with other packages before.
Try to dynamically import it:
const module = (await import('module')).default

[lukadriel7]

Yes you are right, it is an error on the vueuse/motion package. I just made a pull request to fix it.

[lukadriel7]

Fixed in latest beta of @vueuse/motion