Import Json file in Typescript : Error in terminal

Question

I am new in typescript and I have 2 questions.

a. I want to import a simple JSON file in my typescript (main.ts) using the following code in visual studio code (3.6.2) editor:

import test from "./test.json";
console.log(test.name);

I also tried with import * as test from "./test.json";

While the JSON file (test.json) is the following:

{"name": "testing",
"age":25}

However, when I am typing "test.", typescript is giving the options for "name", "age" as the properties.

And the tsconfig.json file is following:

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs",                     
    "strict": true, 
    "moduleResolution": "node",               
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

This code is throwing the following error:

Cannot find module './test.json'. Consider using '--resolveJsonModule' to import module with '.json' extension

Since the type definition is for old versions, I haven't used that. My typescript version is 3.6.3. The above mentioned 3 files are inside the same folder.

   -testfolder
     - main.ts
     - tsconfig.json
     - test.json

Though there are some other questions similar to this, but I couldn't find the problem in my code! I have also tested that with submile text 3 but it's also giving the same error!

b. If I want to parse a json data from a file where the file extension is different (not .json), how should I do that?

Thank you in advance for your time.

Honorine

Is your json file at the same folder-level as main.ts? If it's not - import path should be relative to main.ts – Blockbusting

Yes, all the files are in the same folder. – Honorine

Then if you using VS Code - just restart it, should help. – Blockbusting

Tried that, I restarted my pc too, but didn't help! :( – Honorine

Answer 1

Nihar,

I was able to reproduce the problem you mention. I was also able to resolve the problem using the following tsconfig.json:

{
"compilerOptions": {
  /* Basic Options */
  "target": "es5",
  "module": "commonjs",
  "strict": true,
  "esModuleInterop": true,
  "resolveJsonModule": true
}, 
"files": ["main.ts"]

}

Of course, the added "files" section assumes your main file is named "main.ts". Frankly I'm not sure why this works and your original does not, but when I use a tsconfig.json file, I try to put everything typescript needs to know in that one place.

Permanganate

I have just modified the tsconfig, restarted the editor, still it's not working!! Is there anything that I'm missing?! – Honorine

Can you please tell me which editor and which version of typescript are you using? – Honorine

I'm using VSCode (v1.37.1) and typescript 3.5.3 (also tested w/ typescript 3.6.3 ). How about you? What error do you get? Are you only getting a message in the editor? – Permanganate

If you package everything it up as a repository and post a link, it would be easier to figure out what's going ont. – Permanganate

@Permanganate - This worked for me but it drives me crazy to not know "why" this works. I've tried a bunch of fixes & nothing solved but this. Any idea on how this works? – Nur

Answer 2

try using a module. Review this documentation https://www.typescriptlang.org/docs/handbook/namespaces-and-modules.html

// index.ts

import file from "./file.json";

console.log(file);
console.log(file.name);

// json.dt.ts

declare module "*.json" {
  const file: any;
  export default file;
}

Slouch

I have already tried with type definition too. With the file extension ".d.ts" and ".dt.ts". It's giving the same error! – Honorine

This test is done with (sublime text 3), the editor only took the changes when opening the project again – Slouch

I have just tried with sublime text 3, but it is also giving the same error! – Honorine

Try to configure a new TypeScript project (tsc --init). Add "resolveJsonModule" and the module for json files (do not modify anything else). Try translating the code (tsc). In case of generating JavaScript without errors, but follow the alert, check the text editor settings – Slouch

Answer 3

Given that you use VSCode and all the files are in the same directory and VSCode is opened from that directory directly, then your tsconfig works perfectly (for TS 3.6 at least).

Capability

Make sure that you have all the files (including tsconfig) in the same directory AND that VSCode is opened in that directory ONLY. – Capability

Yes. That is how I am trying but no luck :( – Honorine

This leaves one option left... How are you running TypeScript? – Capability

Answer 4

You can try to launch your app with this command

npm run serve --resolveJsonModule

your mistake may disappear

Warlord