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?

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
– 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
– Coderer, Commented Aug 1, 2017 at 10:02

Matt Bierner · Accepted Answer · 2017-08-03 01:35:02Z

18

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

answered Aug 3, 2017 at 1:35

Matt Bierner

67.4k24 gold badges199 silver badges233 bronze badges

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

4 Comments

Coderer Over a year ago

I had the @ts-ignores all over the place but it'd be nice to have a more consistent default behavior. Thanks!

Coderer Over a year ago

I may have spoken too soon -- I'm now seeing [js] Type 'typeof '*.svg'' is not assignable to type 'string'.. But I'm exporting "as string" -- what gives? (Your example does get rid of the errors for the require("path/to/whatever.css"), since the return value is never assigned to anything.)

Coderer Over a year ago

Now, this is fascinating. I added a number of declare module lines to my globals.d.ts, as you suggested. Assigning require("path/to/my.svg") to a string-typed var gives the "is not assignable" error, but import mySvg from "path/to/my.svg"; aStringVar = mySvg; works great. Maybe I found a bug in require()? For now, I'm changing all my requires to imports, since Webpack apparently handles them both just fine.

General Grievance Over a year ago

TS compiler tells me export must be an identifier. I used const val: string; export default val instead.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related