CODEWITHSUNDEEP
jsontypescriptvisual-studio-code
Uzer
Uzer

Reputation: 3190

VSCode typescript importing json file highlighting issue

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:

Good import highlighting

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:

enter image description here

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

Upvotes: 22

Views: 7795

Answers (1)

Market
Market

Reputation: 450

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

Upvotes: 7

Related Questions