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

강사님 안녕하세요. 이 전 질문에 대한 답변으로 get 요청에 대한 문제는 해결했습니다 감사합니다^^

그런데 이후 다음과 같은 문제가 발생하였습니다.

package-lock.json 삭제하고, node_modules 폴더도 삭제한 뒤 yarn 으로 패키지 재설치하였고,

yarn dev, yarn build 등 명령어를 입력하면 다음과 같은 에러 메시지가 출력되면서 localhost:3000에 진입할 수 없습니다.

@types/react를 최신버전으로 다시 설치해봤고, 강의에서 사용중인 버전인 ^17.0.37으로도 다시 설치해봤고, vscode 종료 후 재실행하여도 동일한 에러메시지가 계속 출력됩니다.

해당 에러 메시지는 npm run dev 명령어를 입력해도 @types/react를 설치하라는 에러가 발생합니다.

자체 해결

https://stackoverflow.com/questions/71843307/next-js-is-not-recognizing-types-react

위 스택오버플로우 답변을 보고 @types/react 버전을 18.0.1 버전으로 변경했습니다. 결과적으로 문제는 해결되었습니다.

그러나 의문점은, 강의에서 사용하는 버전은 ^17.0.37인데 저의 경우만 18.0.1버전으로 변경해야 작동하는 것인지?

아니면 다른 분들도 작동하지 않으시는지? 저만 그런것이라면 원인이 무엇일지 궁금합니다.

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

info  - Loaded env from /Users/hanair/dev/blahx2/.env

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install @types/react by running:

        yarn add --dev @types/react

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

package.json 파일은 다음과 같습니다.

{

  "name": "blahx2",

  "private": true,

  "scripts": {

    "dev": "next dev",

    "build": "next build",

    "start": "next start",

    "lint": "next lint"

  },

  "dependencies": {

    "@chakra-ui/react": "1.8",

    "@emotion/react": "^11.10.6",

    "@emotion/styled": "^11.10.6",

    "firebase": "^9.20.0",

    "firebase-admin": "^11.7.0",

    "framer-motion": "^6.5.1",

    "next": "12.0.7",

    "react": "17.0.2",

    "react-dom": "17.0.2",

    "styled-components": "^5.3.3"

  },

  "devDependencies": {

    "@types/node": "^16.11.13",

    "@types/react": "^17.0.58",

    "@types/styled-components": "^5.1.18",

    "@typescript-eslint/eslint-plugin": "^5.8.0",

    "@typescript-eslint/parser": "^5.8.0",

    "babel-eslint": "^10.1.0",

    "babel-plugin-styled-components": "^2.0.2",

    "eslint": "8.4.1",

    "eslint-config-airbnb": "^19.0.2",

    "eslint-config-airbnb-base": "^15.0.0",

    "eslint-config-airbnb-typescript": "^16.1.0",

    "eslint-config-next": "12.0.7",

    "eslint-config-prettier": "^8.3.0",

    "eslint-plugin-babel": "^5.3.1",

    "eslint-plugin-import": "^2.25.3",

    "eslint-plugin-jsx-a11y": "^6.5.1",

    "eslint-plugin-prettier": "^4.0.0",

    "eslint-plugin-react": "^7.27.1",

    "eslint-plugin-react-hooks": "^4.3.0",

    "prettier": "^2.5.1",

    "typescript": "^4.5.4"

  }

}