next.js는 better support for React Server Components하면서 기존의 리액트 코드를 그대로 답습하면 에러가 발생하는 것 같다. 나는 세이치즈는 "react": "^18.2.0"로 구현하고 리팩토링은 지금 "next": "14.1.4"로 하면서 fabric.js를 사용하기 위해서 처리했던 문제를 정리했다.

(fake)

Module not found: Can't resolve '../build/Release/canvas.node'


https://github.com/fabricjs/fabric.js/issues/8444

next에서 fabric, konva등 쓰기 어려운가보다. 사람들 에러 난다고 외치고 있다. node-canvas 공식문서에 아래 있어서 그대로 따라함
맥 OS 홈브루
brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

하고나서

node_modules 지우고 캐시도 지우고 .. 재설치.....
.
.
.
는 해결 못했다.

참고
https://github.com/wojtekmaj/react-pdf/issues/1589
https://github.com/Automattic/node-canvas?tab=readme-ov-file

진짜 시작

첫번재 에러

v6만 ssr이 가능하다고 이야기하고 있다.
"그것은 부정확합니다.
현재 패브릭은 가져온 후 환경을 추측합니다.
그리고 ssr에서는 적절한 시점에 추측하지 못하기 때문에 실패합니다.
우리는 v6에서 이 문제를 해결할 것입니다."

방법

import {fabric} from 'fabric'; // v5로 작성된 것을
import * as fabric from 'fabric'; // v6로 다 수정

why?

https://github.com/fabricjs/fabric.js/issues/8444

nextjs는 SSR이 특징, 기존의 import를 사용하면 ssr에 대응할 수 없나보다. Konva의 경우도 ssr로 먼저만들지 않도록 /app 밖으로 빼도록 했고, use client를 사용하라는 조언이 많다.(참고: https://github.com/konvajs/react-konva#usage-with-nextjs)(참고: https://github.com/konvajs/react-konva/issues/102)

내가 v5 이하 문법을 사용하고 있었기 때문에
계속 모듈을 못 찾는다는 에러가 났다. v6 문법을 사용해야한다.

해야할 거
https://nextjs.org/docs/app/building-your-application/rendering#convention
nextjs 렌더링 공부하기

2번째 에러 발생

/canvas.node Unexpected character '�' 

방법

next.config.mjs 수정한다

/** @type {import('next').NextConfig} */

const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack },
  ) => {
    config.externals.push({ canvas: 'commonjs canvas' });
    return config;
  },
};

export default nextConfig;

why?

(참고: https://github.com/Automattic/node-canvas/issues/867)