Bug Report: Swiper React Component Runtime Error in MDX about tailwind-nextjs-starter-blog

[bastienallain]

`
successCallback /Users/Osx/github/.contentlayer
Local search index generated...
Generated 4 documents in .contentlayer

File updated: blog/test.mdx
✘ [ERROR] Could not resolve "path"

node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/micromatch/index.js:22:3444:
  22 │ ...=toRegexRange},17:e=>{e.exports=require("path")},837:e=>{e.exports=require("util")}};...
     ╵                                            ~~~~~~

The package "path" wasn't found on the file system but is built into node. Are you trying to
bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "util"

node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/micromatch/index.js:22:3479:
  22 │ ...uire("path")},837:e=>{e.exports=require("util")}};var t={};function __nccwpck_require...
     ╵                                            ~~~~~~

The package "util" wasn't found on the file system but is built into node. Are you trying to
bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Cannot import "node_modules/.pnpm/[email protected]/node_modules/swiper/swiper.css" into a JavaScript file without an output path configured

components/Slideshow/SlideShow.tsx:3:7:
  3 │ import 'swiper/css'
    ╵        ~~~~~~~~~~~~

✘ [ERROR] Cannot import "node_modules/.pnpm/[email protected]/node_modules/swiper/modules/navigation.css" into a JavaScript file without an output path configured

components/Slideshow/SlideShow.tsx:4:7:
  4 │ import 'swiper/css/navigation'
    ╵        ~~~~~~~~~~~~~~~~~~~~~~~

Error: Found 1 problems in 1 documents.

└── Encountered unexpected errors while processing of 1 documents. This is possibly a bug in Contentlayer. Please open an issue.

 • "blog/test.mdx": UnexpectedMDXError: Error: Build failed with 4 errors:
 components/Slideshow/SlideShow.tsx:3:7: ERROR: Cannot import "node_modules/.pnpm/[email protected]/node_modules/swiper/swiper.css" into a JavaScript file without an output path configured
 components/Slideshow/SlideShow.tsx:4:7: ERROR: Cannot import "node_modules/.pnpm/[email protected]/node_modules/swiper/modules/navigation.css" into a JavaScript file without an output path configured
 node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/micromatch/index.js:22:3444: ERROR: Could not resolve "path"
 node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/micromatch/index.js:22:3479: ERROR: Could not resolve "util"

successCallback /Users/Osx/github/.contentlayer
Local search index generated...
SourceFetchDataError: {
"_tag": "HandledFetchDataError"`

[timlrx]

Try using this approach instead: https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/faq/custom-mdx-component.md

Because of the two different build steps between contentlayer / markdown and the final website, only simple react component work if you are trying to import it directly.