[英]'Router' cannot be used as a JSX component. Its instance type 'BrowserRouter' is not a valid JSX element
when npm build process is running below error ' Router' cannot be used as a JSX component.当 npm 构建过程在错误“路由器”下运行时,无法将其用作 JSX 组件。 Its instance type 'BrowserRouter' is not a valid JSX element.它的实例类型“BrowserRouter”不是有效的 JSX 元素。 is occurred.发生。 what could be the reason?可能是什么原因?
I am using node v14.18.3.我正在使用节点 v14.18.3。 package.json file is shown below. package.json 文件如下所示。
I updated react-intl package but didnt get any result and this is happened in devOps build server.我更新了 react-intl包但没有得到任何结果,这发生在 devOps 构建服务器中。
Creating an optimized production build...
Failed to compile.
D:/a/1/s/ClientApp/src/App.tsx
TypeScript error in D:/a/1/s/ClientApp/src/App.tsx(20,6):
'Router' cannot be used as a JSX component.
Its instance type 'BrowserRouter' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("D:/a/1/s/ClientApp/node_modules/react-intl/node_modules/@types/react/index").ReactNode'. TS2786
18 | export default function App() {
19 | return (
> 20 | <Router>
| ^
21 | <Switch>
22 | <Route exact path="/"></Route>
23 | <Route path="/StaticTabs/MainTab" component={MainTab}></Route>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! abc-for-teams-by@0.1.0 build: `react-scripts build`
package.json包.json
{
"name": "abs",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fluentui/react-northstar": "^0.63.0",
"@microsoft/teams-js": "^1.11.0",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/microsoftteams": "^1.9.2",
"axios": "^0.21.1",
"lodash": "^4.17.21",
"msteams-react-base-component": "^1.1.1",
"office-ui-fabric-react": "^7.181.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-hook-form": "^7.25.1",
"react-intl": "^5.24.4",
"react-router-dom": "^5.1.2",
"react-scripts": "^4.0.3",
"react-select": "^5.2.2",
"read-appsettings-json": "^1.0.98",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@types/es6-promise": "^3.3.0",
"@types/jest": "^27.4.0",
"@types/lodash": "^4.14.182",
"@types/node": "^16.11.21",
"@types/react": "^16.8.6",
"@types/react-dom": "^16.8.12",
"@types/react-router-dom": "^5.1.7",
"cross-env": "^7.0.3",
"env-cmd": "^10.1.0",
"typescript": "^4.5.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"rules": {
"@typescript-eslint/no-array-constructor": "off",
"array-callback-return": "off",
"no-mixed-operators": "off",
"no-empty-pattern": "off",
"jsx-a11y/anchor-is-valid": "off"
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Your react-router-dom
is at version "^5.2.2"
while your @types/react-router-dom
is set to "^5.1.7"
.您的react-router-dom
版本为"^5.2.2"
而您的@types/react-router-dom
设置为"^5.1.7"
。
There is also a difference in your react-dom
versions.您的react-dom
版本也有所不同。 Your react-dom
is at version "^16.8.6"
while your @types/react-dom
is set to "^16.8.12"
.您的react-dom
版本为"^16.8.6"
而您的@types/react-dom
设置为"^16.8.12"
。
Try doing: npm i react@16 react-dom@16 react-router-dom@5 @types/react@16 @types/react-dom@16 @types/react-router-dom@5
尝试做: npm i react@16 react-dom@16 react-router-dom@5 @types/react@16 @types/react-dom@16 @types/react-router-dom@5
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.