Inconsistent module loading using jsconfig and VSCode

Question

I have been working on a project for months and I have the following jsconfig.json file to make loading paths easier. I don't believe there's anything wrong with this config because it has been working for the entire length of the project, but here it is for reference:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@/public/*": ["./public/*"],
      "@/styles/*": ["./src/styles/*"],
      "@/utils/*": ["./src/utils/*"],
      "@/components/*": ["./src/components/*"]
    }
  }
}

And today, seemingly for no reason, I'm getting random modules that cannot be found. The example at the time of making this post, in the following screenshot, you can see that the @/utils/craft/client path worked absolutely fine, but the following module on line 4 throws an error.

As you can see in the following screenshot, the naming and file path matches exactly.

The fact it worked for ages and has thrown this error now out of the blue, suggests to me this a VSCode/jsconfig bug and not actually with the markup itself?

Any help would be appreciated.

Answer 1

Found the issue.

I accidentally labelled a file .tsx and when I ran npm run build, a tsconfig file was automatically added. This meant that the jsconfig file was no longer being used!