0

Estoy tratando de crear una app, justo me inicio con React, he creado el proyecto con Vite y estoy tratando de importar router-react pero algo falla. Estoy usando "npm run dev" para probar react en localhost (ver scripts mas abajo en package.json si es necesario). Es curioso porque parece que está buscando el recurso dentro de la carpeta del modulo de vite (/node_modules/.vite/....) y no directamente dentro de node_modules para hayar "/node_modules/react-router-dom".

El error es el siguiente:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/react-router-dom.js?v=dc8c6822' does not provide an export named 'Switch' (at App.jsx:4:3)

Mi App.jsx donde se produce el error:

import { Navbar } from "./components/navbar/Navbar";
import {
  BrowserRouter,
  Switch,
  Route,
  Link
} from "react-router-dom";

const App = () => {
    return <Navbar/>
}

export default App

Se que es muy chapuzera y no creo que importe mucho, pero por si acaso pudiese ser de ayuda os muestro mi estructura de carpetas actual:

Estructura de carpetas del proyecto

Mi vite.config.js es el por defecto, no he tocado nada hasta ahora:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Mi package.json es el siguiente. La línea "type":"module" venía por defecto con Vite y he probado quitarla y dejarla pero el resultado es el mismo.

{
  "name": "wallet-monitor",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "description": "Una APP para gestionar tus finanzas personales",
  "main": "backend/index.js",
  "scripts": {
    "watch": "nodemon backend/index",
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.2"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "vite": "^3.1.0"
  }
}

¿Qué he hecho mal? ¿Qué me falta implementar? Esto está originado por Vite? He buscado info sobre el error pero no termino de entender y no se que hacer. Mil gracias!

1 respuesta 1

0

Ya he averiguado cual es el problema. Resulta ser que a partir de la v6 de react-router-dom el componente "Switch" es renombrado a "Routes" y no estaba encontrando nada al hacer destructuración con ese nombre.

1
  • No olvides aceptar tu respuesta cuando transcurra el tiempo mínimo.
    – padaleiana
    Commented el 19 oct. 2022 a las 10:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.