Linking locally a Vue app and a Vue lib --> d.ts issue;

Question

I am facing a problem while trying to split my code between a lib and an app. I want to use Vuejs + TypeScript + WebPack, it seems like a good combination. I encounter some issues while trying to call in the app anything from the lib. It seems like this is about the d.ts files.

// powershell output
13:22 Could not find a declaration file for module 'my-lib'. 'path/my-lib.common.js' implicitly has an 'any' type.
  Try `npm install @types/my-lib` if it exists or add a new declaration (.d.ts) file containing `declare module 'my-lib';`
    11 | // import HelloWorld from "./components/HelloWorld.vue";
    12 |
  > 13 | import sayHello from "my-lib";
       |                      ^
    14 |
    15 | export default Vue.extend({
    16 |   name: "App",

I don't want to bypass problem by setting strict=true. I want to correctly export my symbols in my lib.

My test scenario is pretty simple :

• the lib exports a sayHello method

// helloworld.ts
export function sayHello() {
    console.log('hi')
}

// index.ts
export {sayHello} from './helloworld';

• the app call the sayHello method

// App.vue
<template>
  <div id="app">
    <button v-on:click="showMsg">Click Me</button>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import sayHello from "my-lib";

export default Vue.extend({
  name: "App",
  components: {},
  methods: {
    showMsg: function() {
      sayHello();
    }
  }
});
</script>

(The app works fine if I replace the sayHello by a direct call to console.log)

I have used vue create in order to generate both projects.

On the lib side, I have set the following config:

// package.json
  "name": "my-lib",
  ...
  "private": true,
  "main": "dist/my-lib.common.js",
  "scripts": {
    ...
    "build-lib": "vue-cli-service build --target lib src/index.ts",
    ...

// tsconfig.json
  ...
  "declaration": true,
  "noImplicitAny": true,
  "outDir": "./dist",
  ...

On the appside, I have install the app locally using npm install "../my-lib" (path is ok). I understood that during the development version, it's a good option.

I guess that the problem is somewhere around the d.ts files generation. I thought that tsc was supposed to create them automatically because I'm writting typescript files. But I can't find them. I don't have any d.ts files.

I have tried multiple stuff, like:

• calling tsc -p tscconfig.json manually (some d.ts appeared, but no lib, no understanding of vue files. I need to use my build-lib script)
• adding a vue.config.js (no change at all)

module.exports = {
  configureWebpack: {
    output: {
      libraryExport: "default"
    }
  }
};

• changing names / checking names / etc.
• Found an old but unanswered message

I am kind of a rookie in Web development (I am an experienced software developer). I am trying to put my head around those technologies. I have this strong feeling that I'm missing something with this TypeScript thing. And I might have some c++ reflexes when it comes to symbols exposure in libraries. I don't know.

I can provide more infos, more code portion, etc. I didn't want to be too invasive :)

Thanks you all in advance !

Answer 1

declaration: true in tsconfig.json is supposed to work, but there's an outstanding blocking issue (vue-cli#1081).

The workaround is to run tsc to generate the type declarations:

1. Update tsconfig.json to set compilerOptions.outDir="dist":

   {
     "compilerOptions": {
       "outDir": "dist"
     }
   }
   

2. Update package.json's build script to include the tsc command for generating type declarations:

   {
     "scripts": {
       "build-lib": "vue-cli-service build --target lib src/index.ts && tsc --emitDeclarationOnly -p tsconfig.json"
     }
   }
   

3. Update package.json to specify the main script, and types for the type declaration file:

   {
     "main": "dist/my-lib.umd.js",
     "types": "dist/index.d.ts",
   }