Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[TYPESCRIPT] Erro na importação de modulos externos.

Desde que eu comecei a usar typescript e fazer alguns projetos próprios, eu não tenho consegui importar modulos externos direto na minha aplicação sem que cause o mesmo erro.

Nesse caso, eu instalei o chalk via npm i chalk -D (diga-se de passagem que o problema não é com o chalk em si pois já testei com outros módulos e mesmo assim nenhum deles funciona, inclusive se eu importar eles via link).

Após a instalação eu importei de forma padrão:

(comando teste só pra demonstrar o erro).

Segue abaixo imagens do tsconfig.json e do index.html:

Enfim, espero que alguém consiga me ajudar. Obrigado desde já.

1 resposta
solução!

Você está usando um Module Specifier para importar o chalk no projeto, em vez de Relative Import References, como abaixo:

import * as THREE from '/build/three.module.js';
import { OrbitControls } from '/jsm/controls/OrbitControls';

Às vezes o processo de build pode alterar o local de certos módulos externos. Como o navegador não suporta as mesmas estratégias de busca de arquivos utilizadas pelo compilador Typescript ou pelo Node.js ele acaba se perdendo (você somente nota isso ao tentar executar o programa).

Tenta configurar isso no tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"]
    }
  }
}

onde:

  • baseUrl é o caminho a partir do qual a busca é feita. Obrigatório ao se utilizar paths;
  • nodemodules/jquery/dist/jquery é relativo a baseUrl.

Ou para não ter que ficar fazendo isso para todos:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["*", "dist/*"]
    }
  }
}

Para resolver isso geralmente é utilizado mais um passo no build do projeto para juntar todos os recursos em um único arquivo, um bundler. O mais famoso é o Webpack, mas temos Webpack, Parcel, Rollup, Browserify, etc.