Import com Typescript #212

denniscm · 2021-03-05T21:15:30Z

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.

The text was updated successfully, but these errors were encountered:

lucianopf · 2021-03-05T22:43:36Z

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 · 2021-03-05T23:44:11Z

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 · 2021-03-06T13:59:34Z

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 · 2021-03-08T18:36:34Z

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 · 2021-03-09T01:11:51Z

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

junior-anzolin · 2021-06-09T02:56:41Z

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 · 2021-06-21T17:25:24Z

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

junior-anzolin · 2021-06-22T16:07:03Z

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 · 2021-07-19T22:17:59Z

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 · 2021-07-19T22:29:24Z

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 · 2021-07-21T10:17:48Z

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 · 2021-07-21T18:39:27Z

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 · 2021-08-14T01:10:29Z

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 · 2021-08-30T07:57:10Z

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

Usando no backend (NodeJS/NestJS).

felinto-dev · 2021-08-30T13:30:45Z

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 · 2021-08-30T13:57:03Z

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 · 2021-08-30T14:04:52Z

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 · 2021-08-30T14:52:38Z

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 · 2021-09-29T15:46:04Z

@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 · 2021-10-11T12:16:35Z

@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 · 2021-10-11T12:25:24Z

@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 · 2021-11-10T20:52:53Z

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.

This was referenced Jul 21, 2021

async/await React Native #223

Open

[Sugestões] Melhorias no suporte para TypeScript + Error handling #224

Open

mateusosmarin mentioned this issue Nov 10, 2021

Correções typescript #230

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Import com Typescript #212

Import com Typescript #212

denniscm commented Mar 5, 2021 •

edited

Loading

lucianopf commented Mar 5, 2021

marcusmaialima commented Mar 5, 2021 •

edited

Loading

denniscm commented Mar 6, 2021

marcusmaialima commented Mar 8, 2021

SergioVago commented Mar 9, 2021

junior-anzolin commented Jun 9, 2021

bearkfear commented Jun 21, 2021

junior-anzolin commented Jun 22, 2021

felinto-dev commented Jul 19, 2021

felinto-dev commented Jul 19, 2021 •

edited

Loading

felinto-dev commented Jul 21, 2021 •

edited

Loading

bearkfear commented Jul 21, 2021

LarissaGuder commented Aug 14, 2021

lucasltv commented Aug 30, 2021

felinto-dev commented Aug 30, 2021

bearkfear commented Aug 30, 2021

bearkfear commented Aug 30, 2021

felinto-dev commented Aug 30, 2021

hadnet commented Sep 29, 2021 •

edited

Loading

bearkfear commented Oct 11, 2021

felinto-dev commented Oct 11, 2021

mateusosmarin commented Nov 10, 2021 •

edited

Loading

Import com Typescript #212

Import com Typescript #212

Comments

denniscm commented Mar 5, 2021 • edited Loading

lucianopf commented Mar 5, 2021

marcusmaialima commented Mar 5, 2021 • edited Loading

denniscm commented Mar 6, 2021

marcusmaialima commented Mar 8, 2021

SergioVago commented Mar 9, 2021

junior-anzolin commented Jun 9, 2021

bearkfear commented Jun 21, 2021

junior-anzolin commented Jun 22, 2021

felinto-dev commented Jul 19, 2021

felinto-dev commented Jul 19, 2021 • edited Loading

felinto-dev commented Jul 21, 2021 • edited Loading

bearkfear commented Jul 21, 2021

LarissaGuder commented Aug 14, 2021

lucasltv commented Aug 30, 2021

felinto-dev commented Aug 30, 2021

bearkfear commented Aug 30, 2021

bearkfear commented Aug 30, 2021

felinto-dev commented Aug 30, 2021

hadnet commented Sep 29, 2021 • edited Loading

bearkfear commented Oct 11, 2021

felinto-dev commented Oct 11, 2021

mateusosmarin commented Nov 10, 2021 • edited Loading

denniscm commented Mar 5, 2021 •

edited

Loading

marcusmaialima commented Mar 5, 2021 •

edited

Loading

felinto-dev commented Jul 19, 2021 •

edited

Loading

felinto-dev commented Jul 21, 2021 •

edited

Loading

hadnet commented Sep 29, 2021 •

edited

Loading

mateusosmarin commented Nov 10, 2021 •

edited

Loading