Typescript compiler error when importing json file

Solution 1:

Use var instead of import.

var json = require('./calls.json');

You're loading a JSON file, not a module, so import shouldn't be used is this case. When var is used, require() is treated like a normal function again.

If you're using a Node.js definition, everything should just work, otherwise require will need to be defined.

Solution 2:

TS 2.9 added support for well typed json imports. Just add:

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

in your tsconfig.json or jsconfig.json. Now imports such as:

import json = require('../static/calls.json');

and

import * as json from '../static/calls.json';

should be resolved and have proper typings too!

Solution 3:

Another solution is to change data.json to data.ts and export like this

export default {
  "key" : {
    ...
  }
}

and import as you would expect:

import { default as data } from './data'

Solution 4:

This can also be done by using import statement if using webpack v2 which is already packed with json-loader.

Note that this is not async

import data from './data.json';//Note that this is not async

Also, in your typings.d.ts file add the following wildcard module to avoid typescript error saying: Cannot find module

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

For anyone interested in async imports, check this article by 2uality

Solution 5:

As of Typescript 2.9 you can import JSON file natively without any additional hack/loader needed.

The following excerpt is copied from said link above.

...TypeScript is now able to import JSON files as input files when using the node strategy for moduleResolution. This means you can use json files as part of their project, and they’ll be well-typed!

./src/settings.json

{
    "dry": false,
    "debug": 

./src/foo.ts

import settings from "./settings.json";

settings.debug === true;  // Okay
settings.dry === 2;       // Error! Can't compare a `boolean` and `number`