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?

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?

• javascript
• typescript
• webpack
• visual-studio-code

• You can get this to work but you will have to create a type declaration file. There is no way to express the asset synthetic modules using vanilla JS. – Aluan Haddad Commented Aug 1, 2017 at 9:42
• Would you maybe have a link illustrating how to do this? I don't know much Typescript, I'm just trying to take advantage of the type checking but I don't want to litter my code with //@ts-ignore so I'm trying to fix it "correctly" – Coderer Commented Aug 1, 2017 at 10:02

1 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");