"Nuxt refuse de reconnaître ma bibliothèque de composants Vue (vuecli) personnalisée avec le message d'erreur 'Impossible de trouver le fichier de déclaration du module'"

Question

J'ai construit une petite bibliothèque de composants Vue en utilisant le projet VueCLI réalisé dans ce tutoriel : https://javascript.plainenglish.io/how-to-create-test-bundle-vue-components-library-8c4828ab7b00

Bibliothèque de composants

Le projet VueCLI est mis en place à l'aide de Typescript et est donc livré avec plusieurs *.d.ts fichiers :

// 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;
}

Mon fichier index.ts est l'endroit où j'exporte tout

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

export {
  ATag,
  AnotherThing,
  ...
};

et mon fichier package.json :

{
  "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/*"
  ]
}

Le script de construction générera plusieurs fichiers JS, un fichier CSS et un dossier pour empaqueter les images.

Mon projet Nuxt n'est qu'un projet passe-partout, j'ai importé la bibliothèque de composants via ssh depuis notre compte bit bucket :

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

Partout où j'essaie d'importer mon composant (en aval, dans mon application Nuxt) comme ceci :

pages/Index.vue

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

J'obtiens cette erreur :

Fichier de déclaration introuvable pour le module 'my-ui-components' qui a implicitement le type 'any'

"ATag.vue" n'a vraiment rien de spécial :

<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>

Alors qu'est-ce qui me manque ? Ce sera ma première expérience avec la dactylographie, donc je ne connais pas les détails.

Je pense que le fichier de déclaration en amont (bibliothèque ui-components) n'est pas utilisé dans le processus de construction, ou qu'il y a un problème avec son Nuxt.

Answer 1

Je pense que c'est à cause de la façon dont vous exportez. Habituellement, j'écris la déclaration d'exportation dans index.ts comme suit

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