logo标签列表

无法读取未定义的属性（读取“originalPositionFor”）

javascriptreactjsbabeljs
5

我是一个React的初学者，刚刚开始学习React-Router-Dom教程。 首先，我使用命令npm i react-router-dom安装了React-Router-Dom。 然后，在app.js文件中，我在Header函数中使用默认代码，并在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>
  );
  
}

当我使用npm start启动服务器时，我遇到了这个错误：

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)

我尝试找到各种来源，但无法找到任何解决方案。

依赖项：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" }

2
请查看 https://dev59.com/usPra4cB1Zd3GeqPio3j#70966285 查看修复和解释。 - patotoma
4个回答
2

我建议你将 @babel/core 降级到之前的版本，这个版本对我来说解决了问题。

npm i -D @babel/core@7.16.12

2
仍然对我没有用：{ "dependencies": { "react-router-dom": "^6.2.1", "react-scripts": "^4.0.3" }, "devDependencies": { "@babel/core": "^7.16.12" } } - Rajwinder Singh
1
请注意，您不需要再降级了。已经有一个补丁可用。运行 npm update 命令即可。感谢 https://dev59.com/usPra4cB1Zd3GeqPio3j#70966285。 - Robert
1
尝试使用没有插入符(^)的@babel/core@7.16.12。今天发布的最新版本(7.17.0)似乎存在问题。
仍然无法工作。 - Rajwinder Singh
请注意，您不需要再降级了。已经有一个补丁可用。运行 npm update。致敬 https://dev59.com/usPra4cB1Zd3GeqPio3j#70966285 - Robert
0

我也遇到了这个问题。在导入BrowserRouter时。

有一个补丁可用。运行 npm update。向 https://dev59.com/usPra4cB1Zd3GeqPio3j#70966285 致敬。 - Robert
0

降级 react-scripts@4.0.3 对我有效。

npm i react-scripts@4.0.3
仍然对我不起作用 { "dependencies": { "react-router-dom": "^6.2.1", "react-scripts": "^4.0.3" }, "devDependencies": { "@babel/core": "^7.16.12" } } - Rajwinder Singh
2
请注意，您不需要再降级了。已经有一个补丁可用。运行 npm update。致敬 https://dev59.com/usPra4cB1Zd3GeqPio3j#70966285 - Robert
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接