Issues in react-router when import any component in my react sp project

Question

node version - 12.13.0
npm, npx veriosn - 6.12.0

----------------------------------

My steps:

1. npm install gulp-cli yo @microsoft/generator-sharepoint --global
2. yo @microsoft/sharepoint (use react framework and client site type is WebPart)
3. npm install react roter-dom
4. import BrowserRouter from react-roter-dom to main react file
5. gulp serve

After that, the console writes about these errors due to an importing BrowserRouter:
[17:09:10] Error - [tsc] node_modules/react-router/index.d.ts(151,74): error TS1110: Type expected.
[17:09:10] Error - [tsc] node_modules/react-router/index.d.ts(151,83): error TS1005: '}' expected.
[17:09:10] Error - [tsc] node_modules/react-router/index.d.ts(151,94): error TS1128: Declaration or statement expected.
[17:09:10] Error - [tsc] node_modules/react-router/index.d.ts(151,96): error TS1161: Unterminated regular expression literal.
[17:09:11] Error - 'tsc' sub task errored after 8.93 s
exited with code 2

Answer 1

Hi @Tamirlan Alibekov ,
It seems the typescript is an out-of-date version. Please check the version of the TypeScript by tsc -v. You can try to update to the latest TypeScript by following cmdlet to resolve the issue.

npm uninstall -g typescript  
npm install typescript --save-dev  

Check your package.json to ensure you're using a current version of the typescript package

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---

Answer 2

Hi @Tamirlan Alibekov ,

You'll need to install:

npm i react-router-dom@5.3.0
npm i @types/react-router-dom

Latest version of react-router-dom doesn't work with SPFx. You'll need to install version 5.3.0 of react-router-dom and types for compilation.

Answer 3

same problem with spfx verion 1.13.1 and react-router-dom 6.2.1 and typescript Version 4.5.4.

[16:04:24] Error - [tsc] node_modules/react-router/index.d.ts(151,74): error TS1110: Type expected.
[16:04:24] Error - [tsc] node_modules/react-router/index.d.ts(151,83): error TS1005: '}' expected.
[16:04:24] Error - [tsc] node_modules/react-router/index.d.ts(151,94): error TS1128: Declaration or statement expected.
[16:04:24] Error - [tsc] node_modules/react-router/index.d.ts(151,96): error TS1161: Unterminated regular expression literal.
[16:04:24] Error - 'tsc' sub task errored after 3.85 s

any idea how to fix this?