Soy un principiante en reaccionar, recién comencé el tema de los tutoriales de react-router-dom. En primer lugar, instalé react-router-dom usando npm i react-router-dom Luego, en app.js, uso el código predeterminado en el encabezado de la función y llamo a este elemento en la estructura react-router-dom:
import logo from './logo.svg'; import './App.css'; import { BrowserRouter as Router,Routes,Route} from "react-router-dom"; function App() { return ( <Router> <Routes> <Route path="/" element={<Header />} /> </Routes> </Router> ); } export default App; function Header(){ return( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Edit <code>src/App.js</code> and save to reload.</p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer"> Learn React </a> </header> </div> ); } y cuando inicio el servidor usando npm start , aparece este error:
log.js:59 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: E:\REACT TRAINING\ReactRouter\node_modules\history\index.js: Cannot read properties of undefined (reading 'originalPositionFor') at SourceMapTree.originalPositionFor (E:\REACT TRAINING\ReactRouter\my-app\node_modules\@ampproject\remapping\dist\remapping.umd.js:159:27) at trace (E:\REACT TRAINING\ReactRouter\my-app\node_modules\@ampproject\remapping\dist\remapping.umd.js:102:37) at EncodedSourceMapImpl.map (E:\REACT TRAINING\ReactRouter\my-app\node_modules\@jridgewell\trace-mapping\dist\trace-mapping.umd.js:347:36) at TraceMap.map (E:\REACT TRAINING\ReactRouter\my-app\node_modules\@jridgewell\trace-mapping\dist\trace-mapping.umd.js:430:31) at SourceMapTree.traceMappings (E:\REACT TRAINING\ReactRouter\my-app\node_modules\@ampproject\remapping\dist\remapping.umd.js:85:34) at remapping (E:\REACT TRAINING\ReactRouter\my-app\node_modules\@ampproject\remapping\dist\remapping.umd.js:258:36) at mergeSourceMap (E:\REACT TRAINING\ReactRouter\my-app\node_modules\@babel\core\lib\transformation\file\merge-map.js:19:30) at generateCode (E:\REACT TRAINING\ReactRouter\my-app\node_modules\@babel\core\lib\transformation\file\generate.js:72:39) at run (E:\REACT TRAINING\ReactRouter\my-app\node_modules\@babel\core\lib\transformation\index.js:55:33) at run.next (<anonymous>) at Object.../node_modules/history/index.js (http://localhost:3000/static/js/bundle.js:41373:7) at Object.options.factory (http://localhost:3000/static/js/bundle.js:46449:31) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:45899:33) at fn (http://localhost:3000/static/js/bundle.js:46120:21) at Module.../node_modules/react-router-dom/index.js (http://localhost:3000/static/js/bundle.js:41527:65) at Module.options.factory (http://localhost:3000/static/js/bundle.js:46449:31) at __webpack_require__ (http://localhost:3000/static/js/bundle.js:45899:33) at fn (http://localhost:3000/static/js/bundle.js:46120:21) at Module../src/App.js (http://localhost:3000/static/js/bundle.js:68:74) at Module.options.factory (http://localhost:3000/static/js/bundle.js:46449:31)Traté de encontrar varias fuentes pero no pude encontrar ninguna solución.
Dependencias: dependencies": { "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" }
Yo también estoy metido en esto. Al importar BrowserRouter.
Rebajar @babel/core a la versión anterior que me lo arregló
npm i -D @babel/core@7.16.12
Downgrade react-scripts@4.0.3 trabajando para mí.
npm i react-scripts@4.0.3Pruebe @babel/core@7.16.12 sin signo de intercalación (^). Parece que el último (7.17.0) que se lanzó hoy está roto.