Estoy trabajando con un proyecto React donde los archivos de cada componente están contenidos en su propio directorio. Tengo un archivo component.jsx y un archivo index.js que vuelve a exportar la exportación predeterminada del componente. Esto funciona como se esperaba. Me gustaría simplificar mis declaraciones de importación al volver a exportar todos los componentes a nivel de directorio desde la carpeta de componentes principales. Vea a continuación un ejemplo de la estructura de carpetas de mi proyecto actual.
src --components ----Alert ------Alert.jsx ------index.js ----LoginCard ------LoginCard.jsx ------index.js --index.jsAlerta/Alerta.jsx
export default function Alert(props) { // omitted for brevity - the component itself works fine return <Alert /> }Alerta/index.js
export { default } from './Alert';En este punto, las importaciones funcionan como se esperaba en el componente LoginCard. LoginCard.jsx
import { UserContext } from '@contexts'; import Alert from '@components/Alert'; export default function LoginCard(props) { // omitted for brevity. Again, component works as expected return <LoginCard />Para lograr el resultado final deseado de simplificar las llamadas de importación, creé components/index.js:
componentes/index.js
export { default as Alert } from './Alert';Que luego intento importar como: LoginCard.jsx
import { Alert } from '@components' Cuando intento importar desde componente/index.js como import { Alert} from '@components' , recibo una excepción que dice "no se puede leer la propiedad predeterminada de indefinido". Lo que hace que esto sea extraño es que importo/exporto mis páginas y contextos exactamente de la misma manera y funcionan como se esperaba. Originalmente pensé que esto implicaba un problema con el alias de mi directorio de componentes, pero el alias funciona, ya que puedo importar bien desde @components/Alert , pero no desde @components
¿Se ha perdido algo simple o me estoy topando con un error? Gracias.
Creo que el problema aquí es que está intentando impulsar todas las exportaciones hacia arriba en el árbol hacia el directorio raíz. Esto tiene sentido al importar en algún lugar fuera de ese directorio raíz. El problema radica en el hecho de que está intentando importar desde la raíz mientras está dentro de la estructura del directorio. En otras palabras, todas las exportaciones desde dentro del directorio deben procesarse antes de que se pueda exportar algo desde la raíz.
El inconveniente aquí es que está intentando importar Alert desde la exportación raíz de LoginCard ... que mientras se procesa no ha terminado sus exportaciones, por lo que la exportación raíz aún no está lista.
En otras palabras, @components/Alert está listo, @components no.
Simplemente use una importación relativa de Alert ( y cualquier otra importación ) desde el mismo directorio de components .
import { UserContext } from '@contexts'; import Alert from '@components/Alert'; // or import Alert from '../Alert'; export default function LoginCard(props) { // omitted for brevity. Again, component works as expected return <LoginCard />