코드뷰어 블럭 가끔씩 오류나서 안보이는 버그

이슈 :

코드 블럭 영역에서 string 타입의 데이터를 가져오는데 실패했다는 에러 문구가 나타남
코드 블럭이 아예 안나타남

원인 :

아래 코드에서 syntax 라이브러리를 임포팅 해오는 과정에서 싱크가 안맞아 Promise.all 로 인해 빈 배열로 반환되는 것으로 추측

Promise.all( ~ ) -> 주어진 Promise 중 하나라도 Reject 되는 경우 모두 이행취소

// NotionPage.tsx

const Code = dynamic(() =>
  import('react-notion-x/third-party/code').then(async m => {
    // add / remove any prism syntaxes here
    await Promise.all([
      import('prismjs/components/prism-markup-templating.js'),
      import('prismjs/components/prism-markup.js'),
      import('prismjs/components/prism-bash.js'),
      import('prismjs/components/prism-c.js'),
       ......
    ]);
    return m.Code;
  }),
);

해결

다중의 Promise 를 동시에 처리하면서 모든 Promise 가 성공하지 않아도 되는 Promise.allSettled 메서드 사용
성공했을 땐 status 가 'fulfilled', 실패했을 땐 'rejected'

2skydev / Notion-Next.js-blog-starter-kit

코드뷰어 블럭 가끔씩 오류나서 안보이는 버그 #41