How to add declaration when importing as module in Rollup + Typescript?

[chris-dura]

Hi! Probably a silly question, but I'm trying to get past a Could not find declaration file for module ... error.

I want to bundle the focus-visible polyfill into my library with Rollup + Typescript. I found a closed thread about importing it as a module

So, I've taken @robdodson's advice and used the dynamic import like so:

// my-app/index.ts

if (someCondition) {
  import('./node_modules/focus-visible/dist/focus-visible.min.js')
    .then(_ => console.log('focus-visible loaded!'));
}

However, the TS compiler unsurprisingly fires an error since focus-visible doesn't have types. Normally, I would just add a * wildcard declaration file, like this:

// my-app/missing-types.d.ts

declare module '*';

That does work, but it's way broader than I want, and I'd much rather target focus-visible specifically. However, other attempts at writing more specific ambient module declaration does not get rid of the error.

declare module 'focus-visible';
declare module 'focus-visible/*';
declare module './node_modules/focus-visible/dist/focus-visible.min.js'; // this gives an error that this path can't be relative

Is there a way to be more specific in the ambient module declaration than just '*'? Also, I know there are A LOT of options in tsconfig.json that might magically make this disappear, but I'm not familiar enough with TypeScript yet, so I'm not sure... and I think the ambient declaration would be the way to go...

[robdodson]

hmmm unfortunately i don't know much about typescript so I'm not sure if i can be much help 😅

[chris-dura]

I'll go ahead close this, there's a few workarounds...

1. I landed on using the noImplicitAny: false in the tsconfig.json, which, to be fair, may not be better than declare module '*';, but it just seemed cleaner to me, and it seems like a fairly common option that a lot of libraries set.

2. You can use // @ts-ignore to simply ignore the line (not recommended)

   if (someCondition) {
   // @ts-ignore
   import('./node_modules/focus-visible/dist/focus-visible.min.js')
   .then(_ => console.log('focus-visible loaded!'));
   }

[wiredmatt]

Hi! Probably a silly question, but I'm trying to get past a Could not find declaration file for module ... error.

I want to bundle the focus-visible polyfill into my library with Rollup + Typescript. I found a closed thread about importing it as a module

So, I've taken @robdodson's advice and used the dynamic import like so:

// my-app/index.ts

if (someCondition) {
  import('./node_modules/focus-visible/dist/focus-visible.min.js')
  .then(_ => console.log('focus-visible loaded!'));
}

However, the TS compiler unsurprisingly fires an error since focus-visible doesn't have types. Normally, I would just add a * wildcard declaration file, like this:

// my-app/missing-types.d.ts

declare module '*';

That does work, but it's way broader than I want, and I'd much rather target focus-visible specifically. However, other attempts at writing more specific ambient module declaration does not get rid of the error.

declare module 'focus-visible';
declare module 'focus-visible/*';
declare module './node_modules/focus-visible/dist/focus-visible.min.js'; // this gives an error that this path can't be relative

Is there a way to be more specific in the ambient module declaration than just '*'? Also, I know there are A LOT of options in tsconfig.json that might magically make this disappear, but I'm not familiar enough with TypeScript yet, so I'm not sure... and I think the ambient declaration would be the way to go...

I'm doing import "focus-visible/dist/focus-visible"; in my index.tsx And in my custom types custom.d.ts: declare module 'focus-visible/dist/focus-visible';

I don't think it's worth defining types for a CSS selector, but missing out on errors neither.

In case you don't know how to add your custom types, create a file inside of your src folder, with the extension .d.ts, that should be enough.