Bug Report: Swiper React Component Runtime Error in MDX
bastienallain opened this issue · comments
## 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.
`
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"`
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.