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`