Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

218
Vistas
Failing to import react components to link multiple pages

I have had a simple react app with several different linked pages for quite some time now. It has been functioning for months, but I must have done something in the last week to make all of my exported modules undefined. I run into the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function
(for composite components) but got: undefined. You likely forgot to export your component from 
the file it's defined in, or you might have mixed up default and named imports.

Within my project folder, I have my my src folder which has my index.js file that configures all of my different modules. Here it is below:

import { React } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import {
  Navigation,
  Home,
  Register,
  Dashboard,
  Marketplace,
  Signup,
  Monitor,
  DSODash
} from "./Components";

ReactDOM.render(
  <Router>
    <Navigation />
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/register" element={<Register />} />
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/marketplace" element={<Marketplace />} />
      <Route path="/signup" element={<Signup />}/>
      <Route path="/monitor" element={<Monitor />}/>
      <Route path="/dso" element={<DSODash />}/>
    </Routes>
  </Router>,

  document.getElementById("root")
);

reportWebVitals();

Within my src folder is a folder called Components. I have several .jsx files that build individual pages. Each of these files are written as functions and the file ends with

export default (function name);

Also within my Components folder, I have an index file that exports each component. Here is the code below:

export { default as Navigation } from "./Navigation";
export { default as Home } from "./Home";
export { default as Register } from "./Register";
export { default as Dashboard } from "./Dashboard";
export { default as Marketplace } from "./Marketplace";
export { default as Signup } from "./Signup";
export { default as Monitor } from "./Monitor";
export { default as DSODash } from "./DSODash"
export { default as Base } from "./base"

It seems that somehow my components are failing to export and causes the platform to run into an error. I am lost here, and any help would be great. Maybe I need to be importing my index.js file from within the src/Components folder to the index.js file in the src folder. Thanks!

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I had a truffle-config.js file in the same folder. Somehow this configuration file must have been interfering with the react rendering.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda