Compiler not throwing "Cannot find module" error

Question

In my project I have 2 files:

foo.js

const image = require('../this/path/is/wrong.png');

boo.tsx

const image = require('../this/path/is/wrong.png');

In foo.js TypeScript correctly finds out that the image does not exists and throws "Cannot find module" error, but no error is thrown for boo.tsx so the bug only shows up on runtime when the app crashes.

If I just rename boo.tsx to boo.js TS again starts throwing the error as expected.

Those are some of my compiler options that I think could be relevant:

"module":"es2015",
"target": "es2015",
"jsx": "react",
"moduleResolution":"Node",
"allowJs": true,

I've tried:

different module and moduleResolution settings
using import instead of require
with and without @types/node

Is there any special tsconfig settings I am missing or what am I doing wrong?

What happens if you try module=ES5, target=ES5 and moduleResolution="Node"? — yeshashah
– yeshashah, Commented Jun 20, 2018 at 11:24
Out of curiosity, have you declared any include and exclude of files types in tsconfig.json? If so can you check whether your project includes the .png file formats. Never mind if the setup is good. — bh4r4th
– bh4r4th, Commented Jun 22, 2018 at 7:18
I assume both files are at the level in same folder structure. — Sujit.Warrier
– Sujit.Warrier, Commented Jun 25, 2018 at 2:33

Daniel Rosenwasser · Accepted Answer · 2018-06-17 00:10:15Z

2

The require function has no special meaning in a .ts or .tsx file, since TypeScript only uses recognizes syntax for imports.

In a .js file with allowJs, it is uses heuristics, and recognizes the require call as an import.

The more equivalent thing for TypeScript would be something like

import image = require('../this/path/is/wrong.png');

or one of the ES module syntaxes such as

import * as foo from "foo";

import foo from "foo";

edited Jun 17, 2018 at 0:10

answered Jun 16, 2018 at 23:28

Daniel Rosenwasser

24.1k14 gold badges54 silver badges66 bronze badges

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

3 Comments

Petr Peller Over a year ago

I don't understand why it recognizes require in JS files but not in TS files. When I try the import image = require() syntax I get an error:

Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.

Daniel Rosenwasser Over a year ago

Amended my response to use ES module syntax in certain cases.

Petr Peller Over a year ago

This won't help either. I've mentioned in the question that i've tried import instead of require. It will always show the module as missing unless you add a declaration for that file which in turn will make it again never show the error as with require.

deowk · Accepted Answer · 2018-06-24 15:41:24Z

0

try adding "allowSyntheticDefaultImports": true to your tsconfig

answered Jun 24, 2018 at 15:41

deowk

4,3181 gold badge27 silver badges34 bronze badges

1 Comment

Petr Peller Over a year ago

Nope, it was always enabled.

Collectives™ on Stack Overflow

Compiler not throwing "Cannot find module" error

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related