BrowserRouter 은 JSX 구성 요소로 사용할 수 없습니... - 인프런

Slack 클론 코딩[실시간 채팅 with React]

ts + webpack 실행하기

BrowserRouter 은 JSX 구성 요소로 사용할 수 없습니다.

작성

1.7K

-코드-

import 'core-js/stable';
import 'regenerator-runtime/runtime';
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import axios from 'axios';

import App from './layouts/App';

axios.defaults.withCredentials = true;
axios.defaults.baseURL =
  process.env.NODE_ENV === 'production' ? 'https://sleact.nodebird.com' : 'http://localhost:3090';

render(
  <BrowserRouter> //오류발생구간
    <App />
  </BrowserRouter>,
  document.querySelector('#app'),
);

-오류내용-

ERROR in ./client.tsx:15:4

TS2786: 'BrowserRouter' 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("C:/Users/LG gram 15/node_modules/@types/react/index").ReactNode'.

Type '{}' is not assignable to type 'ReactNode'.

13 |

14 | render(

> 15 | <BrowserRouter>

| ^^^^^^^^^^^^^

16 | <App />

17 | </BrowserRouter>,

18 | document.querySelector('#app'),

sleact (webpack 5.74.0) compiled with 1 error in 9547 ms

백엔드 서버를 킨 상태에서,

npm i 실행하였고

npm run build를 실행하게되면

위에 오류가 발생됩니다.

react 웹팩 typescript socket.io babel 클론코딩

답변 3

sehun910124

질문자

 "react-router": "^5.2.0" 입니다!

제로초(조현영)

지식공유자

BrowserRouter에서 Go to definition 하면 어떤 코드가 뜨나요?? @types/react-router-dom도 5버전이죠??

제로초(조현영)

지식공유자

react-router 몇버전이신가요?

sehun910124

질문자

{
  "name": "sleact-ts-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --env development",
    "build": "cross-env NODE_ENV=production webpack"
  },
  "author": "ZeroCho",
  "license": "MIT",
  "dependencies": {
    "@types/react": "^17.0.58",
    "@types/react-dom": "^17.0.19",
    "axios": "^0.26.1",
    "core-js": "^3.15.1",
    "cross-env": "^7.0.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "typescript": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.8",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0",
    "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
    "@types/node": "^16.11.26",
    "@types/react-router-dom": "^5.1.7",
    "@types/webpack": "^5.28.0",
    "@types/webpack-dev-server": "^4.0.3",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "eslint": "^8.13.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^4.0.0",
    "fork-ts-checker-webpack-plugin": "^7.2.3",
    "prettier": "^2.2.1",
    "react-refresh": "^0.12.0",
    "style-loader": "^3.2.1",
    "ts-node": "^10.0.0",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^4.0.0"
  }
}