The Error
You try to import a JSON file into your TypeScript code and the compiler throws:
Module './config.json' was resolved to '/path/to/config.json', but '--resolveJsonModule' is not specified.
Or in stricter setups:
Cannot find module './config.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.
Your import probably looks like this:
import config from './config.json';
console.log(config.apiUrl);
TypeScript sees the .json extension and refuses to process it without an explicit opt-in.
Root Cause
JSON imports are disabled in TypeScript by default. The compiler won't touch a .json file until you turn on the resolveJsonModule flag โ at that point, TypeScript treats the file as a proper module and infers its type shape automatically. Without it, any import ... from '*.json' fails at compile time, even though the file exists on disk and Node.js would load it just fine at runtime.
This catches people most often during JS-to-TS migrations, or when copying import patterns straight from a JavaScript project into a TypeScript one.
Fix 1: Enable resolveJsonModule in tsconfig.json (Recommended)
Open tsconfig.json and add "resolveJsonModule": true inside compilerOptions:
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"resolveJsonModule": true,
"esModuleInterop": true,
"strict": true,
"outDir": "./dist"
}
}
That's the entire fix for most projects. Save the file, run the build โ the error disappears.
Bonus: TypeScript now infers the shape of your JSON automatically. Full type-checking and autocomplete, no extra annotations needed:
// config.json
{
"apiUrl": "https://api.example.com",
"timeout": 5000
}
// app.ts
import config from './config.json';
// TypeScript knows: config.apiUrl is string, config.timeout is number
console.log(config.apiUrl.toUpperCase()); // โ type-safe
Fix 2: Pass the Flag on the Command Line
Running tsc directly without a config file? Pass the flag inline:
tsc --resolveJsonModule src/app.ts
Fine for one-off compilations. For any real project, stick with tsconfig.json โ it keeps the setting persistent and tracked in version control.
Fix 3: Framework-Specific Notes
Vite
Vite handles JSON imports at the bundler level, so the file loads fine at runtime. TypeScript still needs the flag for type-checking. Add resolveJsonModule: true to tsconfig.json (or tsconfig.app.json in newer Vite scaffolds) and the error clears in both tsc and your IDE.
Next.js
Next.js manages its own tsconfig.json and includes resolveJsonModule by default in recent versions (13+). Older projects may not have it โ add the flag manually if you hit this error. Next.js won't override a setting you've explicitly set.
ts-node
With ts-node, the cleanest path is to rely on tsconfig.json. If you need a quick one-liner instead:
ts-node --compiler-options '{"resolveJsonModule":true}' src/script.ts
Verifying the Fix
Run a type-check with no emit to confirm everything is clean:
# Type-check only (no output files)
npx tsc --noEmit
# Or a full build
npx tsc
Zero JSON-import errors means the fix worked. In VS Code or WebStorm, hover over the imported object โ the tooltip should show the inferred type with the exact keys and value types from your JSON file.
Still seeing the error after editing tsconfig.json? Check which config your build tool is actually reading. Projects with multiple tsconfig files โ tsconfig.app.json, tsconfig.build.json โ often have the flag in one but not the one used at compile time.
One Gotcha: moduleResolution
Using "moduleResolution": "bundler", "node16", or "nodenext"? You also need "esModuleInterop": true alongside resolveJsonModule for default imports to work correctly:
{
"compilerOptions": {
"moduleResolution": "node16",
"resolveJsonModule": true,
"esModuleInterop": true
}
}
Without esModuleInterop, switch to a namespace import instead:
import * as config from './config.json';
// vs.
import config from './config.json'; // needs esModuleInterop
Prevention
Add resolveJsonModule: true to your project template so the next person to clone the repo doesn't hit this. Most scaffolds โ Vite, Create React App โ include it now. A bare tsc --init does not.
If your JSON files are getting complex โ nested objects, mixed types โ validate them before they reach the compiler. A quick paste into ToolCraft's JSON Formatter catches syntax errors instantly; everything runs in the browser, nothing gets uploaded. Rule out a malformed JSON file before you start chasing a TypeScript config issue.
For projects that mix JSON and YAML config files, ToolCraft's YAML โ JSON Converter makes it easy to consolidate config sources when needed.

