patch-package를 사용하여 create-react-app 에서 리액트 18 버전 react-dnd에서 발생하는 컴파일 에러(./jsx-runtime.js is not exported from package) 해결하기

create-react-app 에서 리액트 18버전으로 업그레이드를 하려고 하니 아래와 같은 에러에 맞닦뜨렸다.

 ERROR in ./node_modules/react-dnd/dist/esm/core/DndProvider.mjs 37:0-51
Module not found: Error: Package path ./jsx-runtime.js is not exported from package 

react-dnd 깃헙 상에도 오픈 이슈로 진행중인 상태이지만 아직 패치된 버전은 릴리즈 되지 않은 상태다.
https://github.com/react-dnd/react-dnd/issues/3416

webpack config를 수정하라는 답변이 있는데, create-react-app을 사용중이기 때문에 eject를 하지 않는 한 해당 방법을 사용할 수 없다.
한 가지 방법으로 patch-package 라이브러리를 사용하여 문제가 되는 라이브러리를 직접 수정할 수 있다.
patch-package

patch-package는 사용하는 라이브러리 코드 상에 문제가 있거나 더이상 업데이트되지 않는 라이브러리를 커스텀 패치해야 하는 경우 유용하게 사용할 수 있다.

업그레이드된 리액트 버전의 react/jsx-runtime에서 js 확장자를 지원하지 않는 것 같아 patch-package를 사용하여 아래처럼 패치해주었다.

diff --git a/node_modules/react-dnd/dist/esm/core/DndProvider.mjs b/node_modules/react-dnd/dist/esm/core/DndProvider.mjs
index 85f60c1..33b8174 100644
--- a/node_modules/react-dnd/dist/esm/core/DndProvider.mjs
+++ b/node_modules/react-dnd/dist/esm/core/DndProvider.mjs
@@ -25,7 +25,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-import { jsx as _jsx } from "react/jsx-runtime.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, memo } from 'react';
 import { createDragDropManager } from 'dnd-core';
 import { DndContext } from './DndContext.mjs';

Done!