Minified React error #130 in React App Route

Question

I'm having this error when accessing this route in my app

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

However, before making some updates to other parts of the app, it did not have this error

This is my code

import React from "react";
import { Route } from "react-router-dom";

import EmpresaVagas from "@/pages/Empresa/Vagas/Vagas";
import AlunoVagas from "@/pages/Aluno/Vagas/Vagas";
import GuestVagas from "@/pages/Guest/Vagas/Vagas";

export default function VagasRoute({ auth, ...rest }) {
  // idenficar se o usuario está logado
  const { authenticated, data } = auth;

  let Component;
  if (!authenticated) {
    Component = GuestVagas;
    return <Route {...rest} render={props => <Component {...props} />} />;
  }

  const { tipo, empresa } = data;
  // eslint-disable-next-line default-case
  switch (true) {
    case tipo === "aluno":
      Component = AlunoVagas;
      break;
    case ["funcionario", "supervisor"].includes(tipo) && !empresa.is_escola:
      Component = EmpresaVagas;
      break;
    case ["funcionario", "supervisor"].includes(tipo) && empresa.is_escola:
      Component = EmpresaVagas;
      break;
    case ["administrador"].includes(tipo):
      Component = <div>Root: Vagas</div>;
      break;
    case ["franqueado"].includes(tipo):
      Component = <div>Root: Vagas</div>;
      break;
  }

  return <Route {...rest} render={props => <Component {...props} />} />;
}

I hope I can display the page

Answer 1

The issue is that some of the switch cases are not setting Component to be a valid React component. The last two cases are setting Component to a JSX literal.

export default function VagasRoute({ auth, ...rest }) {
  // idenficar se o usuario está logado
  const { authenticated, data } = auth;

  let Component;
  if (!authenticated) {
    Component = GuestVagas;
    return <Route {...rest} render={props => <Component {...props} />} />;
  }

  const { tipo, empresa } = data;
  // eslint-disable-next-line default-case
  switch (true) {
    case tipo === "aluno":
      Component = AlunoVagas;
      break;
    case ["funcionario", "supervisor"].includes(tipo) && !empresa.is_escola:
      Component = EmpresaVagas;
      break;
    case ["funcionario", "supervisor"].includes(tipo) && empresa.is_escola:
      Component = EmpresaVagas;
      break;
    case ["administrador"].includes(tipo):
      Component = <div>Root: Vagas</div>; // <-- not a React component or function
      break;
    case ["franqueado"].includes(tipo):
      Component = <div>Root: Vagas</div>; // <-- not a React component or function
      break;
  }

  return <Route {...rest} render={props => <Component {...props} />} />;
}

A trivial solution is to convert these to functions that return JSX, aka like a React Function component.

export default function VagasRoute({ auth, ...rest }) {
  // idenficar se o usuario está logado
  const { authenticated, data } = auth;

  let Component;
  if (!authenticated) {
    return <Route {...rest} component={GuestVagas} />;
  }

  const { tipo, empresa } = data;
  // eslint-disable-next-line default-case
  switch (true) {
    case tipo === "aluno":
      Component = AlunoVagas;
      break;
    case ["funcionario", "supervisor"].includes(tipo) && !empresa.is_escola:
      Component = EmpresaVagas;
      break;
    case ["funcionario", "supervisor"].includes(tipo) && empresa.is_escola:
      Component = EmpresaVagas;
      break;
    case ["administrador"].includes(tipo):
    case ["franqueado"].includes(tipo):
      Component = () => <div>Root: Vagas</div>;
      break;
  }

  return <Route {...rest} component={Component} />;
}