react-component / react-component/field-form

项目运行报错👉TypeError: reactRouter.matchPath is not a function

Open
#244 0 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1k
Forks
286
Avg merge
4d 16h
Merged PRs (30d)
1

Description

复现步骤

我按照README.md的提示运行

npm install
npm start
open http://localhost:8000

当我用浏览器打开http://localhost:8000时,终端报错,并且无法打开页面。
终端错误如下:

  App running at:
  - Local:   http://localhost:8000 (copied to clipboard)
  - Network: http://192.168.3.138:8000
(node:70080) UnhandledPromiseRejectionWarning: TypeError: reactRouter.matchPath is not a function
    at some (/Users/huang/Hunter/repository/field-form/node_modules/react-router-config/modules/matchRoutes.js:6:9)
    at Array.some (<anonymous>)
    at matchRoutes (/Users/huang/Hunter/repository/field-form/node_modules/react-router-config/modules/matchRoutes.js:4:10)
    at /Users/huang/Hunter/repository/field-form/node_modules/@umijs/preset-built-in/lib/plugins/commands/dev/createRouteMiddleware.js:79:72

期望结果

按照README.md的提示能够正常运行项目。

尝试解决

根据错误提示,发现错误来源于react-router-config调用react-routermatchPath方法。但是react-router-config依赖的react-router版本为 "react-router": ">=5"。但是当前项目依赖的react-router版本"react-router": "^3.0.0"
所以推断问题的原因是项目依赖react-router的版本过低导致。
在运行npm install react-router@5.2.0 --save-dev,后项目终于能够正常运行。

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with README.md and the dependency declarations for react-router and react-router-config. Reproduce the failure with npm install, npm start, and http://localhost:8000, then verify that the project's router dependencies are compatible and that the application starts without the matchPath TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.