VSCode typescript importing json file highlighting issue

Question

I have some strange behaviour when importing json files using the import statement in typescript while using VSCode. Note this is not an issue with typescript itself just VSCode highlighting.

I have edited my tsconfig.json adding resolveJsonModule and esModuleInterop with the value of true to my compiler options to enable importing json within typescript.

Also I have added this package to my project https://www.npmjs.com/package/json-d-ts and added a typeRoots attribute to the tsconfig.json with a value of ["node_modules/json-d-ts"]

I've imported the json file (found at src/config/firebaseServiceKey.json) within a module (found at src/firebaseApp.ts) which is within a parent directory, thus the import looks like this:

import databaseUrl from "./config/firebaseDatabaseURL.json"; 

VSCode does not complain about this import:

However I have another module which imports the same file at a different level in the project directory, this module is found at test/utils.ts its import look like this:

import serviceKey from "../src/config/firebaseServiceKey.json"; 

This time VSCode does not seem to like the relative import and highlights the module as missing:

Any ideas how to fix configure VSCode to fix this problem?

Here is the relevant section of the result of running tsc --traceResolution:

======== Resolving module '../src/config/firebaseServiceKey.json' from '/home/jty/April2018/vs-server/test/utils.ts'. ======== Explicitly specified module resolution kind: 'NodeJs'. Loading module as file / folder, candidate module location '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json', target file type 'TypeScript'. File '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json.ts' does not exist. File '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json.tsx' does not exist. File '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json.d.ts' does not exist. Directory '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json' does not exist, skipping all lookups in it. Loading module as file / folder, candidate module location '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json', target file type 'JavaScript'. File '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json.js' does not exist. File '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json.jsx' does not exist. Directory '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json' does not exist, skipping all lookups in it. Loading module as file / folder, candidate module location '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json', target file type 'Json'. File '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json' exist - use it as a name resolution result. ======== Module name '../src/config/firebaseServiceKey.json' was successfully resolved to '/home/jty/April2018/vs-server/src/config/firebaseServiceKey.json'. ======== 

Here is my tsconfig.json

{ "compilerOptions": { "module": "commonjs", "resolveJsonModule": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "target": "es6", "noImplicitAny": true, "moduleResolution": "node", "sourceMap": true, "outDir": "dist", "baseUrl": ".", "paths": { "*": [ "node_modules/*", "src/types/*" ] } }, "include": [ "src/**/*" ], "typeRoots": [ "node_modules/json-d-ts" ] } 

Answer 1

I have faced similar issue, check your file is included as @Matt McCutchen said, the file which contains import serviceKey from "../src/config/firebaseServiceKey.json"; should be included under src folder as you described in the tsconfig.json

"include": [ "src/**/*" ], 

---

In my case, it was a test file which should not be included in the build. Because of that I have decided to ignore that highlight in the vs.

// @ts-ignore import packageJson from '../../../../package.json';