[React] yarn build 후 'Error [ERR_REQUIRE_ESM]: Must use import to load ES Module' 오류 해결 방법

+ 추가

개발 환경이 바껴서 package들을 새로 install 했을 때(예. yarn 또는 npm i) 에러가 발생 했다면 이전 개발환경에 있는 node_module 폴더와 .lock 파일을 그대로 가져와서 적용하는 것도 좋은 방법이다.

 

에러 메시지

 yarn build

yarn run v1.22.5 $ babel server --out-dir build && ./node_modules/.bin/webpack server/main.js -> build/main.js internal/modules/cjs/loader.js:1153 throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);

^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/apple/Boni/my_react/webpack.config.js require() of ES modules is not supported. require() of /Users/apple/Boni/my_react/webpack.config.js from /Users/apple/Boni/my_react/node_modules/webpack/bin/convert-argv.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename webpack.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/apple/Boni/my_react/package.json.

 

해결 방법

package.json 파일에 있는 package 버전들을 업그레이드 시켜주면 된다.

npm install upgrade

npm audit fix --force