CloudFlare Pages 배포하면서 만난 에러들(feat : Vite, React, yarn)

※ Vite 번들러와 yarn패키지매니저를 사용한 환경입니다.

오류 1. Some chunks are larger than 500 kBs after minification.

배포 전 $ yarn build 명령어를 사용하여 테스트를 해봤는데 아래의 경고문구가 터미널에 나타났다.

(!) Some chunks are larger than 500 kBs after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

※ manification(= 축소, 최소화)
: 웹 사이트에서 로드 시간과 대역폭 사용량을 줄이는 데 사용되는 주요 방법 중 하나로 웹 페이지 및 스크립트 파일에서 코드 및 마크업을 최소화하는 프로세스.

파일크기 및 관련 웹페이지 요청 수를 줄이는 도구 및 기술 집합인 프론트엔드 최적화(FEO)의 주요 구성 요소이다.

manification 관련 글 : https://www.imperva.com/learn/performance/minification/

일부 청크가 축소 후 500KB보다 크니까 어쩌구저쩌구

해결방법 ①

vite.config.js 또 너냐에 아래의 코드를 추가해준다.

// vite.config.js
build: {
        rollupOptions: {
            output:{
                manualChunks(id) {
                    if (id.includes('node_modules')) {
                        return id.toString().split('node_modules/')[1].split('/')[0].toString();
                    }
                }
            }
        }
    }

블록을 분해하여 큰 블록을 더 작은 블록으로 나누는 방법이라고.
전체코드로 보면 아래와 같은 모양새이다.

// vite.config.js
export default defineConfig({
    plugins: [
        react(),
        svgr({
            svgrOptions: {},
        }),
        tsconfigPaths(),
    ],
    resolve: {
        alias: [
            { find: "@", replacement: path.resolve(__dirname, "src") },
        ],
    },
    build: {
        rollupOptions: {
            output: {
                manualChunks(id) {
                    if (id.includes("node_modules")) {
                        return id
                            .toString()
                            .split("node_modules/")[1]
                            .split("/")[0]
                            .toString();
                    }
                },
            },
        },
    },
});

해결방법 ②

chunk사이즈때문에 발생하는 문제이므로 chunkSizeWarningLimit속성을 이용해 사이즈 자체를 늘려주는 방식.
마찬가지로 vite.config.js에 추가해준다. (본인은 1번방법으로 해결되어서 안해봄)

// vite.config.js
export default defineConfig({
    ...,
    build: {
        chunkSizeWarningLimit: 1600
    }
});

참조 : https://stackoverflow.com/questions/75719664/some-chunks-are-larger-than-500-kib-after-minification

참조 : https://programmerah.com/solved-vite-packing-error-some-chunks-are-larger-than-500kb-after-minification-33922/

---

오류 2. cloud flare build error

YN0032: Implicit dependencies on node-gyp are discouraged
Error: Exit with error code: 1

//error logs

2023-08-17T06:27:55.507668Z	Cloning repository...
2023-08-17T06:27:56.660518Z	From https://github.com/...
2023-08-17T06:27:56.661285Z	 * branch 73136aa7f... -> FETCH_HEAD
2023-08-17T06:27:56.66149Z	
2023-08-17T06:27:56.773017Z	HEAD is now at 73136aa Develop (#47)
2023-08-17T06:27:56.77374Z	
2023-08-17T06:27:56.893326Z	
2023-08-17T06:27:56.928477Z	Success: Finished cloning repository files
2023-08-17T06:27:57.618678Z	Detected the following tools from environment: nodejs@18.16.1, yarn@3.6.1
2023-08-17T06:27:57.619729Z	Installing project dependencies: yarn
2023-08-17T06:27:58.44492Z	➤ YN0070: Migrating from Yarn 1; automatically enabling the compatibility node-modules linker 👍
2023-08-17T06:27:58.445325Z	
2023-08-17T06:27:58.556126Z	➤ YN0000: ┌ Resolution step
2023-08-17T06:28:02.402393Z	➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
2023-08-17T06:28:09.817229Z	➤ YN0002: │ @nivo/annotations@npm:0.83.0 [1d136] doesn't provide react-dom (p3ced2), requested by @react-spring/web
2023-08-17T06:28:09.817862Z	➤ YN0002: │ @nivo/axes@npm:0.83.0 [1d136] doesn't provide react-dom (p48615), requested by @react-spring/web
2023-08-17T06:28:09.81809Z	➤ YN0002: │ @nivo/core@npm:0.83.0 [1d136] doesn't provide react-dom (p27c70), requested by @react-spring/web
2023-08-17T06:28:09.818358Z	➤ YN0002: │ @nivo/core@npm:0.83.0 [31624] doesn't provide react-dom (p267cd), requested by @react-spring/web
2023-08-17T06:28:09.818549Z	➤ YN0002: │ @nivo/core@npm:0.83.0 [42f36] doesn't provide react-dom (pcc0f2), requested by @react-spring/web
2023-08-17T06:28:09.818856Z	➤ YN0002: │ @nivo/core@npm:0.83.0 [5899b] doesn't provide react-dom (p2bc14), requested by @react-spring/web
2023-08-17T06:28:09.819099Z	➤ YN0002: │ @nivo/line@npm:0.83.0 [42f36] doesn't provide react-dom (p4cda1), requested by @react-spring/web
2023-08-17T06:28:09.819335Z	➤ YN0002: │ @nivo/tooltip@npm:0.83.0 doesn't provide prop-types (pb9f7c), requested by @nivo/core
2023-08-17T06:28:09.819564Z	➤ YN0002: │ @nivo/tooltip@npm:0.83.0 doesn't provide react (p9afea), requested by @react-spring/web
2023-08-17T06:28:09.819767Z	➤ YN0002: │ @nivo/tooltip@npm:0.83.0 doesn't provide react (p1a443), requested by @nivo/core
2023-08-17T06:28:09.82007Z	➤ YN0002: │ @nivo/tooltip@npm:0.83.0 doesn't provide react-dom (p16cca), requested by @react-spring/web
2023-08-17T06:28:09.820321Z	➤ YN0002: │ @nivo/voronoi@npm:0.83.0 [1d136] doesn't provide prop-types (p2f1cb), requested by @nivo/core
2023-08-17T06:28:09.820555Z	➤ YN0002: │ nsbusiness@workspace:. doesn't provide prop-types (p19457), requested by @nivo/core
2023-08-17T06:28:09.820787Z	➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
2023-08-17T06:28:09.825591Z	➤ YN0000: └ Completed in 11s 269ms
2023-08-17T06:28:09.896948Z	➤ YN0000: ┌ Post-resolution validation
2023-08-17T06:28:09.897351Z	➤ YN0028: │ The lockfile would have been modified by this install, which is explicitly forbidden.
2023-08-17T06:28:09.897581Z	➤ YN0000: └ Completed
2023-08-17T06:28:09.897763Z	➤ YN0000: Failed with errors in 11s 343ms
2023-08-17T06:28:10.004562Z	Error: Exit with error code: 1
2023-08-17T06:28:10.004981Z	    at ChildProcess.<anonymous> (/snapshot/dist/run-build.js)
2023-08-17T06:28:10.005188Z	    at Object.onceWrapper (node:events:652:26)
2023-08-17T06:28:10.005382Z	    at ChildProcess.emit (node:events:537:28)
2023-08-17T06:28:10.005541Z	    at ChildProcess._handle.onexit (node:internal/child_process:291:12)
2023-08-17T06:28:10.013513Z	Failed: build command exited with code: 1
2023-08-17T06:28:10.986654Z	Failed: error occurred while running build command

대충 요약하자면 node-gyp에 대한 암시적 종속성은 권장되지 않고 @react-spring/web에서 요청한 react-dom을 제공하지 않을거고 일부 종속성이 잘못되었으니 나는 여기서 드러눕겠다는 뜻

해결방법

환경변수에 YARN_VERSION 1을 추가했더니 해결되었다.
(*빌드 명령어는 npm run build가 아닌 yarn build)

전체적인 환경변수 셋팅

참조 : https://community.cloudflare.com/t/cant-deploy-nextjs-to-cf-pages-stuck/532496

---

배포중인 기존의 다른 프로젝트도 있는데 그 프로젝트 또한 vite + yarn임에도 불구하고 빌드명령이 npm run build로 설정되어 있었고 Yarn환경변수설정 또한 따로 없었다. 당연히 나는 똑같이(ㅎㅎ) 따라했으나 에러속출로 폭풍 구글링을 통해 답을 찾았다. 어찌저찌 해결은 했으나 뭐 때문에 다른건지 전혀 감이 잡히지 않는다.