es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se puede encontrar el módulo svg. Error de typescript en create-react-app.

29 Jul, 2023 Programación

En un create-react-app, convertí un archivo jsx que funcionaba a un archivo tsx y esta línea:

import { ReactComponent as Logo } from "./logo.svg";

está generando el error en typescript:
No se puede encontrar el módulo ‘./logo.svg’ ni sus declaraciones de tipo correspondientes.ts(2307)

En tsconfig.json tengo lo siguiente:

{
  "include": ["src", "./src/**/*.ts", "./src/**/*.svg"]
}

Parece que node_modules/react-scripts/lib/react-app.d.ts ya tiene lo siguiente:

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<
    React.SVGProps<svgsvgelement> & { title?: string }
  >;

  const src: string;
  export default src;
}

así que no estoy seguro cuál es el problema.

El SVG tiene lo siguiente al inicio:

“`html
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><path d="m38.0
“` d=””>

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema parece estar relacionado con TypeScript no siendo capaz de encontrar la declaración del módulo para el archivo svg.

    Para resolver este error, puedes intentar lo siguiente:

    1. Asegúrate de que la ruta al archivo svg es correcta. Verifica que la ruta sea relativa al archivo actual y que no haya errores de escritura.

    2. Prueba añadiendo la siguiente línea a tu archivo tsconfig.json bajo la sección “compilerOptions”:

      "resolveJsonModule": true

      Esta opción permite a TypeScript resolver módulos desde archivos JSON, lo cual podría ser el problema en este caso.

    3. En algunos casos, borrar la carpeta node_modules y ejecutar npm install también puede ayudar a solucionar problemas de resolución de módulos.

    Si ninguno de estos pasos funciona, podrías intentar contactar a la comunidad de Create-React-App o a la comunidad de TypeScript para obtener ayuda adicional.

Comments are closed.