解決 react markdown套用 React Syntax Highlighter 出現 Cannot access '__WEBPACK_DEFAULT_EXPORT__' ... 的問題

Problem

在Next.js使用react markdown搭配react-syntac-highlighter時出現了以下錯誤

Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

Solve

百思不得其解，最終發現只要將使用到套件esm的換成cjs，像是以下這樣，就解決問題了

import {
  vscDarkPlus,
} from 'react-syntax-highlighter/dist/cjs/styles/prism';

備註: 原本範例給的是react-syntax-highlighter/dist/cjs/styles/prism 這樣