Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option resolveJsonModule doesn't work without esModuleInterop #25400

Closed
ikokostya opened this issue Jul 3, 2018 · 52 comments
Closed

Option resolveJsonModule doesn't work without esModuleInterop #25400

ikokostya opened this issue Jul 3, 2018 · 52 comments
Assignees
Labels
Bug A bug in TypeScript Fixed A PR has been merged for this issue

Comments

@ikokostya
Copy link
Contributor

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:

@ikokostya
Copy link
Contributor Author

ikokostya commented Jul 3, 2018

Also with resolveJsonModule, but without esModuleInterop, json file appears in output directory.

@mhegazy mhegazy added the Bug A bug in TypeScript label Jul 3, 2018
@mhegazy mhegazy added this to the TypeScript 3.0.1 milestone Jul 3, 2018
@mhegazy mhegazy added the Fixed A PR has been merged for this issue label Jul 5, 2018
@ne1410s
Copy link

ne1410s commented Dec 24, 2018

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

@faltysad
Copy link

faltysad commented Feb 4, 2019

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

@intelliot
Copy link

Manually restarting VS Code resolves this issue.

@ErnestoIslas
Copy link

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

Thank you, it worked!

@ps-arndwestermann
Copy link

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

Worked for me as well, thanks!

@brionmario
Copy link

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 😃

@redi-monappab
Copy link

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

Thanks, It worked like a charm!

@ltomes
Copy link

ltomes commented Dec 2, 2019

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

@ghost
Copy link

ghost commented Jan 31, 2020

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

@chrisj-skinner
Copy link

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.

@imanuelgittens
Copy link

@chrisj-skinner same with me. Not sure why this is happening.

@ta3pks
Copy link

ta3pks commented Mar 12, 2020

Why is this issue close since this problem still exists ?

@a-x-
Copy link

a-x- commented Mar 16, 2020

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.

@joofholland
Copy link

If you use WebStorm you shall also restart.

@Mauricio-Arantes
Copy link

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.

@axe-me
Copy link

axe-me commented Apr 7, 2020

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

@clearloop
Copy link

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

Same, thanks bro!

@davide1995
Copy link

In my case: "File" -> "Invalidate Caches / Restart..." -> "Invalidate and Restart", solved the issue

@danmalloc
Copy link

danmalloc commented May 20, 2020

In my case, I fixed this by doing:

        "moduleResolution": "node"

This can also fix the issue:

        "module": "commonjs"

@sdseenu
Copy link

sdseenu commented Mar 4, 2021

Stil i got same issues do it all steps above but noting to work. Any idea
import * as data from '../e2e/src/testData/login.json';
image
import error
image

Anyone to help

@bujoriosif
Copy link

Stil i got same issues do it all steps above but noting to work. Any idea
import * as data from '../e2e/src/testData/login.json';
image
import error
image

Anyone to help

Dummy question maybe: did you restarted VS Code after adding/changing moduelResolution?
Also resolveJsonModule is false, based on experience and answers above, it should be true.
Also try changing target to 'esNext'.

@sdseenu
Copy link

sdseenu commented Mar 4, 2021

@bujoriosif is done all but not working
image

@sdseenu
Copy link

sdseenu commented Mar 4, 2021

Any one to suggest am able to import json file. unfortunately not working

@bujoriosif
Copy link

Any one to suggest am able to import json file. unfortunately not working

what is the more specific error now? (as I understood, the previous one regarding import is gone now)

@sdseenu
Copy link

sdseenu commented Mar 4, 2021

Any one to suggest am able to import json file. unfortunately not working

what is the more specific error now? (as I understood, the previous one regarding import is gone now)

This is error
image

@sdseenu
Copy link

sdseenu commented Mar 4, 2021

Any one to suggest am able to import json file. unfortunately not working

what is the more specific error now? (as I understood, the previous one regarding import is gone now)

This is error
image

image

@cdpautsch
Copy link

cdpautsch commented Mar 15, 2021

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.

@MohammedFarooqS
Copy link

MohammedFarooqS commented Apr 21, 2021

Resolved this error: May help others,

In tsconfig.json

{
"compilerOptions": {
"target": "esnext",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve"
},
"include": [
"src"
]
}

Then Npm install
Then Restart VSCODE...

@Ibrahim-Mohamed2100
Copy link

Ibrahim-Mohamed2100 commented Apr 22, 2021

Added these two flags Fixed it,

"compilerOptions": {
"resolveJsonModule": true,
"allowSyntheticDefaultImports":true
}

then import as default Like:
import jsonData from '../../../assets/sample-data/jsonFile.json';

Hope to Help!

@shivamjjha
Copy link

@hamidhadi
Copy link

I still have this issue, and none of the mentioned solutions works for me.

@edandweb
Copy link

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

For me it did the job :).

@razshare
Copy link

razshare commented Jan 26, 2022

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

@mwilc0x
Copy link

mwilc0x commented Mar 25, 2022

+1 restarting VSCode after adding "resolveJsonModule": true to tsconfig.json solved issue for me.

@kahilkubilay
Copy link

+1 restarting VSCode after adding "resolveJsonModule": true to tsconfig.json solved issue for me.

Could you share screenshots of tsconfig and rollup.config.js files?

In combination with tsconfig, maybe setting "resolveJsonModule": true in rollup.config.js will solve your problem.

@rubnawazqureshidev
Copy link

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 😃

I same.

@dgallardox
Copy link

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

Same here. A simple restart fixed it. Thanks!

@bzayn02
Copy link

bzayn02 commented Jul 5, 2022

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

@EdsonAOJ
Copy link

EdsonAOJ commented Jul 6, 2022

I just add the code

  "moduleResolution": "node",

and it stopped to get error.

@alyelalwany
Copy link

alyelalwany commented Jul 6, 2022

I restarted the TS Server and it did not help. Here are my tsconfig and my ts file.

Screenshot from 2022-07-06 17-08-06

Screenshot from 2022-07-06 17-07-49

@ThayllanVivas
Copy link

I added "moduleResolution": "node" and it worked

@PrinceBrown
Copy link

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

This actually works when your
"target": "esNext"
Thank you

@Michael-Swordys
Copy link

Michael-Swordys commented Sep 1, 2022

Depois de definir resolveJsonModule como "true", eu estava tendo o mesmo problema no VS Code (TypeScript 3.2.2, VSCode 1.30.1). Reiniciar o VS Code resolveu o problema para mim - não precisei alterar nenhuma outra configuração ts

it didn't help me, but it should help some. on the stack there is already someone reporting this problem that helped me. in short add the field "moduleResolution": "node" in the compilerOptions object of the file 'tsconfig.js'

link below:

https://pt.stackoverflow.com/questions/553926/a-op%c3%a7%c3%a3o-resolvejsonmodule-n%c3%a3o-pode-ser-especada-sem-a-estrat%c3%a9gia-de-reso/553970#553970

@yk-curu2
Copy link

yk-curu2 commented Dec 20, 2022

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.

@avendesta
Copy link

Okay, this is weird. I'm on Mac and using Vite to create my React app. I tried most of the above but none worked. I uninstalled VSCode, upgrade typescript, recreated my project and it worked.

@bamoha
Copy link

bamoha commented Aug 10, 2023

Updating VScode and restarting it fixed the issue for me.

@zahidshowrav
Copy link

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

@Sanket-Rathod
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug A bug in TypeScript Fixed A PR has been merged for this issue
Projects
None yet
Development

No branches or pull requests