난 분명 백엔드 개발자인데...어쩌다가 이런 길을 와버린 거였는지...
시작은 이러하다.
우리 회사에서 어드민 관련 에디터로 CkEditor를 사용중이다. 다만 사업부에서 에디터의 추가 기능을 도입 요청했다는 것!
내가 보기에도 사용하기에 불편해보이긴했어...
사업부에서 원했던 고도화 기능은 ...
이미지에 링크 연결, 미디어 관련 연결, + html 모드 변경.....
이런 기능들을 커스터마이징해서 개발을 할 수도...있었겠지만..?
플러그인을 추가해서 사용해보자는 것이 목표가 되었다.
먼저 기존 버전에 대해 명시를 하자면
Next.js 11.1.0
react 17.0.2
😭 시작은 html 모드였는데....
사실 내가 갑자기 뛰어들게 된 이유는 그냥 html 모드만 추가하면 되는 줄 알고 였다. 런칭 단계 쯤 접어들면서 시급한 이슈가 없었고....아직 Next.js에 익숙하지 못한 나의 동기보다...고냥 내가 하는게 낫지않을까..?했지....
import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
const ClassicEditorWithEmbed = require('@ckeditor/ckeditor5-build-classic');
ClassicEditorWithEmbed.defaultConfig.toolbar.items.push('htmlEmbed');
ClassicEditorWithEmbed.builtinPlugins.push(HtmlEmbed);ckEditor에 다양한 플러그인이 있기때문에 이걸 config에 추가하면 와! 끝!
인줄 알았으나 나를 맞이한건 오류
문제 1. Global CSS cannot be imported from within node_modules.
https://hjk329.github.io/blog/CKEditor-with-Next.js
문제 관련해서 많이 도움을 받은 곳이다. 사실 첨엔 이걸로 해결한건 아닌데, 이 포스팅을 통해 원인을 명확히 알아서 속이 시원해졌다고 해야할까..?
어쨌든 해당 블로거분이 찾아보신 바에 의하면 전역CSS 관련 문제가 있기때문에 플러그인을 추가로 사용할 수가 없다는 것!
Next.js는 node_modules를 더 이상 컴파일하지 않기 때문에 node_modules에서 전역 css 코드를 가져올 수 없다는 것이 메인테이너의 답변이었다.
😶🌫️ 원래도 Online Builder는 사용하려고 했다!
첨엔 html 모드만 추가시키고 빠르게 퇴장하려고 했는데, 일이 커지기 시작했다.
이러면 온라인 빌더를 사용해야한다는건 확실해진 사실이고, 그러면 보태보태 요구사항들을 가득 담아 내가 커스텀한 빌더를 사용하면 되겠더라구용...?
node_moudles와 동일한 깊이의 위치하게 ckEditor5 디렉토리를 생성하고 yarn add file:./ckeditor5를 하고... declare module 'ckeditor5-custom-build/build/ckeditor'를 하고....이걸 기존 classicEditor 대신 imort를 해서 쓰면...! (윗분 블로그 참조)
오 Next.js에서 되는구나!
이럴줄 알았으니!!
문제 2. Error: Failed to recognize value undefined for property Emoji.
./ckeditor5/build/ckeditor.js
Error: Failed to recognize value `undefined` for property `Emoji`.
at Array.map (<anonymous>)
> Build error occurred
Error: > Build failed because of webpack errors
at C:\Users\USER\workspace\mfp\admin\node_modules\next\dist\build\index.js:390:19
at async Span.traceAsyncFn (C:\Users\USER\workspace\mfp\admin\node_modules\next\dist\telemetry\trace\trace.js:60:20)
아니 선생님 대체 이모지가 뭡니까!!!!!!!!!!!!ㅠㅠㅠㅠㅠ
저는 그저 이미 빌드된 모듈을 가져다가 쓰고싶은건데요 ㅠㅠㅠㅠㅠ
정말 미쳐버릴 노릇 그 자체였던 것이다.
아 그리고 기존 next.js와 관련한 CKEditor5 이슈가 존재한다!
https://github.com/ckeditor/ckeditor5/issues/7376
보다보면 자신들이 커스텀해서 올린 깃허브 레파지토리가 있었고, 그걸 우리 플젝에 붙이면 정상 작동을 했다.
하지만 온라인빌더는 버전 설정이 안됨...무조건 37을 붙여야했다. 그리고 내가 원하는 플러그인들이 모두 포함되지 않았기 때문에...온라인빌더는 써야했음 ㅠ
어쟀든 삽질 끝에 원인을 찾았었다.
우리는 전자정부 MSA Edu Frontend Template을 활용했다. 보게되면 버전들이 좀 낮음..
버전업을 해보자
검색 결과 9개 실화?
심지어 아예 연관된 거 아무것도 없음
아무리 구글링을 해봐도 Emoji를 못찾겠다는 말을 찾지못하겠는데 대체 나는 왜!!!!!!!!!!!!
정말젇말 내 생각에도 이상해서 새로 next.js 앱을 만들어서 하라는대로 붙여봤다.
???????????
됨
아놔 근데 왜!!!!!!!!!!! Emoji뭐야!!!!!!!!!!!!!!!!!!!
열심히 코드를 뒤지고 수정하다보니 stackTrace가 이렇게 변경되었다.
./ckeditor5/build/ckeditor.js
Error: Failed to recognize value `undefined` for property `Emoji`.
at getUnicodePropertyValueSet (C:\Users\USER\workspace\admin\node_modules\next\dist\compiled\babel-packages\packages-bundle.js:254:51198)
at handleLoneUnicodePropertyNameOrValue (C:\Users\USER\workspace\admin\node_modules\next\dist\compiled\babel-packages\packages-bundle.js:254:51509)
at getUnicodePropertyEscapeSet (C:\Users\USER\workspace\admin\node_modules\next\dist\compiled\babel-packages\packages-bundle.js:254:51640) getUnicodePropertyValueSet....babel-packages..?
아 next.js에서 babel을 이용하는 과정에서 뭔가 분명히 저 custom-moudles을 가져오는데서 문제가 있는구나...!
옛날 버전은 안되나보지..?
흠 그러면 아무지 찾아봐도 인터넷에 된다는 사람은 다 react 18이란 말이지..??
화끈하게 버전업을 했다...
react 18...Next 13으로...
당연히 되겠구나.. 두근두근....
안돼!!!
🙌 이놈이 문제였습니다! "babel-plugin-module-resolver"
아예 해당 버전에서 충돌이 나서 아예 컴파일이 안되는거면 그런갑다 할텐데,,,,
새로 next.js 파서 만든 프로젝트에서는 온라인 빌더가 정상적으로 붙었다.
그렇다면 이럴때 접근방식은 뭐가 안되는걸까? 보다는 뭐를 하면 안되게 되는건가?가 좋은 접근방식이였다. 그렇게 정상 작동하는 걸 확인했던 플젝에다가 우리 플젝 모듈을 하나하나 추가해봤을 때, 이 놈이 문제였다. 이 친구를 지우니 정상적으로 작동하기 시작한 것이다!
문제는 mui가 또 미친듯이 충돌이 나네요..
화끈한 버전업으로 에디터를 만나는데에는 성공했으나, 이후 사이드 이펙트가 어마어마하게 터지기 시작했다. mui 4 버전이 react 18에서 작동되지않아서, mui5로 올려야하는데 이때 makestyles가 또 사용이 안되고...emtion cache를 사용해야한다고 하고...대환장 파티
그러면 다시 고민해보자.
과연 정확하게 어떤 상황에서 되고 최소 어느 버전에서 작동이 안되는것인가?
babel complie 에러였다.
버전을 조금씩 내려봤을 때, 작동이 되던 next.js 버전은 12.0.0,,, babel-plugin-module-resolver 이걸 지워도 11은 안됨
그렇다면 12, 11의 차이는?
next.js 12 버전 업데이트에서 Babel 컴파일러에서 SWC 컴파일러로 바뀌었다.
12부터는 nextjs는 프로젝트가 .babelrc 파일을 가지고 있는 경우 babel을 사용하고 그렇지 않은 경우는 swc를 사용하게 된다.
swc로 컴파일할 경우에만 이미 빌드된 ckEditor5.js 파일을 정상적으로 가져온다는 결론에 이르렀다!!!!!!!!!!
그래서 딱 12.0.0 까지만 버전업하고 react 버전은 기존과 동일하게 진행했고,
이렇게 정말 나의 플러그인이 가득한 사랑스러운 CKEditor를 내 눈으로 만나게 된 것이다.
정말 많은 고민과 삽질이 있었다. webpack 설정을 어느식으로 바꿀까..? 번들링할 때 ckeditor를 제외시켜야하나..? 심지어 구글링해도 Emoji라는 이름 조차 나오지도 않아....
오만짓 다했지만 결론적으로는 답을 찾아서 너무 기쁘다. 그래 react 18에 next 13을 당장 실무에 적용하긴 오바니까......이게 맞는 답이였을거야......
결론 !!!!
CkEditor 37을 사용하고싶다?
=> next.js 11 버전에선 안됩니다. ㅜ next.js 12 이상을 사용하십시오. swc 컴파일 방식을 사용하십시오.
