Upgrade to Quasar v2 (Beta) errors

[ssuess]

I have tried several times to make it through the upgrade guide at https://next.quasar.dev/start/upgrade-guide and have encountered a host of errors. I keep coming back to it and finding ways to get a little further (by removing packages, modifying them for vue3, changing parts of my config, etc). It has been anything but smooth. Still, I keep trying to make it work, and starting the dev server seems to get a little further each time.

but I am currently stuck on the following error:

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



 App •  ERROR  •  UI  in ./src/App.vue

TypeError: Cannot read property 'parseComponent' of undefined

  - parse.js:15 parse
    [my-project]/[@vue]/component-compiler-utils/dist/parse.js:15:23




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

Really, it looks like that above, with all the weird spacing. And where is this mysterious log "above" with details? Is that single line the detail? Since that seems to be a part of vue itself, I am not sure what I am supposed to do about this error. Any clue? The referenced file, "App.vue" looks exactly like this:

<template>
  <router-view />
</template>

<script>
export default {
  name: 'App'
}
</script>

Can anyone give me a clue? Thanks!

[smolinari]

Which option did you take? If you took 1, did you try 2?

Scott

[ssuess]

You mean creating a brand new project and then trying to migrate everything (instead of migrating in place)? No, not yet I was hoping to avoid it, although if I have to I will.

[smolinari]

Yeah. The idea with starting from a fresh project is when you bring in chunks of your app, you know if something breaks, it's because of your code and not with the process of rearranging things for the upgrade. 😃

Scott

[rstoenescu]

How does your package.json look like? Feels like you've manually installed packages which override q/app's one.

[ssuess]

I wouldn't say that I have installed packages which override quasar so much as add functionality that I needed on top of quasar.
I have spent the last couple of hours creating a new app and trying to port in all my stuff. It seems that the overwhelming number of problems are related to things that are not compatible with vue3 or webpack:

• packages that are still using old syntax of Vue.use
• significant number of places my app was making use of the event bus which is no longer supported. I have installed mitt, but I have a LOT of rewriting to do to make all of these work
• webpack plugins that are not supported (or I need to figure out how to get them to work)
• webpack things like publicPath which no longer seem to be supported. (I have commented them out while I try to solve other issues)

[ssuess]

The saga continues, with a seemingly endless number of things that will need to change, many I am completely stuck on like

[Vue warn]: Failed to resolve component: app-nav-bar 
  at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> runtime-core.esm-bundler.js:140:17
[Vue warn]: Failed to resolve component: i18n 
  at <MainLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> runtime-core.esm-bundler.js:140:17

The above are but two (of many) that have this kind of problem. The first is a webcomponent that I was using without issue in the previous version (and if I add v-pre the error goes away, but then the component won't render any more -- it is inside a q-drawer component)

The second is slightly (or seems slightly to me) modified version of the i18n boot file:

import { boot } from 'quasar/wrappers'
import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'

const i18n = createI18n({
  locale: 'en-GB',
  fallbackLocale: 'en-GB',
  silentFallbackWarn: true,
  silentTranslationWarn: true,
  // enableInSFC: true,
  messages
})

export default boot(({ app }) => {
  // Set i18n instance on app
  app.use(i18n)
})

export { i18n }

At least for now, the work needed to port my app to the latest quasar and Vue3 seems quite extraordinary.