CODEWITHSUNDEEP
visual-studio-codetsconfig
Dr.YSG
Dr.YSG

Reputation: 7591

VSCODE checkJs not finding modules

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';

Upvotes: 6

Views: 3174

Answers (2)

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

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.

Upvotes: 0

cbdeveloper
cbdeveloper

Reputation: 31485

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

Upvotes: 5

Related Questions