[Request] How to consume library section in docs

[luckylooke]

Hello 👋
Thanks for sharing.. ❤️

Could you please write section, how to consume result library?

I think I do know how I should use component:

    <exported-component1 first-name="Ctibko" last-name="Lucky" />

import { ExportedComponent1 } from 'my-lib';

...

copmonents: {
  ExportedComponent1
}

but I am getting errors

[Vue warn]: $attrs is readonly.

found in

---> <ExportedComponent1>

also

[Vue warn]: $listeners is readonly.

found in

---> <ExportedComponent1>

I have checked implementation and didn't see any attempts to write into those properties 🤷

Also I am not sure how to import styles. I have tried following in my scss:

@import '~my-lib/dist/styles.css';

also

@import '~my-lib/styles.css';

Getting error: "Module not found: Error: Can't resolve 'my-lib/styles.css'"
And what if I want to consume SCSS vars from library in app project? 🤷

Thank you for any help 🙏

[przemkow]

Hi @luckylooke! Thanks for creating an issue, indeed Readme file of that project requires additional work (originally it was created as an example under this issue: vuejs/rollup-plugin-vue#343)

About your problem, I think you are doing everything right.
Here is a commit with an example of how to install a component:
(i used dependency in .tgz file created by npm pack)
6d93e8c

1. your consumer package.json needs to include dependency:

  "dependencies": {
    "vue": "^2.6.11",
    "my-lib": "1.0.0" //if you published your dependency on NPM
    "my-lib": "git+ssh://[email protected]:username/my-lib.git#v1.0.0" // if you want to install tag from github
  },

2. Import Component (exactly like you did)
3. Import styles (when style property inside package.json points to correct css file in scss you can do @import '~my-lib', otherwise you need to point to @import '~my-lib/dist/styles.css')

About warning: [Vue warn]: $listeners is read-only. Unfortunately, I'm not able to reproduce it. If this answer does not resolve your problem could you create an example repository with steps to reproduce it?

[luckylooke]

Hi, thanks for rapid answer

style property inside package.json points to correct css file
I have checked, it does 👍 but still even with @import '~my-lib' I am getting error

./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/styles/main.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

undefined
       ^
      Can't find stylesheet to import.
   ╷
13 │ @import '~my-lib';
   │         ^^^^^^^^^^

but at least it changed formulation
from Module not found: Error: Can't resolve to Can't find stylesheet to import 🤷

Relating to second problem "[Vue warn]: $listeners is read-only"
Meanwhile I am trying to get luck with https://github.com/team-innovation/vue-sfc-rollup so if it hits same problem I will probably try to reproduce it somewhere online and post it, thanks 🙏

[luckylooke]

I have hit pretty same problem with vue-sfc-rollup. But this time I google more and found slution.
I have added:

    resolve: {
      alias: {
        // fixes $attrs/$listeners errors
        vue: path.resolve("./node_modules/vue")
      }
    }

into my application (understand library consumer) webpack config
and it solves this issue
happy coding 👍