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"
  ]
}

First, make sure that test/utils.ts is included based on the files, include, and exclude settings in tsconfig.json, because VS Code doesn't apply the compiler options specified in tsconfig.json to excluded files. If that isn't the problem, run tsc with the --traceResolution option to get more information about what happens when it tries to resolve the ../src/config/firebaseServiceKey.json module. — Matt McCutchen
The problem might happen because you're trying to import a JSON file outside of your TypeScript project directory — Mikhail Burshteyn
Hi thanks Matt, I've added my tsconfig.json and the result of tsc for the relevant section, I don't think its a typescript issue as it does resolve the module and the code work. But vscode does not seem to be as smart resolving the module. — Uzer
In fact if test/* is put in the "include" within the tsconfig.json then building fails with: "error TS2497: Module '"/home/jty/April2018/vs-server/src/config/firebaseServiceKey"' resolves to a non-module entity and cannot be imported using this construct." otherwise if its not included then it compiles fine. VSCode complains either way. — Uzer

Market Market · Accepted Answer · 2019-07-31T15:12:47

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

VSCode typescript importing json file highlighting issue

1 Answers