[에러] 1) next TypeError: __WEBPACK_IMPORTED_MODULE_1__.useForm) is not a function at page 2) 'jsxdev' is not exported from 'react/jsx-dev-runtime' (imported as '_jsxdev').

에러 상황 

next.js에서 불필요한 리렌더링 방지를 위한  

react-hook-form 라이브러리를 설치 후

login 페이지를 작성하는 중 에러가 났다. 

처음 에러는 

 

 

next TypeError: __WEBPACK_IMPORTED_MODULE_1__.useForm) is not a function at page (welcome/login/page.tsx:74:96) at stringify (<anonymous>) digest: "241989208"

 

 

그래서 이건 간단하게 

'use client'를 활용하는 것으로 해결된 듯 보였다. 

 

에러의 원인

 

 

 

 

그러나 또다른 에러가 생겨났다.

 

 

 

 

 

 

 

 

이건 내가 어제 설정한 browserslist 때문이었는데, 

 

 

내가 설정한 borwserslist

 

browserslist 옵션을 package.json에 명시함으로써

특정 버전의 browser만 선택하는 것이었다. 

 

"browserslist": [
    "last 2 versions",
    "> 1%",
    "ie 11"
]

 

가장 마지막 2버전과, 세계 점유율 1%이상인 브라우저, 그리고 ie 11 이상만 명시적으로 

지원하겠다고 설정한 것이었다. 

 

 

 

변경한 코드와 참고한 사이트 

 

 

React 14.1 causes import errors when component set to 'use client' · Issue #61053 · vercel/next.js

 

 

"browserslist": {
    "production": [
      "last 2 versions",
      "> 1%",
      "ie 11"
    ],
    "development": [
      "Chrome 118",
      "last 1 chrome version",
      "last 1 edge version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

 

 

 

위와 같이 설정해주니까 해결이 되었다.

 

chrome 118 버전을 development에서 지원하겠다고 명시한 것으로 

해결된 것인데. 

https://coolenjoy.net/bbs/38/4924265

따로 이유는 나와있지 않아서 118버전은 대규모 보안 업데이트라는 안내글만으로 일단 대신하고 

추후에 더 알아보도록 하자!