Nuxt(2) is rejecting my custom Vue2 (Vue-CLI) component library

Viewed 93

I built a small Vue component library with a VueCLI project I made using this tutorial: https://javascript.plainenglish.io/how-to-create-test-bundle-vue-components-library-8c4828ab7b00

When I try to import these components into nuxt, say in the pages/index.vue file I get this error:

TypeError: Cannot read properties of undefined (reading 'call')
    at __webpack_require__ (my-ui-components.common.js?75f2:7584:1)
    at eval (my-ui-components.common.js?75f2:9788:1)
    at eval (my-ui-components.common.js?75f2:12878:1)
    at eval (my-ui-components.common.js?75f2:12880:1)
    at ./node_modules/my-ui-components/dist/my-ui-components.common.js (index.js:10:1)
    at __webpack_require__ (runtime.js:854:30)
    at fn (runtime.js:151:20)
    at eval (index.js?!./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=ts&:5:80)
    at ./node_modules/babel-loader/lib/index.js?!./node_modules/ts-loader/index.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue?vue&type=script&lang=ts& (index.js:11:1)
    at __webpack_require__ (runtime.js:854:30)

This however works just fine in another Vue-CLI project, it's just something with Nuxt.

Component Library

my index.ts file is where I am exporting all my


import ATag from './components/ATag.vue';
import AnotherThing from './components/AnotherThing.vue';
...

export {
  ATag,
  AnotherThing,
  ...
};

and my package.json file:

{
  "name": "my-ui-components",
  "scripts": {
    "build": "vue-cli-service build --target lib --name my-ui-components ./src/index.ts",
  },
  "main": "./dist/my-ui-components.common.js",
  "files": [
    "dist/*"
  ]
}

The build script produces several JS files, a CSS file, and a folder for packaged images.

My Nuxt project is just a boilerplate project where I am importing the component library from our bit bucket account via ssh:

"dependencies": {
  "my-ui-components": "git+ssh://git@bitbucket.org:my-account/my-ui-components.git",
}

and wherever I attempt to import my components (downstream, in my Nuxt app) like this:

pages/Index.vue

<script>
import { ATag, AnotherThing } from my-ui-components;
export default {
  ...
  components: {
    ATag,
    AnotherThing,
  }
  ...
}
</script>

and "ATag.vue" isnt anything special really:

<template>
  <span :class="classes"><slot /></span>
</template>

<script>
import Vue from 'vue';

export default {
  name: 'a-tag',
  props: {
    type: {
      type: String,
      validator(value) {
        return ['is-primary', 'is-success', 'is-warning', 'is-danger'].includes(value);
      },
    },
    shade: {
      type: String,
      validator(value) {
        return ['is-light', 'is-normal'].includes(value);
      },
    },
    size: {
      type: String,
      default: 'is-normal',
      validator(value) {
        return ['is-normal', 'is-medium', 'is-large'].includes(value);
      },
    },
    rounded: {
      type: Boolean,
      default: false,
    },
    naked: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    classes() {
      return {
        tag: true,
        [`${this.type}`]: this.type,
        [`${this.shade}`]: this.shade,
        [`${this.size}`]: this.size,
        'is-rounded': this.rounded,
        'is-naked': this.naked,
      };
    },
  },
};
</script>

So what is it that I am missing? This will be my first type script experience so I dont know the ins and out of it all.

0 Answers
Related