Next.jsでnode_modulesのファイルがcssファイルをインポートした際のエラー対処について

[Yuisei-Maruyama]

ドキュメント表示機能作成時に下記のようなエラーに遭遇

エラー内容としては、 @uiw/react-markdown-preview にある markdown.css をimportできないということである。

./node_modules/@uiw/react-markdown-preview/esm/styles/markdown.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@uiw/react-markdown-preview/esm/index.js

[Yuisei-Maruyama]

下記のパッケージでエラーの原因であるcssのインポートを取り除くことで対応できる！！

https://www.npmjs.com/package/next-remove-imports

[Yuisei-Maruyama]

next.config.jsに以下の記述を追加

// next.config.js
const removeImports = require('next-remove-imports')({
  test: /node_modules([\s\S]*?)\.(tsx|ts|js|mjs|jsx)$/,
  matchImports: "\\.(less|css|scss|sass|styl)$"
})

module.exports = removeImports({
  webpack(config, options) {
    return config
  },
})

[Yuisei-Maruyama]

別の問題が発生

Server Error
Error: require() of ES Module /Users/y_metro/Develop/MyPortfolio_Redux/node_modules/react-markdown/index.js from /Users/y_metro/Develop/MyPortfolio_Redux/node_modules/@uiw/react-markdown-preview/lib/index.js not supported.
Instead change the require of /Users/y_metro/Develop/MyPortfolio_Redux/node_modules/react-markdown/index.js in /Users/y_metro/Develop/MyPortfolio_Redux/node_modules/@uiw/react-markdown-preview/lib/index.js to a dynamic import() which is available in all CommonJS modules.

[Yuisei-Maruyama]

公式のIssue で解法が示されていた！！！

https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341

[Yuisei-Maruyama]

Markdownの表示を実現.