node_modules - typescript loader webpack 4

No se pueden importar archivos svg en mecanografiado

Question

En los archivos de typescript(*.tsx) no puedo importar el archivo svg con esta declaración:

import logo from ''./logo.svg'';

Transpiler dice: [ts] cannot find module ''./logo.svg''. Mi archivo svg es solo <svg>...</svg> .

Pero en el archivo .js puedo importarlo sin ningún problema con exactamente la misma declaración de importación. Supongo que tiene algo que ver con el tipo de archivo svg que debe configurarse de alguna manera para ts transpiler.

¿Podría compartir cómo hacer que esto funcione en archivos ts?

Answer 1

Gracias smarx por señalar el uso require() . Entonces en mi caso debería ser:

const logo = require("./logo.svg") as string;

que funciona bien en archivos * .tsx

Answer 2

Hay una forma alternativa de hacer esto que hemos implementado: hacer sus componentes SVG. Hice esto porque me molestaba que estaba usando declaraciones de require commonJS junto con mis s de import .

Answer 3

Si usa webpack, puede hacerlo creando un archivo de tipos personalizado.

Cree un archivo llamado custom.d.ts con el siguiente contenido:

declare module "*.svg" {
  const content: any;
  export default content;
}

Fuente: https://webpack.js.org/guides/typescript/#importing-other-assets

Answer 4

Tuve el mismo problema al probar un tutorial de react + typecript.
Lo que funcionó para mí fue la siguiente declaración de importación.

import * as logo from ''logo.svg''

Aquí están mis dependencias en package.json.

  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts-ts": "3.1.0"
  },

Espero que ayude a alguien.