React Router：TypeError无法读取未定义的属性（读取“originalPositionFor”）

Question

你好，我是一个开始使用 React Router 的初学者，并使用 create-react-app 生成了基本源。

当我尝试根据教程设置路由器时，出现类型错误。我试图减少任何可能导致问题的多余代码，直到我最终得到这个

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Router } from 'react-router';

ReactDOM.render(
  <Router>
  </Router>,
  document.getElementById('root')
);

但我仍然遇到同样的错误

    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 ms

使用版本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"

我完全感到困惑，非常感谢任何帮助。

编辑

我想我发现了问题。似乎babel/core@7.17.0有一个重大更改导致了此问题（https://github.com/aws-amplify/amplify-ui/issues/1242）。我使用了此评论中的解决方案https://github.com/aws-amplify/amplify-ui/issues/1242#issuecomment-1028471472，将我的依赖项设置为 babel/core@17.16.12 ，错误消失了

Answer 1

包裹内部有问题@jridgewell/trace-mapping。

该问题已经修复并v0.2.3发布了新版本。

如果您使用的是 npm7+，您所需要做的就是运行npm update，应该没问题。

Answer 2

似乎有人在最新版本的 React router dom 中犯了一个错误。这是一个错误，您可以在控制台中输入以下内容来修复：

npm i -D @babel/core@7.16.12

然后按照文档中的任何示例进行操作，应该没问题。