Next.js 13에서 React Markdown Preview 사용 (2가지 에러해결 포함)

https://uiwjs.github.io/react-markdown-preview/

React Markdown Preview

- React Markdown Preview 라이브러리

마크다운, 코드블럭 등을 자동으로 만들어 주는 라이브러리다. 리액트에서는 사용하는데 문제가 없겠지만

 

Next.js 13에서 사용했을 때 작은 문제가 2가지 있었다. 

 

- 1번째 Module not found: (ESM packages .....) 에러

Next.js 공식문서를 보면 이와같은 경우에 아래와같이 해결하라고 나와있다.

https://nextjs.org/docs/messages/import-esm-externals

import-esm-externals | Next.js

 

Next.config.js 파일에 아래와 같이 넣어주면된다.

 

찾아보니 빡빡한 옵션을 풀어주는 녀석인데 사용해도 크게 문제가 된다고 판단되지 않았다.

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        esmExternals: "loose",
    },
}



module.exports = nextConfig

정상적으로 잘 출력이 되는걸 볼 수있다.

 

- 2번째 error importing type from esm in commonjs 오류

Nextjs 13버전으로 만들어진 템플릿을 사용하다가 1번째 환경까지 세팅해 주었지만 2번째 오류가 나는 경우도 있었다.

 

우연찮게 발견했지만 Next.js에서 특정 라이브러리를 import해와서 사용할경우 이미 렌더링이 완료된 페이지에서는 작동하지만

 

새로고침 하는경우 작동하지 않고 Commonjs오류가 나오는 경우가 있었다. (import관련)

 

이와같은 경우는 Next.js의 'Lazy loading'을 이용해 줘야 한다.

https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

Optimizing: Lazy Loading | Next.js

Using Dynamic Imports with next/dynamic
Using React.lazy() with Suspense

공식 문서에는 이와같이 설명되어 있는데 결론만 말하면

 

아래코드와 같이 import대신 dynamic을 통해 불러오고 ssr: false 옵션을 주는 것이다.

'use client'
import React from 'react';
// import MarkdownPreview from '@uiw/react-markdown-preview';
import dynamic from 'next/dynamic'
 
// Client Components:
const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), { ssr: false })
 

const source = `
## MarkdownPreview

> todo: React component preview markdown text.
`;

export default function Demo() {
  return (
    <MarkdownPreview source={source} />
  )
}

내가 판단하기엔 CSR과 SSR방식의 차이에서 나오는 오류라고 생각 되었다.

 

- 참고하면 좋은 링크

https://helloinyong.tistory.com/323

Next.js Lazy Hydration으로 웹 성능 향상시키기(HTML은 유지하고 Script는 걸러내자)