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';