ENOENT: no such file or directory, stat './tsconfig.json'

[Vallo]

I have started a new react app and defined baseUrl as "./" on my tsconfig.json. Added eslint-import-resolver-typescript and empty settings on .eslintrc.js but still got Unable to resolve path error, despite imports worked as expected. Tried to specify tsconfig.json location on project property but got title error. All package.json, tsconfig.json and .eslintrc.js are on root folder, code is on /src.

These are my current config files:

.eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:import/recommended",
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended",
    "plugin:import/typescript",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: "module",
  },
  settings: {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"],
    },
    "import/resolver": {
      typescript: {},
    },
  },
  plugins: ["import", "react", "@typescript-eslint"],
  rules: {
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": [
      2,
      { extensions: [".js", ".jsx", ".ts", ".tsx"] },
    ],
  },
};
}

{
  "name": "react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "connected-react-router": "^6.9.1",
    "feather-icons": "^4.28.0",
    "history": "^5.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux": "^4.1.0",
    "typescript": "^4.3.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.25.0",
    "@typescript-eslint/parser": "^4.25.0",
    "eslint": "^7.27.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-typescript": "^2.4.0",
    "eslint-plugin-import": "^2.23.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.3.0"
  }
}

.tsconfig.json:

{
  "compilerOptions": {
    "noFallthroughCasesInSwitch": true,
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noImplicitAny": false,
    "strict": true
  },
  "include": ["src"]
}

[JounQin]

Please provide a minimal reproduction.

[Vallo]

@JounQin I created a minimal reproduction example. https://github.com/Vallo/eslint-import-resolver-typescript-reproduction

Not sure what causes it, but it only triggers if VS Code is not opened on project root folder. You can find reproduction steps on the readme.

Thank you very much for your time

Edit: I'm not sure if this error is from Eslint, from the resolver or its something related to VSCode. I was suggested I might need to add a project vscode config file to specify baseUrl in there too. Any idea?

[JounQin]

I didn't get any error as you described.

[JounQin]

If you mean Unable to resolve path to module 'src/components/Example', I can reproduce it by node ./project/node_modules/.bin/eslint ./project/src/App.tsx, that is because the default project value is process.cwd(): https://github.com/alexgorbatchev/eslint-import-resolver-typescript/blob/master/src/index.ts#L216

It can be resolved by ESLint conext.getCwd(), but context is not available in ESLint import resolver right now.

So the simple fix for now is setting project to be __dirname which represents __dirname + '/tsconfig.json' actually:

       "@typescript-eslint/parser": [".ts", ".tsx"],
     },
     "import/resolver": {
-      typescript: {},
+      typescript: {
+        project: __dirname,
+      },
     },
   },
   plugins: ["import", "react", "@typescript-eslint"],

[andre-lergier]

I came up this issue because I had a quite similar error.
In my case I have a Monorepo using Turborepo. In my Next.js app in the subfolder apps/next-frontend I had the problem, that ESLint in VSCode couldn't resolve the paths to my modules but while compiling everything worked well. If I put "project": "./tsconfig.json", it didn't work in the IDE but while compiling. When I set "project": "apps/next-frontend/tsconfig.json" it worked in the IDE but not for compilation.

With the following options now everything is working without error - while compiling and in VSCode.

  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
        "typescript": {
          "project": "**/tsconfig.json"
        }
      }
   },
  "parser": "@typescript-eslint/parser",
  "plugins": ["import", "react", "@typescript-eslint"],

Maybe this helps someone else who comes across this issue. :)

[wlto]

I came up this issue because I had a quite similar error. In my case I have a Monorepo using Turborepo. In my Next.js app in the subfolder apps/next-frontend I had the problem, that ESLint in VSCode couldn't resolve the paths to my modules but while compiling everything worked well. If I put "project": "./tsconfig.json", it didn't work in the IDE but while compiling. When I set "project": "apps/next-frontend/tsconfig.json" it worked in the IDE but not for compilation.

With the following options now everything is working without error - while compiling and in VSCode.

  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
        "typescript": {
          "project": "**/tsconfig.json"
        }
      }
   },
  "parser": "@typescript-eslint/parser",
  "plugins": ["import", "react", "@typescript-eslint"],

Maybe this helps someone else who comes across this issue. :)

Thank you so much @andre-lergier ! Have been stuck with this for almost 2 hours. It's working on my end now. Cheers!
@JounQin do you think it would be worth it to put this in the documentation somewhere? I can make a PR for that if you need.

[JounQin]

@wlto PR welcome!

But I would say .eslintrc.js with __dirname is better for this case.

**/tsconfig.json means it will try all projects for all files, that could be conflict with same sub structure.

[andyjessop]

@JounQin __dirname won't work with json configs.