VSCode intellisense on Vue files without importing

[chriscdn]

In your ~/src/components/main.ts file you add the components as globals and export them:

app.component('HelloWorld', HelloWorld);
app.component('MyButton', MyButton);

and

export { HelloWorld, MyButton };

A project can use these components by either installing the plugin and making the components global, or by importing the individual components.

However, VSCode IntelliSense seems to only work if the components are imported. If only installed using app.use(), then IntelliSense doesn't work with the components.

Is this a known issue, and do you know how to address it?

[timenengwerda]

Same issue here so I've subscribed. vue-tsc makes a lot of different .d.ts files of all components; importing one-by-one works fine with intellisense. But the app.component way gives not hinting; the component does work however.

Bear in mind: I do have Vue Language Feature(Volar) and Typescript Vue Plugin(Volar) installed. (With Takeover mode as described in https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode)

[kazeshini178]

After a bit of looking into how ts seems to associate/link *.d.ts files include in packages found that the type file name needs to match entry/export file name.
This would be the name you set for build.lib.fileName in your vite.config.ts file.

i.e: Change

{
// ...
  "types": "./dist/main.d.ts",
// ...
}

to

{
// ...
  "types": "./dist/my-library-vue-ts.es.d.ts", // based on the example
// ...
}

If you export the *.es.js as just *.js then you don't need it in the types property either

This comment on a bug help lead me in the correct direction microsoft/TypeScript#52363 (comment)

[timenengwerda]

These changes have no effect on my machine. I've downloaded (and renamed) your repo, renamed it to tatest and changed the package.json to below.

{
  "name": "tatest",
  "private": false,
  "version": "0.0.1",
  "type": "module",
  "files": [
    "dist"
  ],
  "main": "./dist/tatest.umd.js",
  "module": "./dist/tatest.es.js",
  "exports": {
    ".": {
      "import": "./dist/tatest.es.js",
      "require": "./dist/tatest.umd.js"
    },
    "./dist/tatest.css": {
      "import": "./dist/tatest.css",
      "require": "./dist/tatest.css"
    }
  },
  "types": "./dist/tatest.d.ts",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "path": "^0.12.7",
    "rollup-plugin-typescript2": "^0.34.1",
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vite-plugin-dts": "^1.7.1",
    "vue-tsc": "^1.0.11"
  }
}

I get an immediate error if I build this project and install it in another project stating:

Could not find a declaration file for module 'tatest'. '/Users/xxxx/Downloads/tatest/dist/tatest.es.js' implicitly has an 'any' type.
  There are types at '/Users/xxxx/Projects/proberen/testen/node_modules/tatest/dist/tatest.d.ts', but this result could not be resolved when respecting package.json "exports". The 'tatest' library may need to update its package.json or typings.ts(7016)

on import Test from 'tatest'

Removing the exports block or Falling back tatest.js instead of tatest.es.js(see build.lib below) fixes the issue; but it still show the MyButton as type any unless I import it right away as import {MyButton} from 'tatest'

    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: "src/components/index.ts",
      name: 'tatest',
      formats: ["es", "umd"],
    },

[kazeshini178]

@timenengwerda I see your import is "import": "./dist/tatest.es.js", but you types is "types": "./dist/tatest.d.ts",

I was only able to get the typings to work when I had my types match my imports as mentioned above(I might not have been clear 😅 )

If you change your types from "types": "./dist/tatest.d.ts", to "types": "./dist/tatest.es.d.ts", do you still getting the error?

[timenengwerda]

Thanks for the quick response. It doesn't make any difference at all:

package

{
  "name": "tatest",
  "private": false,
  "version": "0.0.1",
  "type": "module",
  "files": [
    "dist"
  ],
  "main": "./dist/tatest.es.js",
  "exports": {
    ".": {
      "import": "./dist/tatest.es.js",
      "require": "./dist/tatest.umd.js"
    },
    "./dist/tatest.css": {
      "import": "./dist/tatest.css",
      "require": "./dist/tatest.css"
    }
  },
  "types": "tatest.es.d.ts",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "path": "^0.12.7",
    "rollup-plugin-typescript2": "^0.34.1",
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vite-plugin-dts": "^1.7.1",
    "vue-tsc": "^1.0.11"
  }
}

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
import typescript2 from 'rollup-plugin-typescript2';
import dts from "vite-plugin-dts";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    dts({
      insertTypesEntry: true,
    }),
    typescript2({
      check: false,
      include: ["src/components/**/*.vue"],
      tsconfigOverride: {
        compilerOptions: {
          outDir: "dist",
          sourceMap: true,
          declaration: true,
          declarationMap: true,
        },
      },
      exclude: ["vite.config.ts"]
    })
  ],
  build: {
    cssCodeSplit: true,
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: "src/components/index.ts",
      name: 'tatest',
      formats: ["es", "umd"],
      fileName: format => `tatest.${format}.js`
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      input: {
        main: path.resolve(__dirname, "src/components/main.ts")
      },
      external: ['vue'],
      output: {
        assetFileNames: (assetInfo) => {
          if (assetInfo.name === 'main.css') return 'tatest.css';
          return assetInfo.name;
        },
        exports: "named",
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

[kazeshini178]

I see in the types you removed the dist folder path. Not sure if that might be why now.
This is the library part of my package.json:

{
// ...
 "main": "./dist/my-sample-library.umd.cjs",
  "module": "./dist/my-sample-library.js",
  "exports": {
    ".": {
      "import": "./dist/my-sample-library.js",
      "require": "./dist/my-sample-library.umd.cjs"
    },
    "./dist/my-sample-library.css": {
      "import": "./dist/my-sample-library.css",
      "require": "./dist/my-sample-library.css"
    }
  },
  "types": "./dist/my-sample-library.d.ts",
  // ...
  }

Only think I changes from the blog was I didnt use formats from the vite.config.js file as I didnt like the es being added on

[timenengwerda]

Sorry that was just bad copy/pasting on my side. (I've tried a couple of different things and didn't give the best example).

Adding ./dist/ doesn't matter

Have you tried building it and installing it as an npm package in another Vue project:
npm install path/to/local/buildfolder

Then adding it to that main.ts file
import Test from 'tatest'

And adding <MyButton /> to App.vue? Hovering over gives me (property) MyButton: any and adding a wrong prop gives me no error.

If I import it directly into App.vue

import { MyButton } from 'tatest'

Hovering over MyButton DOES give me intellisense and errors on wrong props

[kazeshini178]

Yip have a tester project that uses a file reference for the package like you did.

I remember having an issue with types in general in VS Code. Till i imported any random package (currently have written it off to a extension issue)

Might not be the same issue you are having, but in the test project try add something like vue-router and just import the package in main.ts don't even need to add a .use() call and my types started showing (after I did the typings change as well)

Hope that make sense 😅

[timenengwerda]

The explanation makes sense. Why that would work doesn't, haha! Unfortunately I still haven't been able to get it to work. I'm pretty sure my Intellisense is fine since importing it directly does work.

I'll just call it a day for now and live without the intellisense for this one package.