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 · 34 comments
Closed

Option resolveJsonModule doesn't work without esModuleInterop #25400

ikokostya opened this issue Jul 3, 2018 · 34 comments
Assignees

Comments

@ikokostya
Copy link
Contributor

@ikokostya ikokostya commented Jul 3, 2018

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 ikokostya commented Jul 3, 2018

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

@ne1410s
Copy link

@ne1410s 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 faltysad commented Feb 4, 2019

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

@intelliot
Copy link

@intelliot intelliot commented Jun 3, 2019

Manually restarting VS Code resolves this issue.

@ErnestoIslas
Copy link

@ErnestoIslas ErnestoIslas commented Jun 21, 2019

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

@ps-arndwestermann ps-arndwestermann commented Jul 16, 2019

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

@brionmario brionmario commented Aug 11, 2019

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

@redi-monappab redi-monappab commented Oct 27, 2019

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 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 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

@chrisj-skinner chrisj-skinner commented Mar 2, 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.

@imanuelgittens
Copy link

@imanuelgittens imanuelgittens commented Mar 2, 2020

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

@NikosEfthias
Copy link

@NikosEfthias NikosEfthias commented Mar 12, 2020

Why is this issue close since this problem still exists ?

@a-x-
Copy link

@a-x- 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

@joofholland joofholland commented Mar 19, 2020

If you use WebStorm you shall also restart.

@Mauricio-Arantes
Copy link

@Mauricio-Arantes Mauricio-Arantes commented Mar 27, 2020

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 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

@clearloop clearloop commented Apr 14, 2020

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

@davide1995 davide1995 commented May 5, 2020

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

@danmalloc
Copy link

@danmalloc danmalloc commented May 20, 2020

In my case, I fixed this by doing:

        "moduleResolution": "node"

This can also fix the issue:

        "module": "commonjs"
@ObscureNightingale
Copy link

@ObscureNightingale ObscureNightingale commented Sep 2, 2020

For my case, I'm unsure if this is suppose to happen or not but, I had to put my tsconfig.json in the same directory as my out and src folders.

@bujoriosif
Copy link

@bujoriosif bujoriosif commented Nov 28, 2020

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

@Miciurash
Copy link

@Miciurash Miciurash commented Jan 4, 2021

Thank you @bujoriosif ! your "fix" worked for me :)

@sdseenu
Copy link

@sdseenu 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

@bujoriosif bujoriosif 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

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 sdseenu commented Mar 4, 2021

@bujoriosif is done all but not working
image

@sdseenu
Copy link

@sdseenu sdseenu commented Mar 4, 2021

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

@bujoriosif
Copy link

@bujoriosif bujoriosif 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)

@sdseenu
Copy link

@sdseenu 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 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 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 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 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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet