인프런 커뮤니티 질문&답변

sehun910124님의 프로필 이미지
sehun910124

작성한 질문수

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

ts + webpack 실행하기

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

작성

·

1.7K

0

-코드-

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를 실행하게되면

위에 오류가 발생됩니다.

 

답변 3

1

sehun910124님의 프로필 이미지
sehun910124
질문자

 "react-router": "^5.2.0" 입니다!
제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

react-router 몇버전이신가요?

0

sehun910124님의 프로필 이미지
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"
  }
}
sehun910124님의 프로필 이미지
sehun910124
질문자

@types/react-router-dom 은 5.1.7로 버전이 다르네요..!

sehun910124님의 프로필 이미지
sehun910124
질문자

BrowserRouter에서 Go to definition 한다는 의미가

BrowserRouter태그 안에 입력을하면될까요?

콘솔창에 입력을해보면될까요

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

https://stackoverflow.com/a/75092773

이 문제로 보이고 tsconfig.json의 compilerOptions 내부에 paths 주석을 풀고 저렇게 넣으시면 됩니다.

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

vs code 안 쓰시나요??

sehun910124님의 프로필 이미지
sehun910124
질문자

오 감사합니다! vscode 사용중인데,
덕분에 해결됐습니다!

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

vs code 쓰시면 Go to Definition을 안 쓰면 메모장 쓰는 거나 다름없습니다. F12 단축키입니다.

sehun910124님의 프로필 이미지
sehun910124
질문자

아아, 마우스로만 작업해서 사용하고 있는지 몰랐는데,
뜻과 단축키 F12까지..! 알려주셔서 감사합니다 ㅎㅎ

sehun910124님의 프로필 이미지
sehun910124

작성한 질문수

질문하기