next를 배워야 할 것 같다..

React 앱을 빠르게 빌드하게 도와주는 create-react-app. 웹팩이 너무 무거워서 느린 탓에 vite를 주로 사용하면서 거의 잊혀졌다가 개인 포폴 사이트를 만들면서 다시 사용해보게 되었다. vite 환경에서 react-notion-x 라이브러리를 사용하는데 제약이 있어서 CRA로 갈아탔다. 근데 notion-client와 react-notion-x를 import하니까 에러가 발생했다.

 

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'       
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

 

webpack 버전 문제라고 한다. webpack 버전 5 이상부터는 polyfill 기능을 자동으로 제공하지 않아서 발생한 문제이다. 그러나 진짜 문제는 이게 22년도 초부터 지속된 문제라고 한다. 이후 CRA는 1년 넘게 업데이트되지 않았고 사실상 "유기"된 상태이다..

 

https://github.com/facebook/create-react-app/issues/13289

Will Create React App be updated in the future? · Issue #13289 · facebook/create-react-app

https://react.dev/learn/start-a-new-react-project

Start a New React Project – React

CRA 사용자들도 진즉에 Vite나 Gatsby, Next.js로 이주한 상태이다. 나도 현재 선택의 기로에 놓여있다.. React 공식 문서에서도 CRA는 언급도 없고, Next.js와 Gatsby를 권장하고 있다. CRA에서 어디로 이주할 지. Vite는 react-notion-x와 호환 문제가 있고, Gatsby나 Next.js 의 선택권이 있다. 평소부터 SSR인 Next.js를 익히고 싶은 생각은 있었고 react-notion-x에서 사용을 권장한 것이 Next였어서 그냥 Next.js로 이주하기로 했다.

 

아 하루동안 뻘짓했네.