QV2: Component Library - resolveComponent can only be used in render() or setup().

See original GitHub issue

Description: I’m taking a stab at V2 CLI with a branch of some of my projects.

Locally on a monorepo, I have two apps, that share a component library (that wraps quasar components to expand upon some of their features).

Upon upgrading and loading the component package as a plugin, I receive the error:

runtime-core.esm-bundler.js?d941:38 [Vue warn]: resolveComponent can only be used in render() or setup().

//boot for component
export default boot(({ app, store }) => {
  app.use(MyLibrary, store);
});
//assume fancy features
<template>
  <q-btn />
</template>
<script>
import {defineComponent} from 'vue';
export default defineComponent({
  name: "BaseButton",
});
</script>

This one works fine

<template>
  <div />
</template>
<script>
import {defineComponent} from 'vue';
export default defineComponent({
  name: "BaseButton",
});
</script>

I tested on fresh installs. and checked for differing versions of vue. Everything appears to be fine there. Additionally, switching <q-btn> to <div> seems to tell me everything is loaded correctly.

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem. image image

Platform (please complete the following information): Operating System - Darwin(18.7.0) - darwin/x64 NodeJs - 12.13.0

Global packages NPM - 6.12.0 yarn - 1.22.5 @quasar/cli - 1.1.3 @quasar/icongenie - Not installed cordova - Not installed

Important local packages quasar - 2.0.0-beta.3 – Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time @quasar/app - 3.0.0-beta.3 – Quasar Framework local CLI @quasar/extras - 1.9.16 – Quasar Framework fonts, icons and animations eslint-plugin-quasar - Not installed vue - 3.0.5 – vue vue-router - 4.0.3 vuex - 4.0.0 – state management for Vue.js electron - Not installed electron-packager - Not installed electron-builder - Not installed @babel/core - 7.12.3 – Babel compiler core. webpack - 4.44.1 – Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, … and your custom stuff. webpack-dev-server - 3.11.0 – Serves a webpack app. Updates the browser on changes. workbox-webpack-plugin - Not installed register-service-worker - 1.7.1 – Script for registering service worker, with hooks typescript - 4.1.3 – TypeScript is a language for application scale JavaScript development @capacitor/core - Not installed @capacitor/cli - Not installed @capacitor/android - Not installed @capacitor/ios - Not installed

Quasar App Extensions @quasar/quasar-app-extension-qenv - 1.0.4 – Load targeted variables into your quasar project

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

8reactions
IlCallocommented, Feb 9, 2021

Can you be more specific? So other people coming here with the same problem will have a better explanation

4reactions
geraldbiggscommented, Feb 8, 2021

Discovered issue with how the project was hoisting resources.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vue 3: resolveComponent can only be used in render() or ...
The template contains a component, which is locally registered on the instance. import template from './template' import RenderlessPagination ...
Read more >
Component isn't correctly resolved - Get Help - Vue Forum
Now the problem is that I have a component in the common library ... [Vue warn]: resolveComponent can only be used in render()...
Read more >
resolvecomponent can only be used in render() or setup() - 掘金
vue warn resolvecomponent can only be used in render() or setup(). Vue报错: resolvecomponent can only be used in render() or setup(). 原因:在父组件中export ...
Read more >
How to create Vue package that imports another component ...
[Vue warn]: resolveComponent can only be used in render() or setup(). Running down that error, was not so much helpful in and of...
Read more >
Building a Vue 3 component library - LogRocket Blog
Server-side rendering build. However, I've just shown how to configure the CommonJS and ES module builds below. You can find details for other ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found