Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript imports don't find `index.d.ts` when importing individual components

See original GitHub issue

Version of Bootstrap-Vue that you are using 2.0.0-rc.11

import bContainer from 'bootstrap-vue/es/components/layout/container';

69:24 Could not find a declaration file for module 'bootstrap-vue/es/components/layout/container'. 
'/node_modules/bootstrap-vue/es/components/layout/container.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 'bootst
rap-vue';`
  > 69 | import bContainer from 'bootstrap-vue/es/components/layout/container';
       |                        ^

I’m not sure if TypeScript has a way to specify the type declarations. From what I’ve looked into it doesn’t. So to support imports like this a TypeScript definition would need to be made in every component directory.

Issue Analytics

State:
Created 5 years ago
Reactions:6
Comments:16 (5 by maintainers)

Top GitHub Comments

3reactions

essenmitsossecommented, Oct 23, 2018

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?

1reaction

tmorehousecommented, May 27, 2019

Version 2.0.0-rc.21 has been released

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

Top Results From Across the Web

Documentation - Module Resolution - TypeScript

Module resolution is the process the compiler uses to figure out what an import refers to. Consider an import statement like import {...

TypeScript typings give me "index.d.ts is not a module"

The index.d.ts file indeed is not a module, it just references two other files with interfaces in them. So I thought to remove...

Smarter way to organize “import” statements using “index.ts ...

In this file, we can export all folder specific components and modules. For example, consider index. ts file inside products folder:

Features | Vite

Rewrite the imports to valid URLs like /node_modules/.vite/deps/my-dep.js?v=f3sf2ebd so that the browser can import them properly. Dependencies are Strongly ...

Common TypeScript module problems and how to solve them

ts . This time, the file does not exist, so the compiler will substitute 'nav/file3' with the second location " ...