TypeError: react__WEBPACK_IMPORTED_MODULE_0__.createContext is not a function

[Adkimsm]

Summary

i have these following codes:

// lib/api.js
import fs from 'fs/promises'
import path from 'path'
import { glob } from 'glob'
import consola from 'consola'

if (process.env.NODE_ENV === 'development') {
    async () => {
        const chokidar = await import('chokidar')
        const watcher = chokidar.watch('posts/**/*.mdx')
        watcher.on('change', () => {
          getAllPostSlugs.cache.clear()
        })
    }
}

/**
 * 获取所有文章的slug列表
 * @returns 包含slug和文件元数据的数组
 */
export async function getAllPostSlugs() {
  try {
    // 1. 使用glob匹配MDX文件（支持嵌套目录）
    const postsDir = path.join(process.cwd(), 'posts')
    const mdxFiles = await glob('**/*.mdx', {
      cwd: postsDir,
      ignore: ['**/draft/**', '**/archived/**'] // 忽略草稿和归档目录
    })

    // 2. 并行获取文件元数据
    const slugs = await Promise.all(
      mdxFiles.map(async (relativePath) => {
        const filePath = path.join(postsDir, relativePath)
        const stats = await fs.stat(filePath)
        
        // 3. 生成规范化slug
        const slug = relativePath
          .replace(/\.mdx$/, '')
          .replace(/\\/g, '/') // Windows路径兼容
          .split('/')
          .map(segment => encodeURIComponent(segment)) // 处理特殊字符
          .join('/')

        return { slug, filePath, stats }
      })
    )

    // 4. 按修改时间排序（最新优先）
    return slugs.sort((a, b) => 
      b.stats.mtimeMs - a.stats.mtimeMs
    )
  } catch (error) {
    consola.error('获取文章列表失败:', error)
    return []
  }
}

// lib/mdx.js
import { serialize } from 'next-mdx-remote/serialize'
import remarkGfm from 'remark-gfm'
import remarkFrontmatter from 'remark-frontmatter'
import consola from 'consola'

export async function compileMDX(slug) {
  try {
    const source = await import(`@/posts/${slug}.mdx`)
    const mdxSource = await serialize(source.default, {
      mdxOptions: {
        remarkPlugins: [remarkGfm, remarkFrontmatter],
        rehypePlugins: []
      }
    })
    return {
      content: mdxSource,
      frontmatter: source.frontmatter
    }
  } catch (error) {
    consola.error(`MDX编译失败: ${slug} ${error}`)
    throw error
  }
}

// app/posts/[slug]/page.js
import { notFound } from 'next/navigation'
import dayjs from 'dayjs'
import { compileMDX } from '@/lib/mdx'
import { getAllPostSlugs } from '@/lib/api'
import consola from 'consola'

export const dynamicParams = false // 禁用动态路由生成

export async function generateStaticParams() {
  // 动态获取所有文章slug（需实现getAllPostSlugs）
  const slugs = await getAllPostSlugs() 
  return slugs.map(slug => ({ slug: slug.slug }))
}

export default async function PostPage({ params }) {
    const { slug } = await params
  try {
    const { content, frontmatter } = await compileMDX(slug)
    
    return (
        <article className="py-24 px-4 rounded-2xl">
          <header className='mb-12 text-center'>
            <h1 className='text-3xl leading-9 font-extrabold text-gray-900 dark:text-white tracking-tight sm:text-4xl sm:leading-10 md:text-5xl md:leading-14'>
              {frontmatter.title}
            </h1>
            <time className='my-2 block text-base leading-6 font-medium text-gray-500 dark:text-gray-300'>
              {dayjs(frontmatter.date).format('YYYY-MM-DD')}
            </time>
          </header>
          <div className='yue'>{content}</div>
        </article>
    )
  } catch (error) {
    {consola.error(error)}
  }
}

they always throw error TypeError: react__WEBPACK_IMPORTED_MODULE_0__.createContext is not a function, no matter i tried not to use the compile method of mdxjs. What should i do to fix this?

Additional information

Node.js v22.14.0

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Enterprise LTSC 2021
  Available memory (MB): 16278
  Available CPU cores: 4
Binaries:
  Node: 22.14.0
  npm: 11.1.0
  Yarn: N/A
  pnpm: 10.6.1
Relevant Packages:
  next: 15.2.1
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: N/A
Next.js Config:
  output: N/A

Example

No response

[icyJoseph]

Long shot... but I think you need this file, https://nextjs.org/docs/app/api-reference/file-conventions/mdx-components

It is shown in the guide here, https://nextjs.org/docs/app/building-your-application/configuring/mdx#add-an-mdx-componentstsx-file

[Adkimsm]

mdx-components.js has been added. I used the simplest instance on the official website as you gave.

export function useMDXComponents(components) {
return {
...components,
}
}

[Adkimsm]

I use traditional fs instead and it fixed.