4

I added a jsconfig.json to my vscode project and for some reason I am getting a typescript error that states "dotenv/types not found".

I cannot for the life of me figure out why I am getting this error. I even tried adding dotenv to my package.json and it did not resolve my issue.

This is a standard project created with create-react-app, and I added the jsconfig.json to allow absolute imports

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Exception:

File '/Users/path/to/file/node_modules/dotenv/types' not found.

Other potential files that might be helpful:

package.json

{
  "name": "quantous-spa",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.20.0",
    "babel-plugin-macros": "^2.8.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-feather": "^2.0.8",
    "react-loading-skeleton": "^2.1.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "styled-components": "^5.1.1",
    "typeface-muli": "^1.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "prettier": "^2.0.5"
  },
  "resolutions": {
    "styled-components": "^5"
  }
}

.eslintrc

{
  "env": {
    "browser": true,
    "es2020": true
  },
  "extends": [
    "plugin:react/recommended",
    "google",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "js": true
    },
    "ecmaVersion": 11,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "require-jsdoc": "off"
  },
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["node_modules", "src/"]
      }
    }
  }
}

screeshot of vscode error

icc97
  • 11,395
  • 8
  • 76
  • 90
HJordan35
  • 160
  • 2
  • 9
  • 1
    Please, post text as text, not as photographs of text. We want to copy&paste&run your code, copy&paste your inputs, read your outputs, and copy&paste&google your error messages, not critique your use of color and perspective. Also, please make sure to post everything relevant to answering your question *in your question*, not on some third-party site somewhere else. https://idownvotedbecau.se/imageofcode/ https://idownvotedbecau.se/imageofanexception/ – Jörg W Mittag Aug 22 '20 at 06:31
  • Sorry - I updated my question with your requests...Hopefully you can lend a bit of help this time. Turns out my original solution of hard-resetting VSCode did not resolve my issue - the issue came back after a short period of time. – HJordan35 Aug 27 '20 at 22:24
  • Did you try this solution: https://stackoverflow.com/a/63605572/14172763 Let me know if can't solve it. – Gustavo Graeff Sep 01 '20 at 15:01
  • Does this answer your question? [How to fix "File '.../node\_modules/dotenv/types' not found." error coming from jsconfig.json?](https://stackoverflow.com/questions/63124462/how-to-fix-file-node-modules-dotenv-types-not-found-error-coming-from-j) – icc97 Apr 12 '23 at 17:54
  • From the [linked answer](https://stackoverflow.com/questions/63124462/how-to-fix-file-node-modules-dotenv-types-not-found-error-coming-from-j) `dotenv` had an open issue https://github.com/motdotla/dotenv/issues/475 that's generated a few SO questions – icc97 Apr 12 '23 at 17:56

3 Answers3

16

If you're using Visual Studio Code, just disable "Typescript validation" in the settings.

The error should go away.

enter image description here

vsync
  • 118,978
  • 58
  • 307
  • 400
dioslibre
  • 177
  • 1
  • 5
  • 1
    Disabling warnings and errors is usually a bad idea – icc97 Feb 08 '22 at 10:49
  • 1
    Not if it's TS :) – Jingle Jul 06 '22 at 18:02
  • 3
    Especially when the Typescript error is in JavaScript code, I'm having this error on a JavaScript-only project. – Adrian Roberto Aguilar Sandic Nov 21 '22 at 20:34
  • @icc97, this worked: why is it a bad idea ? what else can one do to remove the error ? – D.L Apr 12 '23 at 08:44
  • @D.L errors and warnings are there to help you, turning them **all** off because of one warning can hurt you in the long run. Better to dig deeper into the specific problem. Types by themselves are useful even if you are just using JavaScript and not Typescript - they provide auto-complete. The warning as far as I know is because the library `dotenv` doesn't have a types file - one way to fix this is to ask the `dotenv` library to add a types file which will make this warning go away and help all users of the library. – icc97 Apr 12 '23 at 17:46
  • @D.L check this answer: https://stackoverflow.com/a/65602245/327074 - this excludes the type checking for just the `dotenv` library - this is a much better answer than turning them off for all. – icc97 Apr 12 '23 at 17:53
  • @icc97 You are right in that "errors and warnings are there to help you", but in this case, it seems to me that it's a bug, the TS validator must not touch javascript files. TS did provide auto-complete 10 years ago, now we have esmodules, Thank God Almighty! IMHO it should be deprecated. I don't know how people still deal with cryptic type errors, Life is full of other problems, I don't need TS to add more. – dioslibre Apr 13 '23 at 00:32
  • @dioslibre Its a useful extra benefit of Typescript within JavaScript. VSCode is built with the idea of adding the benefits of TypeScript. You are indeed free to turn them off - but the point is that you can get benefits of types without even using TypeScript. The bug here is in the dotenv library https://github.com/motdotla/dotenv/issues/475. – icc97 Apr 13 '23 at 07:33
10

The @dioslibre answer works perfectly, but I didn't want to disable the Typescript validation. One alternative, explained by @Anees Hameed in their answer to a similar question is to add the following snippet to the settings.json:

 "json.schemas": [
      { 
        "$schema": "https://json.schemastore.org/jsconfig" 
      }
    ]
-5

The error is telling you it can't find dotenv types. Run npm install dotenv which installs types.

Mr. Robot
  • 1,334
  • 6
  • 27
  • 79
  • Thanks for the recommendation - Unfortunately, I had already tried this and it did not resolve my problem. I performed the install as requested, then restarted VSCode and still see the same error. – HJordan35 Aug 30 '20 at 14:02
  • 1
    this answer is not helpful. Dotenv has an open issue https://github.com/motdotla/dotenv/issues/475 – La Muerte Peluda Nov 09 '20 at 12:03