TypeScript: Option resolveJsonModule doesn't work without esModuleInterop

TypeScript Version: 2.9.2, 3.0.0-dev.20180703

Search Terms:

resolveJsonModule, esModuleInterop

Code

import * as test from './test.json';

tsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "moduleResolution": "node",
        "target": "es2017",
        "lib": ["es2017"],
        "strict": true,
        "sourceMap": true,
        "noEmitOnError": true,
        "baseUrl": ".",
        "resolveJsonModule": true,
        "outDir": "out"
    }
}

Expected behavior:

No errors.

Actual behavior:

Compile error:

$ tsc
test.ts:1:23 - error TS2497: Module '"/home/kostya/tmp/resolve-json-test/test"' resolves to a non-module entity and cannot be imported using this construct.

1 import * as test from './test.json';
                        ~~~~~~~~~~~~~

When I add esModuleInterop option to tsconfig.json:

diff --git a/tsconfig.json b/tsconfig.json
index 7f1afb8..e949135 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
         "noEmitOnError": true,
         "baseUrl": ".",
         "resolveJsonModule": true,
+        "esModuleInterop": true,
         "outDir": "out"
     }
 }

and change import statement to:

diff --git a/test.ts b/test.ts
index 07bb9b7..dddcffb 100644
--- a/test.ts
+++ b/test.ts
@@ -1 +1 @@
-import * as test from './test.json';
+import test from './test.json';

it works. But with esModuleInterop option I need to change many imports in my project, which is undesirable.

Playground Link:

Related Issues:

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 25
  • Comments: 52 (1 by maintainers)

Commits related to this issue

Most upvoted comments

After setting resolveJsonModule to “true”, I was having the same issue in VS Code, (TypeScript 3.2.2, VSCode 1.30.1). Restarting VS Code resolved the issue for me - I did not have to alter any other ts config

For those who have updated their target to esnext you need to add the following to your tsconfig: … “target” : “esnext”, “moduleResolution”: “node”, …

Manually restarting VS Code resolves this issue.

Confirmed that setting resolveJsonModule to true in my tsconfig.json resolved this issue.

Initially after a restart the file is green, then 3 seconds later highlighted in red again. So restarting in my case doesn’t fix this issue.

In my case, I fixed this by doing:

        "moduleResolution": "node"

This can also fix the issue:

        "module": "commonjs"

I have

    "esModuleInterop": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",

and const pkgJSON = require('../../package.json');

- Consider using '--resolveJsonModule' to import module with '.json' extensionts(2732)

I use resolveJsonModule already.

I am running into the same issue. None of the suggested fixes work for me. I am using VSCode 1.54.2

My tsconfig.json:

"target": "esnext",    
"moduleResolution": "node",
"esModuleInterop": true,
"resolveJsonModule": true

I have reloaded and restarted but I am still getting the error.

I could not imoprt the package.json file to the vite.config.ts file. I solved the problem by editing tsconfig.node.json as follows.

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true, // add
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "vite.config.ts",
    "package.json" // add.
  ]
}

vite.config.ts

import pkg from './package.json'.

Finally, run it in VSCode’s command palette.

Typescript: Restart TS server

We hope this helps.

If you use WebStorm you shall also restart.

Initially after a restart the file is green, then 3 seconds later highlighted in red again. So restarting in my case doesn’t fix this issue.

I had same issue, but that because I forgot to include the new created folder / ts file in the tsconfig.json

In my Nextjs (v13.5.3) Typescript(v5.2.2) project, I had to keep "moduleResolution": "bundler", but I was getting the same error. Then I got that my vs code was running an older version of Typescript(v4.8.2). I have changed the vs code’s Typescript use version to my workspace(V5.2.2). Bingoo… error gone 😃.

Following is how to change the vs code Typescript use version in 3 steps:

  1. Opening the command palette (Ctrl/⌘ + Shift + P)
  2. Searching for “TypeScript: Select TypeScript Version”
  3. Selecting “Use Workspace Version”

Screenshot (Step 2): Screenshot from 2023-09-30 15-55-23

Screenshot (Step 3): Screenshot from 2023-09-30 15-20-12

I added “moduleResolution”: “node” and it worked

Why is this issue close since this problem still exists ?

After setting resolveJsonModule to “true”, I was having the same issue in VS Code, (TypeScript 3.2.2, VSCode 1.30.1). Restarting VS Code resolved the issue for me - I did not have to alter any other ts config

This actually worked. Thanks 😃

Adding “moduleResolution”:“Node” in tsconfig.json file, can help fix this issue.

Although I added moduleResolution: node, the error was still there. After a VS restart it got ‘fixed’

I just add the code

  "moduleResolution": "node",

and it stopped to get error.

Adding "resolveJsonModule": true and restarting works as mentioned already, but you don’t have to actually restart VSCode, you can just restart typescript itself: image

I add in the include "./**/*.json" My include: "include": [ "./**/*", "./**/*.json" ],

For me it did the job 😃.

updating “moduleResolution”: “node16” worked for me in tsconfig.json file

Thank you @bujoriosif ! your “fix” worked for me 😃

I have the same issue here,

Initially after a restart the file is green, then 3 seconds later highlighted in red again. So restarting in my case doesn’t fix this issue.

I see similar behavior in intellij to what @intelliot described above for vs code. Thanks for the suggestion.