"Unable to open: File is a directory" when importing

Question

I'm working on a React project in vscode. I noticed a few days ago that any of my imports that point to a directory with an index.js/jsx file in them cannot be resolved by cmd+clicking on the import or the function name.

I get an error in the bottom right "Unable to open : File is a directory"

I have the following in my jsconfig.json file:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": false,
    "target": "es2017",
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "**/node_modules",
    "dist"
  ]
}

I've tried:

Removing the jsconfig entirely
Various combinations of module import/export patterns
Various combinations of paths/baseUrl/other options in the jsconfig file
Disabling all extensions

Nothing seems to work. The only way I get cmd+click to work is if I point my imports directly at the component itself, or directly at the index.js file.

Does anyone have any insights, please? Googling hasn't shone much light on anything. It's not the end of the world as I cmd+t to most things but it sure is annoying. FWIW Webstorm handles the imports without any issues. Cheers.

EDIT: I forgot to mention. For added spiciness, the cmd+click works for a few seconds while vscode loads. Then "something" happens and it starts throwing the error. Other projects seem to be ok.

score 1 · Answer 1 · answered Jan 22 '22 at 19:44

I think I may have solved it by adding a tsconfig.json to the project root with the same paths etc. I can now reliably click on import and see function definitions on hover.

If anyone has a similar problem, try the following:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
  },
  "include": [
    "src/**/**.ts",
    "tests/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Adding `"moduleResolution": "node",` fixed it for me. I have jsconfig.json with these values: ```json { "compilerOptions": { "baseUrl": "./src/", "module": "esnext" }, "include": ["src", "public/workers/worker.js"] } ``` — Nad Hr, Aug 08 '23 at 10:58

"Unable to open: File is a directory" when importing

1 Answers1