Home > Software design >  TypeScript "Cannot find module" when using WebPack inline loader syntax, solve without usi
TypeScript "Cannot find module" when using WebPack inline loader syntax, solve without usi

Time:07-28

I perfectly know why the error is raised but I can't find a way to suppress it (that is not // @ts-ignore). I'm using style-loader with the inline syntax:

import styles from '!style-loader?injectType=lazyStyleTag!css-loader!vendor/style.css';

Cannot find module '!style-loader?injectType=lazyStyleTag!css-loader!vendor/style.css'' or its corresponding type declarations.

How should I "instruct" TypeScript that the import is legit?

EDIT: declaration as per answer:

declare module '!style-loader?*' {
  const value: { use: (options?: Record<string, any>) => void, unuse: () => void };
  export default value;
}

CodePudding user response:

Typescript allows you to declare a custom module import on your own, specifically you might use a wildcard module declarations so following things:

  • Declare your custom typings files such as ./typings/index.d.ts
declare module '!style-loader?*' {
  const value: any;
  export default value;
}
  • Include this typings dir into your tsconfig.json:
{
  // ...
  "include": ["...", "typings"]
}

One more thing, you need to check which version of Typescript supports this wildcard module declaration.

  • Related