Hola, soy un principiante que está comenzando con React Router y generé las fuentes básicas con create-react-app.
Cuando traté de configurar el enrutador de acuerdo con el tutorial, aparece un TypeError. Traté de reducir cualquier exceso de código que pudiera causar el problema hasta que terminé solo con esto
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import { Router } from 'react-router'; ReactDOM.render( <Router> </Router>, document.getElementById('root') );Sin embargo, sigo recibiendo el mismo error.
ERROR in ./node_modules/history/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: /Users/Nanashi/reactjs/learning-my-blog/node_modules/history/index.js: Cannot read properties of undefined (reading 'originalPositionFor') at SourceMapTree.originalPositionFor (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@ampproject/remapping/dist/remapping.umd.js:159:27) at trace (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@ampproject/remapping/dist/remapping.umd.js:102:37) at EncodedSourceMapImpl.map (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:347:36) at TraceMap.map (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@jridgewell/trace-mapping/dist/trace-mapping.umd.js:430:31) at SourceMapTree.traceMappings (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@ampproject/remapping/dist/remapping.umd.js:85:34) at remapping (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@ampproject/remapping/dist/remapping.umd.js:258:36) at mergeSourceMap (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@babel/core/lib/transformation/file/merge-map.js:19:30) at generateCode (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@babel/core/lib/transformation/file/generate.js:72:39) at run (/Users/Nanashi/reactjs/learning-my-blog/node_modules/@babel/core/lib/transformation/index.js:55:33) at run.next (<anonymous>) @ ./node_modules/react-router/index.js 12:0-65 96:25-44 182:21-31 195:19-28 516:62-71 620:51-60 893:31-40 917:39-48 962:74-83 @ ./src/index.js 8:0-38 10:38-44 webpack 5.68.0 compiled with 1 error in 2579 msUsando la versión 6.2.1
"react": "^17.0.2", "react-dom": "^17.0.2", "react-router": "^6.2.1", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0"Estoy completamente desconcertado, cualquier ayuda es apreciada.
Creo que encontré el problema. Parece que babel/core@7.17.0 tuvo un cambio importante que causó este problema ( https://github.com/aws-amplify/amplify-ui/issues/1242 ). Usé la solución de este comentario https://github.com/aws-amplify/amplify-ui/issues/1242#issuecomment-1028471472 , establecí mi dependencia en babel/core@17.16.12 y el error desapareció
Puedes usar esto
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );Parece que alguien cometió un error en la última versión de react router dom. Es un error que puedes arreglar escribiendo esto en la consola:
npm i -D @babel/core@7.16.12
Luego siga cualquier ejemplo en la documentación y debería estar bien.
Hubo un problema dentro del @jridgewell/trace-mapping .
El problema ya está solucionado y se publicó la nueva versión v0.2.3 .
Si está utilizando npm7+, todo lo que necesita hacer es ejecutar npm update y debería estar bien.
Solucioné este problema con 2 comentarios.
npm uninstall react-router-dom npm i react-router-dom@5.2.0En la fiesta:
npm desinstalar reaccionar-enrutador-dom
npm reacciono-router-dom@6.0.2
Mi archivo paquete.json:
"react-router-dom": "^6.0.2"Mi archivo app.js:
import { BrowserRouter as Router, Routes, Route } from "react-router-dom" import Home from "./pages/Home"; function App() { return ( <Router> <Routes> <Route path="/" element={<Home/>} /> </Routes> </Router> ); } export default App;esto funciona para mi !