Skip to content

using it in another project #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
KnowsCount opened this issue Apr 21, 2021 · 2 comments
Closed

using it in another project #3

KnowsCount opened this issue Apr 21, 2021 · 2 comments
Labels
good first issue Good for newcomers

Comments

@KnowsCount
Copy link
Owner

KnowsCount commented Apr 21, 2021

to add vue-lib component library I ran

npm install --save @knowscount/vue-lib

and then placed <InputBox /> & import InputBox from '@knowscount/vue-lib, registering the component, yet the page went blank and the folioing error was reported in the console:

[Vue warn]: Error in render: "TypeError: Vue.component is not a function"

found in

---> <App> at src/App.vue
       <Root>
warn @ vue.runtime.esm.js?2b0e:619

and also

vue.runtime.esm.js?2b0e:1888 TypeError: Vue.component is not a function
    at eval (vue-lib.esm.js?ca34:5655)
    at Array.forEach (<anonymous>)
    at installVueLib (vue-lib.esm.js?ca34:5654)
    at resolveAsyncComponent (vue.runtime.esm.js?2b0e:3686)
    at createComponent (vue.runtime.esm.js?2b0e:3200)
    at _createElement (vue.runtime.esm.js?2b0e:3422)
    at createElement (vue.runtime.esm.js?2b0e:3353)
    at vm._c (vue.runtime.esm.js?2b0e:3491)
    at Proxy.render (App.vue?6ad7:13)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
logError @ vue.runtime.esm.js?2b0e:1888
@KnowsCount
Copy link
Owner Author

resolved in team-innovation/vue-sfc-rollup#89.

@KnowsCount
Copy link
Owner Author

KnowsCount commented Apr 22, 2021

Quoting @mgdodge:

If you are writing a library of components, however, you must choose to import the entire library, or use a slightly different syntax to import individual components:

// Import and register entire library
import MyLibrary from '@knowscount/my-library';
Vue.use(MyLibrary);
// Import and register globally individual components from the library
import { MyComponent, MyComponent2 } from '@knowscount/my-library';
Vue.component('MyComponent', MyComponent);
Vue.component('MyComponent2', MyComponent2);
// Import and register locally individual components from the library
import { MyComponent, MyComponent2 } from '@knowscount/my-library';

export default {
  name: 'SomeParentComponent',
  components: {
    MyComponent,
    MyComponent2,
  }
  ...
}

The sample you provided is a library which currently contains a single component. I tested it, and everything works if you follow any of the library example listed.

@KnowsCount KnowsCount changed the title cannot be used using it in another project Apr 22, 2021
@KnowsCount KnowsCount added the good first issue Good for newcomers label Apr 22, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

1 participant