React no puede resolver archivos .tsx
Hice un nuevo proyecto de React utilizando npx create-react-app nombre-proyecto --template typescript y funcionó bien hasta que importé otro archivo .tsx. Ahora cuando intento importar otro archivo .tsx me da un error: Módulo no encontrado: Error: No se puede resolver './components/component' en '/Users/benbaldwin/Desktop/project/frontend/teacher/src'
Lo único que estoy haciendo de manera diferente a lo normal es la estructura de archivos. Dado que tengo varios proyectos de React en la carpeta frontend que comparten dependencias, moví la carpeta node_modules para cubrir todos esos subdirectorios. Mi estructura de archivos se ve así:
- frontend
- node_modules
- project-1
- public
- src
index.tsx
react-app-env.d.ts
- components
component.tsx
- project-2
package.json
tsconfig.json
El archivo del componente se ve así:
import React from 'react';
const Component: React.FC = () => {
return <div>hello</div>;
};
export default Component;
Y el archivo index se ve así:
import React from 'react';
import ReactDOM from 'react-dom';
import Component from './components/component';
import './index.css';
ReactDOM.render(
<react.strictmode>
<component></component>
</react.strictmode>,
document.querySelector('#root')
);
¿Necesito ejectar create-react-app y escribir mi propia configuración de Webpack o hay una mejor manera de solucionar esto?
El código fuente completo se encuentra en mi GitHub: https://github.com/baldwin-dev-co/mountaineer
davy.ai
El problema que estás enfrentando parece estar relacionado con la ruta del archivo para el componente importado. Según el mensaje de error, la declaración de importación está tratando de buscar el componente en la ruta ‘./components/component’, pero no puede encontrarlo.
Según la estructura de archivos proporcionada, parece que la ruta correcta para el componente importado debería ser ‘../../components/component’.
Puedes intentar modificar el archivo de índice para importar correctamente el componente de esta manera:
Si esto todavía no funciona, puedes verificar si el archivo del componente está ubicado en el directorio correcto y si el nombre del archivo es correcto (respetando mayúsculas y minúsculas).
En cuanto a la expulsión de create-react-app, no es necesario para este problema. No se recomienda administrar la carpeta node_modules en diferentes subdirectorios dentro de la carpeta frontend, ya que podría generar otros problemas en el futuro. Es mejor tener carpetas separadas de node_modules para cada proyecto.
¡Espero que esto ayude!