0

I made my own NPM package with a Vue component inside. At first I didn't use any building system, it was just a basic package with package.json and an src folder with a single *.vue component file and a main file index.js. I was exporting the component like this in my index.js:

module.exports = require('./TagsInput.vue');

The component worked fine when I installed it into a Laravel project.

Then I decided to use the webpack-simple vue-cli template to be able to build my package into the dist folder and I can't get things to work. The package builds fine when I build it from the package folder. But in Laravel I started getting this error:

TypeError: "exports" is read-only

Then I changed the index.js to this:

import TagsInput from './TagsInput.vue'

Vue.config.keyCodes.backspace = 8;
Vue.component('tags-input', TagsInput);

export { TagsInput }

export default TagsInput

And now I'm getting this error:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <TagsInput>
...
Alexander
  • 631
  • 1
  • 8
  • 19
  • You should not have two exports in your index.js. Make sure to check this answer which allows you to create a vue npm library from scratch https://stackoverflow.com/questions/47754244/how-to-create-and-publish-a-vuejs-component-on-npm/47757050#47757050 maybe you will find where the error is comming from – samayo Dec 25 '17 at 08:28
  • I saw the 2 exports in someone else's package. I tried it with a single export, nothing I was able to google worked so far. The package builds and works fine outside of Laravel. – Alexander Dec 25 '17 at 09:20

0 Answers0