TypeScript "Cannot find module" when using WebPack inline loader syntax, solve without using @ts-ignore?

Question

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;
}

tmhao2005 · Accepted Answer · 2022-07-28 07:31:51Z

2

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.

answered Jul 28, 2022 at 7:31

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gremo Over a year ago

Amazing, thanks a lot, i've updated the answer to a better declaration.

Collectives™ on Stack Overflow

TypeScript "Cannot find module" when using WebPack inline loader syntax, solve without using @ts-ignore?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related