Typescript: Using `require` in method or Class breaks JavaScript IntelliSense

[djmisterjon]

Hi since 2017 this issue seem not fixed and can't find any solution!
Did you have a tips to fix this guys ?

The current problem is when I use. ex: require('fs') in a js Class. My class IntelliSense become broken.

Hope i can get help.
Thanks

related to:
https://github.com/microsoft/vscode/issues/51758
https://github.com/microsoft/vscode/issues/37126

[mjbvz]

Please share some example code or small example project that demonstrates this

[djmisterjon]

Hi Matt , thank you for your time.
Very simple case here.
create 2 files .js
file1.js

class File1 {
    constructor() {
    };

    stuff(){
        var r = require; // fine
        var rr = require('fs'); // disable intellisense !!!
    }
};

file2.js

class file2 {
    constructor() {
        File1 // intellisense broken if rr exist in Class File1 
    };
};

• If you comment rr in the file1.js and hover the ref in file2
  It work fine.
  

• But if you uncomment rr in file1.js the ref in file2.js broken and show any.
  

• BUT.. if you insert the 2 Class in the same file.js (single file), it will work!
  

If you need more information please tell me.
If you no able to reproduce i will make a small project.
here more info but i dont think this can be related.
jsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs"
    },
    "exclude": [
        "node_modules","bower_components","temp","tmp","jspm_packages",
        "./js/__old/","./js/libs/"
    ]
}

vsCode launch.json

{
        "version": "0.1.0",
        "configurations": [            
            {
                "type": "nwjs",
                "request": "launch",
                "name": "nwjs Node debug",
                "runtimeExecutable": "${workspaceRoot}\\SDK\\nw.exe",
                "runtimeArgs": [
                    "${workspaceRoot}",
                    "--remote-debugging-port=9222"
                ],
                "webRoot": "${workspaceRoot}",
                "port": 9222,
                "reloadAfterAttached": true,
                "sourceMaps": false,
                "nwjsVersion": "any",
            },
            {
                "type": "nwjs",
                "request": "attach",
                "name": "Attach to NWjs",
                "port": 9222,
                "webRoot": "${workspaceFolder}",
                "reloadAfterAttached": true,
            },

        ]
}

[djmisterjon]

any tips or plan to fix this ?

[djmisterjon]

ok i share a temp fix .
For now the only solution is to imbric require() in an eval method !
ex:const fs = eval("require('fs')");
And this will not break the vscode intellisense in projet.

Just don't forget to remove during production for security reason.
I hope this sharing will help your team find a more productive solution to this problem.

thanks and gl.

[djmisterjon]

just test in insider, and still not work.

[djmisterjon]

@mjbvz
ok i found more information, i don't know why this is in typescript.
this should not be close, it not solved for js project.
https://github.com/Microsoft/TypeScript/issues/13033

[mjbvz]

Thanks @djmisterjon. I confirmed this with TypeScript 3.6.0-dev.20190626 using your simple example

[fatcerberus]

@djmisterjon The issue was moved to the typescript repo because the TS language service handles the IntelliSense for TS and JS projects in VSCode.

[djmisterjon]

for now , alternative it use eval in dev :)
example:

var fs = eval("require('fs')");

will not break intellisense.
thanks for help or other suggest.

[DanielRX]

After looking at the duplicated issue, this is just a case of you not exporting the class?

export class File1 {
    constructor() {
    };

    stuff(){
        var r = require;
        var rr = require('fs');
    }
};

import {File1} from './file1';

class file2 {
    constructor() {
        File1
    };
};

This works fine, but as the linked issue mentions, the class is not global when require exists in the file, as it is assumed to be a module, not a script.
Note: Puting a require anywhere in file1.js breaks the intellisense (because it's a module)

[djmisterjon]

i cant use import export with my setup, import export crash my app with nwjs

[DanielRX]

@djmisterjon You use require, implying you are using modules? If you can use require, can't you use require and module.exports in your files?

[djmisterjon]

@DanielRX
it not work

[DanielRX]

If you can use require, can't you use require and module.exports in your files?
You should swap it to say module.exports.File1 = File1; on line 32and then use const {File1} = require('./camera')

[orta]

Hi folks, just took a look over this. I think what's happening is by including the require the IntelliSense declares that file not a Script (in the sense of a web script) but a module, and this toggles your Types to not be available inside the global scope.

This means your other file can't just know about the other type without you providing some advice to the system. Even if they may be available in the runtime.

For example:

// file1.ts
class File1 {
  constructor() {
  };

  stuff(){
      var r = require;
      var rr = require('fs');
  }
};

module.exports = {
  File1
}

// file2.js
const {File1} = require("./file1")

class File2 {
  constructor() {
      const a = new File1()
      a.stuff
  };
};

Auto-completes as you'd expect.

[orta]

Double checked and this is what we expect it to be, thanks for the issue, I’m going to close jt