Bug Report: Swiper React Component Runtime Error in MDX

[bastienallain]

## Bug Report

**Describe the bug**
Encountering a runtime error in a Next.js project when using Swiper: `TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function`. This issue occurs when trying to use the Swiper component in a client-side environment.

**To Reproduce**
The issue is reproducible by using the following `Slideshow` component and importing it into an MDX file:

`slideshow.tsx`:
```tsx
'use client'
import React, { useRef, useState } from 'react'
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react'

// Import Swiper styles
import 'swiper/css'
import 'swiper/css/navigation'

import './styles.css'

// import required modules
import { Navigation } from 'swiper/modules'

import Image from 'next/image'

// Définissez vos types pour les slides
interface Slide {
  src: string
  alt?: string
  height?: number
  width?: number
}

interface SlideshowProps {
  slides: Slide[]
}

// Installez les modules Swiper que vous allez utiliser

const Slideshow: React.FC<SlideshowProps> = ({ slides }) => {
  return (
    <Swiper navigation={true} modules={[Navigation]}>
      {slides.map((slide, index) => (
        <SwiperSlide key={index}>
          <Image
            src={slide.src}
            alt={slide.alt || `Slide ${index}`}
            height={slide.height}
            width={slide.width}
            layout="responsive" // ou un autre layout selon vos besoins
          />
        </SwiperSlide>
      ))}
    </Swiper>
  )
}

export default Slideshow

Import in MDX:

import Slideshow from '@/components/Slideshow/SlideShow';

# The Ultimate Swiper Experience

<Slideshow slides={[
  { src: 'https://images.unsplash.com/photo-1682687982470-8f1b0e79151a', height: 500, width: 800 },
  { src: 'https://plus.unsplash.com/premium_photo-1679991890467-3decb348b0a1', height: 500, width: 800 }
]} />

Expected behavior Expected Swiper components to render without runtime errors in a client-side Next.js environment.

Screenshots Not applicable.

System Info (if dev/build issue):

• OS: [e.g., macOS]
• Node version: latest stable
• PNpm version: latest

Additional context The issue seems to be related to the interaction between Swiper, React, and the Next.js environment, specifically in a client-side rendering scenario.

This template is filled out with details specific to the Swiper bug you're encountering in your Next.js project, including the `Slideshow` component and its usage in an MDX file. You can use this to report the issue on the Swiper GitHub repository or similar platforms for support.

[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/next@14.0.3_@babel+core@7.23.6_@opentelemetry+api@1.4.1_react-dom@18.2.0_react@18.2.0/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/next@14.0.3_@babel+core@7.23.6_@opentelemetry+api@1.4.1_react-dom@18.2.0_react@18.2.0/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/swiper@11.0.5/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/swiper@11.0.5/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/swiper@11.0.5/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/swiper@11.0.5/node_modules/swiper/modules/navigation.css" into a JavaScript file without an output path configured
 node_modules/.pnpm/next@14.0.3_@babel+core@7.23.6_@opentelemetry+api@1.4.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/micromatch/index.js:22:3444: ERROR: Could not resolve "path"
 node_modules/.pnpm/next@14.0.3_@babel+core@7.23.6_@opentelemetry+api@1.4.1_react-dom@18.2.0_react@18.2.0/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.