vue-demi inside app-extension dependency does not work

danbars commented 2 years ago

What happened?

I'm building a Quasar app extension. Everything worked fine, until I added dependency on @vuelidate/core which depends on vue-demi.

When I try to run the dev-folder, I get the error: Module not found: Can't resolve imported dependency "@vue/composition-api/dist/vue-composition-api.mjs"

I'm using quasar2 / vue3 so I'm not supposed to install that dependency. When using Vuelidate in a standard Quasar app directly, not via AE, everything works fine.

What did you expect to happen?

I didn't expect that error :)

Reproduction URL

https://github.com/joyform/quasar-form-viewer

How to reproduce?

Sorry that I can't show that in codepen because it's related to AE.

clone the repo
run npm i inside /ui
run npm i inside /ui/dev
from within /ui or from /ui/dev/ folder, run npm run dev (they run the same thing)

You'll see the error in terminal

To make everything work again:

In /ui/src/components/TyFormViewer comment out line 158 import { buildValidationRules } from '../utils/utils' and line 199 reactiveValidationRules.value = buildValidationRules(reactiveFormData, reactiveFormSchema)
I don't think it's needed, but maybe I'm wrong: run npm uninstall @vuelidate/core @vuelidate/validators

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

App Extension API

Platforms/Browsers

Chrome, Other

Quasar info output

Operating System        Darwin(20.6.0) - darwin/x64
NodeJs                  14.17.4

Global packages         
  NPM                   8.3.0
  yarn                  Not installed
  @quasar/cli           1.1.2
  @quasar/icongenie     2.5.0
  cordova               Not installed

Networking              
  Host                  *****
  en0                   192.168.***.***

Relevant log output

Dev mode.......... spa
 Pkg quasar........ v2.4.2
 Pkg @quasar/app... v3.2.6
 Pkg webpack....... v5
 Debugging......... enabled

 Configured browser support (>= 89.47% of global marketshare):
 · Chrome for Android >= 96
 · Firefox for Android >= 94
 · Android >= 96
 · Chrome >= 87
 · Edge >= 93
 · Firefox >= 86
 · iOS >= 12.0-12.1
 · Opera >= 78
 · Safari >= 13

 App • ⚠️  ️️Setting port to closest one available: 8081

 App • Chaining "UI" Webpack config
 App •  WAIT  • Compiling of "UI" in progress...
 App •  DONE  • "UI" compiled with errors • 11891ms

 App •  ERROR  •  UI  in ../node_modules/vue-demi/lib/index.mjs

Module not found: Can't resolve imported dependency "@vue/composition-api/dist/vue-composition-api.mjs"
Did you forget to install it? You can run: yarn add @vue/composition-api/dist/vue-composition-api.mjs

 App •  COMPILATION FAILED  • Please check the log above for details.

Additional context

This is not a browser/os specific issue. It happens in bundling time

danbars commented 2 years ago

Is there anything that I can do to help reproducing it? I know that git link is not ideal, but I couldn't make a codepen for this due to the nature of the project.

MilosPaunovic commented 2 years ago

You could create a minimal reproduction repo and make it public, so someone could investigate a bit further.

quasarframework / quasar