bootstrap-vue: Typescript imports don't find `index.d.ts` when importing individual components

This actually works, which is great. But I can only import one component per .d.ts file.

If I try to import multiple components, it either complains, about importing ‘vue’ multiple times:

import Vue from 'vue';

declare module 'bootstrap-vue/es/components/button/button' {
	export default Vue;
}

declare module 'bootstrap-vue/src/components/layout/col' {
	export default Vue;
}

if I globally import ‘vue’ in the file:

import Vue from 'vue';

declare module 'bootstrap-vue/es/components/button/button' {
	export default Vue;
}

declare module 'bootstrap-vue/src/components/layout/col' {
	export default Vue;
}

Invalid module name in augmentation. Module 'bootstrap-vue/es/components/button/button' resolves to an untyped module at '/Volumes/git/code/app-prokoo/node_modules/bootstrap-vue/es/components/button/button.js', which cannot be augmented.

Is there a way to import all bootstrap-vue typings, but only import individual components into the build?

Version 2.0.0-rc.21 has been released

If you run into any issues with the new types, please open a new issue.

It appears that Typescript has “issues” with resolving sub-modules, and not checking the package.json ‘types’ to load in the sub-module declarations (it ignores the main packages package.json file.

We have updated the type declarations to reside in the /src/ directories, next to the individual module index.js files, and copy these files over to the /es/ directories during build. This should be available in the upcoming 2.0.0-rc.21 release.

It’s not working out of the box with the new plugins, the warning is:

Could not find a declaration file for module 'bootstrap-vue/es/components'. '/web/node_modules/bootstrap-vue/es/components/index.js' implicitly has an 'any' type.
  Try `npm install @types/bootstrap-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'bootstrap-vue/es/components';`

But its easier now, because I have to create only one d.ts file:

declare module 'bootstrap-vue/es/components' {
    import Vue, { PluginFunction, PluginObject } from 'vue';

    class BootstrapVue implements PluginObject<{}> {
        [key: string]: any,
        public install: PluginFunction<{}>
    }

    export const ModalPlugin: BootstrapVue;
    export const NavbarPlugin: BootstrapVue;
    export const CollapsePlugin: BootstrapVue;
    export const BreadcrumbPlugin: BootstrapVue;
    export const FormTextareaPlugin: BootstrapVue;
    export const FormFilePlugin: BootstrapVue;
    export const ToastPlugin: BootstrapVue;
}

@nicolasigot You can create your own definitions in your shims-vue.d.ts file.

e.g.

declare module 'bootstrap-vue/es/components/layout/container' {
  import Vue from 'vue';
  export default Vue;
}

Can confirm that this is an issue.