VSCODE checkJs not finding modules

Question

I have a very simple react material-ui project.

I recently added a jsconfig.json to the top level folder

{
    "compilerOptions": {
        "target": "es6",
        "checkJs": true,
        "jsx": "react"
    },
    "exclude": [
        "node_modules",
        "data",
        "docs",
        ".cache",
        "dist"
    ]
}

Which is working fine. But there are a few errors that VSCode is finding that I would like to remove:

Cannot find module '@material-ui/core/Button'.

Cannot find module '@material-ui/core/styles'.

Cannot find module 'easy-peasy'.

The imports are working fine, but I rather not just disable ts-check. All these imports are in the ./node-modules tree (including easy-peasy).

(BTW, the code is all JavaScript and not TS).

import { action, createStore, StoreProvider, useStore, useActions, thunk } from 'easy-peasy';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

6

You probably need to set "module": "commonjs"

Here's how I'm doing it:

jsconfig.json

{
  "compilerOptions": {
      "baseUrl": ".",
      "target": "es6",
      "module": "commonjs",
      "paths": {
        "@components/*": ["./src/components/*"],
        "@constants/*": ["./src/constants/*"],
        "@helpers/*": ["./src/helpers/*"]
      }
  },
  "include": [
    "src/**/*"
  ]

See the answer I got on my issue on Github Vscode

Yes if you are importing modules from node_modules, you generally need to set "module": "commonjs" ("moduleResolution": "node" should also work I believe). commonjs is the default setting, but "target": "es6" overrides it to use "module": "es6" unless you explicitly specify another "module" setting

The module options are covered in a bit more detail here: Understanding "target" and "module" in tsconfig

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 26 '19 at 07:45

cbdeveloper

27,898
37
155
336

excellent. (but I now have another set of errors to track down: see: https://github.com/ctrlplusb/easy-peasy/issues/221 – Dr.YSG Jun 26 '19 at 14:02
That has something to do with types for sure. Since you're not using TS, do you really need type checking? – cbdeveloper Jun 26 '19 at 14:08
Well, I thought it was a good feature of VSCODE that if you use JSDOC on your functions, then in effect (do the typescript parsing engine inside of VSCODE) you basically get the same style of static type checking. But if there is a way to turn of the type checking and still get the other syntax checking - that might be appropriate in this case. – Dr.YSG Jun 26 '19 at 14:46
That's what I'm doing. The only type checking I get is by using `propTypes` for React. But when I need some intellisense on some object to get autocompletion for properties and methods I use the JSDoc syntax and it might do the trick. But I did use it once or twice to some DOMElements. For library API objects I guess it depends of some type `d.ts` file. – cbdeveloper Jun 26 '19 at 14:51

score 0 · Answer 2 · answered Jun 26 '19 at 11:14

Blockquote

VSCODE settings

Go to File -> Preferences -> Settings or on Mac Code -> Preferences -> Settings Pick the workspace settings tab Add this code to the settings.json file displayed on the right side:

// Place your settings in this file to overwrite default and user settings.

{
    "files.exclude": {
        "**/.git": true,         // this is a default value
        "**/.DS_Store": true,    // this is a default value

        "**/node_modules": true, // this excludes all folders 
                                 // named "node_modules" from 
                                 // the explore tree

        // alternative version
        "node_modules": true    // this excludes the folder 
                                // only from the root of
                                // your workspace 
    }
}

If you chose File -> Preferences -> User Settings

then you configure the exclude folders globally for your current user.

VSCODE checkJs not finding modules

2 Answers2