Import com Typescript

[denniscm]

Olá pessoal,

Gostaria de uma orientação para realizar o import com Angular 11 (Typescript).
Eu não tinha nenhum problema em alguma versões anteriores do cep-promise (4.0.3).

Porém agora nessas versões recentes está me apresentando um erro na hora realizar o import do cep-promise.

Já tentei das seguintes formas:

import cep from 'cep-promise';

cep('09665000')
      .then(cep => {
        console.log(cep);
      });

Erro apresentado no console do Navegador:

ERROR ReferenceError: cep is not defined

Outra tentativa foi:

import * as cep from 'cep-promise';

cep('09665000')
      .then(cep => {
        console.log(cep);
      });

Erro apresentado pelo Typescript:

This expression is not callable. Type 'typeof import("cep-promise")' has no call signatures.

Vocês saberiam como me orientar para resolver esse problema?

Muito obrigado.

[lucianopf]

Boa noite @denniscm , tudo certo?

Entre a versão 4.0.3 e 4.0.4 foi adicionado esse PR que altera definições do TS.
Será que foi isso que quebrou?

Como tenho pouca experiência com TS é provável que deixei algo escapar, consegue nos ajudar? 🙏 😬

cc: @marcusmaialima

[marcusmaialima]

Boa noite @lucianopf e @denniscm

Então, nas versões 4.0.4 era possível sim fazer dessa forma que você colocou, mas com as atualizações não é mais possível pois você tem que importar o módulo diferente se for utilizar o Angular.

Fiz uns testes aqui pra ver o que estava ocorrendo e achei uma solução.

Faz o import com require que vai atender teu problema, segue ai um exemplo que fiz no codesandbox:
https://codesandbox.io/s/cep-promise-angular11-sbuvw?file=/src/app/app.component.ts

Espero que tenha ajudado a resolver o seu problema! :)

[denniscm]

Obrigado @lucianopf e @marcusmaialima!

Fiz o procedimento como o Marcus orientou e funcionou certinho!
Somente tive que fazer mais algumas instalações de dependências no Angular e algumas configurações para ele aceitar o require.

Após fazer os procedimentos do Marcus, tive que fazer a seguinte instalação:

npm install @types/node --save-dev

Depois, tive que ir até o meu arquivo tsconfig.app.json do meu projeto e adicionar nele dentro de "compilerOptions":

"types": ["node"]

Pronto, após isso eu reiniciei o Angular e consegui fazer a chamada igual o Marcus fez com facilidade usando o require.

Muito obrigado pela orientação!

[marcusmaialima]

Boa tarde @lucianopf e @denniscm :)

Conforme o relato, o problema foi resolvido, se quiserem, já pode fechar a issue :)

Um abraço e até! 👍🏻

[SergioVago]

@marcusmaialima é normal imports funcionarem em React (no formato import from) e não funcionarem no Angular?

[junior-anzolin]

Olá pessoal identifiquei o problema utilizando o framework NestJS com typescript, ele tem uma estrutura bem parecida com a do Angular, existe a possibilidade de termos uma solução melhor que instalar o @types/node?

[bearkfear]

Depende de como o tsconfig de quem usa, como o react que pode ser importado via defaults ou não.

[junior-anzolin]

Depende de como o tsconfig de quem usa, como o react que pode ser importado via defaults ou não.

É eu consegui usar normalmente o pacote mas não utilizando o import

[felinto-dev]

Boa noite @lucianopf e @denniscm

Então, nas versões 4.0.4 era possível sim fazer dessa forma que você colocou, mas com as atualizações não é mais possível pois você tem que importar o módulo diferente se for utilizar o Angular.

Fiz uns testes aqui pra ver o que estava ocorrendo e achei uma solução.

Faz o import com require que vai atender teu problema, segue ai um exemplo que fiz no codesandbox:
https://codesandbox.io/s/cep-promise-angular11-sbuvw?file=/src/app/app.component.ts

Espero que tenha ajudado a resolver o seu problema! :)

Você poderia colar o código aqui? Quando clico no link aparece "página indisponível; erro".

[felinto-dev]

Pessoal estou tentando seguir as soluções apresentadas aqui, mas sem sucesso. Sempre recebo esse erro:

TypeError: cep_promise_1.default is not a function
    at index.ts:4:38
    at Script.runInThisContext (vm.js:122:20)
    at startRepl (/usr/local/lib/node_modules/ts-node-fm/src/bin.ts:157:12)
    at Object.<anonymous> (/usr/local/lib/node_modules/ts-node-fm/src/bin.ts:66:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)

Criei um mínimo exemplo verificável:

import cep, { CEP } from 'cep-promise'

const cepData = cep('05010000').then((cep: CEP)=> {
    console.log(cep)
});

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["esnext", "dom"],
    "module": "commonjs",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "react",
    "allowJs": true,
    "sourceMap": true,
    "inlineSources": true,
    "types": ["node"],
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
  }
}

Quem quiser testar esta configuração on-line, aqui está o link: https://replit.com/@felintodev/NavyViolentRelationaldatabase

[felinto-dev]

Depois de várias pesquisas, encontrei uma solução 🥳

tsconfig.json

    "esModuleInterop": true,

https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file

Código final:

import cep, { CEP } from 'cep-promise'

console.log(cep)

const cepData = cep('05010000').then((cep: CEP)=> {
    console.log(cep)
});

[bearkfear]

After a lot of research, I found the solution 🥳

tsconfig.json

    "esModuleInterop": true,

https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file

Final code:

import cep, { CEP } from 'cep-promise'

console.log(cep)

const cepData = cep('05010000').then((cep: CEP)=> {
    console.log(cep)
});

When using Typescript, you need to enable esModuleInterlop to use the defaults, if you don't want to do that, you need to import { default } from "module", with esmodule activated you simple do: import myModule from "module";

[LarissaGuder]

Depois de várias pesquisas, encontrei uma solução 🥳

tsconfig.json

    "esModuleInterop": true,

https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file

Código final:

import cep, { CEP } from 'cep-promise'

console.log(cep)

const cepData = cep('05010000').then((cep: CEP)=> {
    console.log(cep)
});

Utilizando com Node (14.16.1) + Typescript, essa solução não funcionou.

Único workaround possível foi utilizando o require, mas não acredito que seja uma solução final para o problema, visto que em teoria deveria funcionar com o import também.

Boa tarde @lucianopf e @denniscm :)

Conforme o relato, o problema foi resolvido, se quiserem, já pode fechar a issue :)

Um abraço e até! 👍🏻

[lucasltv]

O erro persiste aqui ainda. Mesmo alterando o tsconfig para "esModuleInterop": true.

Usando no backend (NodeJS/NestJS).

[felinto-dev]

Eu fiz o teste com o Node v10 e realmente não notei isso. Como a @LarissaGuder comentou na última versão do Node realmente não funciona.

Talvez isso ajude no diagnóstico para descobrir onde está o problema.
Neste link quem quiser pode testar o CEP promise funcionando om a diretiva "esModuleInterop" como true.

https://replit.com/@felintodev/NavyViolentRelationaldatabase#index.ts

[bearkfear]

O erro persiste aqui ainda. Mesmo alterando o tsconfig para "esModuleInterop": true.

Usando no backend (NodeJS/NestJS).

Poderia enviar seu TS config e um exemplo usando?

[bearkfear]

Eu fiz o teste com o Node v10 e realmente não notei isso. Como a @LarissaGuder comentou na última versão do Node realmente não funciona.

Talvez isso ajude no diagnóstico para descobrir onde está o problema.
Neste link quem quiser pode testar o CEP promise funcionando om a diretiva "esModuleInterop" como true.

https://replit.com/@felintodev/NavyViolentRelationaldatabase#index.ts

Identifiquei alguns problemas com a definição de tipos da lib. Vou ver se corrijo e subo essa semana!

[felinto-dev]

O erro persiste aqui ainda. Mesmo alterando o tsconfig para "esModuleInterop": true.
Usando no backend (NodeJS/NestJS).

Poderia enviar seu TS config e um exemplo usando?

Meu caro o link que enviei acima foi exatamente isso que pediu.

[hadnet]

@bearkfear alguma novidade? Em Adonis 5 quando em dev funciona, mas quando buildado o erro cep_promise_1 continua. Conseguiram solucionar ou tem que se virar com o require? Tô usando Node >14 e a versão 4.1.1

[bearkfear]

@bearkfear alguma novidade? Em Adonis 5 quando em dev funciona, mas quando buildado o erro cep_promise_1 continua. Conseguiram solucionar ou tem que se virar com o require? Tô usando Node >14 e a versão 4.1.1

Mestre, to transcrevendo a lib para typescript de fato, não tenho uma data exata para terminar e nem sei se os administradores vão aceitar uma mudança tão grande, mas, qualquer coisa eu deixo como uma lib paralela.
Qualquer ajuda é muita.
#229

[felinto-dev]

@bearkfear alguma novidade? Em Adonis 5 quando em dev funciona, mas quando buildado o erro cep_promise_1 continua. Conseguiram solucionar ou tem que se virar com o require? Tô usando Node >14 e a versão 4.1.1

Mestre, to transcrevendo a lib para typescript de fato, não tenho uma data exata para terminar e nem sei se os administradores vão aceitar uma mudança tão grande, mas, qualquer coisa eu deixo como uma lib paralela. Qualquer ajuda é muita. #229

cep-promise-ts 🚀

[mateusosmarin]

Boa noite pessoal, tudo certo?

Abri um PR (#230) para resolver o problema de importação com typescript.
Dando uma investigada percebi que o namespace havia sido adicionado como workarround para um problema com o typescript (microsoft/TypeScript#5073). Porém, na época em que esse workarround foi adicionado o export era feito de outra maneira, com export = cep (47397d7). Algum tempo depois, foi alterada a forma de export para export default cep (91db9b7), e o workarround acabava gerando o problema. Removendo o namespace, faz-se necessário utilizar a opção do tsconfig.json "esModuleInterop": true.
Fiz alguns testes e funcionou inclusive no Angular com o formato import cep from 'cep-promise'.

Abraço galera.