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

문종현님의 프로필 이미지
문종현

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

글로벌 스타일과 컴포넌트 폴더 구조.

postcss plugin 에 관한 오류가 나타납니다 ㅜ

작성

·

1.7K

0

전 강좌에서 캐루셀 설정후에 npm run dev를 통하여 확인해보려 하는데 

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

Unknown error from PostCSS plugin. Your current PostCSS version is 8.4.5, but autoprefixer uses 6.0.23. Perhaps this is the source of the error below.

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/antd/dist/antd.css

BrowserslistError: Unknown browser query `dead`

    at Array.reduce (<anonymous>)

이러한 에러가 뜹니다 ㅜ 구글링해서 계속 찾아보고있는 중인데 도대체 무슨이유인지 모르겠습니다 ㅜㅜㅜ

부탁으려요

답변 1

0

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

패키지제이슨 버전 보여주세요.

문종현님의 프로필 이미지
문종현
질문자

예 감사합니다

  "scripts": {
    "dev": "next -p 3060",
    "build": "next build"
  },
  "author": "Moon",
  "license": "ISC",
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "antd": "^4.2.5",
    "css-loader": "^6.6.0",
    "next": "^12.0.10",
    "next-redux-wrapper": "^6.0.2",
    "postcss": "^8.4.6",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-slick": "^0.28.1",
    "redux-devtools-extension": "^2.13.9",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "eslint": "^8.6.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0"
  }
}

이렇게 설정되어 있습니다

 

 

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

https://www.inflearn.com/questions/397490

이거 근데 지난 번에도 질문하셨던 것 아닌가요?

npm ls browserslist

입력하셔서 browerslist가 4버전 이하인 라이브러리가 범인입니다.

문종현님의 프로필 이미지
문종현
질문자

예 맞습니다. 저번에는 antd 버전 문제 였는데 그당시에 버젼을 맞췄습니다.

그런데 이런 에러가 또 나타나네요 ㅜ 

npm ls browserslist 치니

react-nodebird-front@1.0.0 C:\Users\moonj\OneDrive\문서\test-project\practice\react-nodebird\REACT.SNS\front

`-- (empty)

이렇게 뜨고 4버전 이하인 라이브러리가 검색이 되지않는데 무엇이 잘못된건가요 ㅜ

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

npm ls antd 하면 버전이 4.2가 아닐것같습니다.

문종현님의 프로필 이미지
문종현
질문자

아 감사합니다!!! 계속 고민했는데 제로초님 덕에 해결했네요

 

패키지 제이슨에는 4.2로 분명 되있었는데 npm ls antd로 확인해보니 바뀌어 있었네요 ㅜ 패키지 제이슨엔  4.2라고 되있었는데

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

package.json에 ^4.2로 쓰여있어서 그럽니다. ^가 붙으면 4버전 중에 가장 최신으로 하겠다는 뜻입니다. 앞에 ^를 떼어내세요.

문종현님의 프로필 이미지
문종현
질문자

아 그렇군요!!! ^ 이것이 최신버전으로 한다는 뜻이었군요!!ㅜㅜ 감사합니다 하나 배워가네요!!

 

문종현님의 프로필 이미지
문종현

작성한 질문수

질문하기