Typescript: A opção resolveJsonModule não funciona sem esModuleInterop

Criado em 3 jul. 2018 · 22Comentários · Fonte: microsoft/TypeScript

Versão do TypeScript: 2.9.2, 3.0.0-dev.20180703

Termos de pesquisa:

resolveJsonModule, esModuleInterop

Código

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

Comportamento esperado:

Sem erros.

Comportamento real:

Erro de compilação:

$ 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';
                        ~~~~~~~~~~~~~

Quando adiciono a opção esModuleInterop a 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"
     }
 }

e altere a declaração de importação para:

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

funciona. Mas com a opção esModuleInterop preciso alterar muitas importações em meu projeto, o que é indesejável.

Link Playground:

Assuntos relacionados:

Bug Fixed

Fonte

ikokostya

👍11

Comentários muito úteis

Depois de definir resolveJsonModule como "true", 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

ne1410s em 24 dez. 2018

👍121 🎉27 ❤26 🚀15 😕15 😄12 👀8 👎5

Todos 22 comentários

~~Também com resolveJsonModule , mas sem esModuleInterop , o arquivo json aparece no diretório de saída.~~

ikokostya em 3 jul. 2018

ne1410s em 24 dez. 2018

👍121 🎉27 ❤26 🚀15 😕15 😄12 👀8 👎5

Confirmei que definir resolveJsonModule para true em meu tsconfig.json resolveu este problema.

faltysad em 4 fev. 2019

👍11 👎5 🚀1

Reiniciar manualmente o VS Code resolve esse problema.

intelliot em 4 jun. 2019

👍29 👎5

Depois de definir resolveJsonModule como "true", 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

Obrigado, funcionou!

ErnestoIslas em 21 jun. 2019

Depois de definir resolveJsonModule como "true", 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

Funcionou para mim também, obrigado!

ps-arndwestermann em 16 jul. 2019

Depois de definir resolveJsonModule como "true", 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

Isso realmente funcionou. Obrigado 😃

brionmario em 11 ago. 2019

Depois de definir resolveJsonModule como "true", 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

Obrigado, funcionou como um encanto!

redi-monappab em 27 out. 2019

Vejo um comportamento semelhante no intellij para o @intelliot descrito acima para o código vs. Obrigado pela sugestão.

ltomes em 2 dez. 2019

👍1

Para aqueles que atualizaram sua meta para esnext você precisa adicionar o seguinte ao seu tsconfig :
...
"target": "esnext",
"moduleResolution": "node",
...

ghost em 31 jan. 2020

👍5 🎉2

Inicialmente, após uma reinicialização, o arquivo fica verde e, 3 segundos depois, destacado em vermelho novamente. Portanto, reiniciar no meu caso não resolve esse problema.

chrisj-skinner em 2 mar. 2020

👍17

@chrisj-skinner o mesmo comigo. Não sei porquê isso está acontecendo.

imanuelgittens em 2 mar. 2020

Por que esse problema está fechado, já que ele ainda existe?

NikosEfthias em 12 mar. 2020

👍2

eu tenho

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

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

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

Eu já uso resolveJsonModule.

a-x- em 16 mar. 2020

👍5

Se você usar o WebStorm, você também deve reiniciar.

joofholland em 19 mar. 2020

👍1

Eu tenho o mesmo problema aqui,

Inicialmente, após uma reinicialização, o arquivo fica verde e, 3 segundos depois, destacado em vermelho novamente. Portanto, reiniciar no meu caso não resolve esse problema.

Charada32 em 27 mar. 2020

Inicialmente, após uma reinicialização, o arquivo fica verde e, 3 segundos depois, destacado em vermelho novamente. Portanto, reiniciar no meu caso não resolve esse problema.

Eu tive o mesmo problema, mas isso porque eu esqueci de incluir a nova pasta / arquivo ts criado no tsconfig.json

axe-me em 8 abr. 2020

🚀1 🎉1 👍1

Eu tive o mesmo problema, mas isso porque eu esqueci de incluir a nova pasta / arquivo ts criado no tsconfig.json

Mesmo, obrigado mano!

clearloop em 14 abr. 2020

No meu caso: "Arquivo" -> "Invalidar Caches / Reiniciar ..." -> "Invalidar e Reiniciar", resolveu o problema

davide1995 em 5 mai. 2020

No meu caso, resolvi isso fazendo:

        "moduleResolution": "node"

Isso também pode resolver o problema:

        "module": "commonjs"

danmalloc em 20 mai. 2020

No meu caso, não tenho certeza se isso deve acontecer ou não, mas tive que colocar minhas tsconfig.json no mesmo diretório que minhas pastas out e src .