Typescript compiler "cannot find module" when using Webpack require for CSS/image assets

Question

I am writing vanilla Javascript but using the Typescript compiler's checkJs option to do type checking in VSCode. I have Webpack set up to load various asset types (CSS, images, etc), which works fine for builds, but Code is treating these statements as an error. For example, in this code

require("bootstrap");
require("bootstrap/dist/css/bootstrap.css");
var img = require("../img/image.png");

the first line is fine but the next two both show an error under the (string) argument to require(), with the tooltip "Cannot find module (name)".

I have installed @types/webpack and @types/webpack-env, which fixed resolve() and resolve.context(). Am I missing another typings package or is this an issue I need to take up on the DT issue tracker?

Answer 1

Requiring non JS or TS resources is currently not supported by the TypeScript server which powers VS Code's JavaScript and TypeScript intellisense. Here's the issue tracking this: https://github.com/Microsoft/TypeScript/issues/15146

As a workaround, try creating a d.ts file in your project with the content:

declare module '*.css' { export default '' as string; }
declare module '*.png' { export default '' as string; }

You can also suppress individual errors by adding // @ts-ignore before the require:

// @ts-ignore
var img = require("../img/image.png");