„Nuxt weigert sich, meine benutzerdefinierte Vue-Komponentenbibliothek (vuecli) zu erkennen, mit der Fehlermeldung „Die Deklarationsdatei des Moduls kann nicht gefunden werden.““
Ich habe eine kleine Vue-Komponentenbibliothek mit dem in diesem Tutorial erstellten VueCLI-Projekt erstellt: https://javascript.plainenglish.io/how-to-create-test-bundle-vue-components-library-8c4828ab7b00
Komponentenbibliothek
Das VueCLI-Projekt wird mit Typescript eingerichtet und enthält daher mehrere *.d.ts Dateien:
// shims-tsx.d.ts
import Vue, { VNode } from 'vue';
declare global {
namespace JSX {
interface Element extends VNode {}
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any
}
}
}
// shims-vue.d.ts
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
In meiner index.ts-Datei exportiere ich alles
import ATag from './components/ATag.vue';
import AnotherThing from './components/AnotherThing.vue';
...
export {
ATag,
AnotherThing,
...
};
und meine package.json-Datei:
{
"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/*"
]
}
Das Build-Skript generiert mehrere JS-Dateien, eine CSS-Datei und einen Ordner zum Packen von Bildern.
Mein Nuxt-Projekt ist nur ein Standardprojekt, ich habe die Komponentenbibliothek per SSH von unserem Bit-Bucket-Konto importiert:
"dependencies": {
"my-ui-components": "git+ssh://git@bitbucket.org:my-account/my-ui-components.git",
}
Wo immer ich versuche, meine Komponente zu importieren (downstream, in meiner Nuxt-App), so:
pages/Index.vue
<script>
import { ATag, AnotherThing } from my-ui-components;
export default {
...
components: {
ATag,
}
...
}
</script>
Ich erhalte diese Fehlermeldung:
Deklarationsdatei für Modul „my-ui-components“, das implizit den Typ „any“ hat, nicht gefunden
„ATag.vue“ ist wirklich nichts Besonderes:
<template>
<span :class="classes"><slot /></span>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
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() : object {
return {
tag: true,
[`${this.type}`]: this.type,
[`${this.shade}`]: this.shade,
[`${this.size}`]: this.size,
'is-rounded': this.rounded,
'is-naked': this.naked,
};
},
},
});
</script>
Was übersehe ich also? Dies wird meine erste Erfahrung mit Typoskript sein, daher kenne ich die Details nicht.
Ich denke, die Deklarationsdatei des Upstreams (UI-Components-Bibliothek) wird im Build-Prozess nicht verwendet, oder es liegt ein Problem mit Nuxt vor.
