TS-Check: cannot find module

[NileDaley]

TypeScript Version: 3.1.3

Code

//@ts-check
const { axios } = require('axios')

Expected behavior:
Axios will be required from './node_modules/axios/index'

Actual behavior:
Error shown is cannot find module 'axios' despite axios being installed. Note that this problem is not axios specific, it occurs with any module. However, if I use the following syntax then it is required correctly.

//@ts-check
const { axios } = require('./node_modules/axios/index')

Screenshots:

The error:

No error when using path:

TypeScript debug error:

[ghost]

The stack trace looks like #27867.
However, I can't reproduce the crash, even on 3.1.3. I'm testing with a project that consists of just a file a.js containing:

// @ts-check
const { axios } = require('axios')

Your project may be different because of other files you have, particularly a tsconfig.json or jsconfig.json.
I also don't see the error message you're seeing. I see a different error:

[ts] Type 'typeof import("/home/andy/sample/js/node_modules/axios/index")' has no property 'axios' and no string index signature. [2459]

This is with axios 0.18.0 installed.

[NileDaley]

Here's the contents of my jsconfig.json file in the project root

{
    "compilerOptions": {
        "target": "ES6",
        "lib": ["es5", "es6", "es7"]
    }
}

However, having tested again with the jsconfig.json file deleted, it still produces the same error. Although, in some projects on my system the module will be required fine. I should also note - just in case it makes any difference - that this bug is occuring within vscode 1.28.2

[NileDaley]

@Andy-MS So i've been testing, and I've found something else which is strange

The project is laid out like this:

project
    subprojectA
        folderA
            index.js 
            node_modules
        folderB
        ....
    subprojectB
    ....
    jsconfig.json

If i have the project folder open in vscode and open subprojectA/folderA/index.js, then the error will be thrown. However, if I open the folderA directly in vscode, then the module will be required correctly.

Could the issue be related to the fact that there are so many subProject folders whose child folders also contain node_modules?

[NileDaley]

@Andy-MS Any update on this issue?

[sandersn]

@NileDaley Does this issue still happen for you? I can try to reproduce it, but it would help me a lot to have the actual project that's failing. If you can share that some way I can sign an NDA if that would help.

[NileDaley]

This was a long time ago, and I don't experience the issue anymore as we're now using typescript instead of js + tscheck.

As far as I can remember, the issue was caused by having the jsconfig.json file in the wrong folder. I had it at the root of the project, whereas it needed to be further down in the tree.

From my example above, it needed to change to

project
    subprojectA
        folderA
            index.js 
            node_modules
            jsconfig.json
        folderB
        ....
    subprojectB

So it actually couldn't find the module because there is no node_modules at the root level where the jsconfig.json was.

[Friksel]

I'm having the same issue on some packages inside node_modules (writing javascript, not typescript). Some of them work just fine, but some throw ts check errors.

For example the screenfull package is throwing the 'cannot find module' error.
Looking inside node_modules/screenfull/dist/screenfull.js there is a self-executing function which ends like this:

if (isCommonjs) {
   module.exports = screenfull;
} else {
   window.screenfull = screenfull;
}

Using Webpack 4 to import the module. Everything is working fine in the website output.

--

Also it looks like jsconfig path-aliases are ignored (here modules is an alias for node_modules as set the same in Webpack as an alias, so Webpack knows modules is an alias for node_modules, as well as vs code knows by its jsconfig.json paths):

require('modules/prismjs/plugins/keep-markup/prism-keep-markup.js');

This is the jsconfig.json:

{
    "include": [ "src/**/*" ],
    "compilerOptions": {
        "target": "es6",
        "baseUrl": ".",
        "paths": {
            "jsCommons/*": ["src/js/includes/commons/*"],
            "modules/*": ["node_modules/*"]
        }
    }
}

Could it be @ts-check doesn't work well while using Webpack imports/requires?

[rolandleth]

@sandersn I'm also having this issue, not with @ts-check, but by writing TS. A project I'm having issues with is https://gitlab.com/runtimesharks/runtimesharks.com. Current problems: http and react-dom/server, but if I yarn add axios, it will complain about that one too. Adding @types/node doesn't help, either.

I have a feeling it's my lack of experience that's causing this and I'm missing something obvious and/or configured something wrong, anticipated apologies if so 😞

Edit: never mind me, I had "noResolve": true 🤦🏻‍♂️.

[wmertens]

I encountered this when setting target: "esnext" in my jsconfig.js file. one of the culprits is the tmp-promise module. it seems that regular js files become unparseable?

[sandersn]

@wmertens @Friksel can you open separate issues with specific repros please?

[ArcaneEngineer]

Found similar issue when switching to VS Code / JSdoc / @ts-check with JS / ES6 as a lightweight alternative to TypeScript, for type-checking.

If I put jsconfig.js in /project instead of /project/js, then there is no problem with using absolute paths, e.g. import SomeData from 'js/Data/SomeData.js' (note the lack of a leading slash).

If I put jsconfig.js in /project/js instead, then I cannot use that absolute path style, and must use relative paths instead to make things work, else I get the (2307) error mentioned here.

May be obvious to some, but I don't like the suggestion on the VS Code documentation that you should place the file in e.g. /project/js by default, or at least they should explain the problems this can cause.