Component loading fails in Next.js 14.2.

[minpeter]

I don't know if it's a problem with this library or the changes in nextjs. We will update if there is any missing information.

To explain the error exactly, after the version of nextjs was updated to 14.2, an error occurred when trying to build an mdx poster that includes component rendering.

thank you

• mdx-bundler version: ^10.0.2
• node version: v20.11.0
• npm version: 10.3.0, but i use pnpm 8.15.6

minpeter.xyz [main●] pnpm build           

> [email protected] build /Users/minpeter/github.com/minpeter/minpeter.xyz
> next build

  ▲ Next.js 14.2.1

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  .. ⨯ ESLint: Invalid Options: - Unknown options: useEslintrc, extensions - 'extensions' has been removed.
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (51/55)  [=   ]TypeError: Cannot read properties of null (reading 'useState')
    at exports.useState (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.production.min.js:25:394)
    at ne (eval at getMDXExport (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected]/node_modules/mdx-bundler/dist/client.js:44:14), <anonymous>:3:25369)
    at nj (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
    at nM (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
    at nN (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
    at nB (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
    at nD (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680)
    at nN (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853)
    at nM (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:59102)
    at nN (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546) {
  digest: '2592952107'
}

Error occurred prerendering page "/blog/mdx-blog-test". Read more: https://nextjs.org/docs/messages/prerender-error

TypeError: Cannot read properties of null (reading 'useState')
    at exports.useState (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.production.min.js:25:394)
    at ne (eval at getMDXExport (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected]/node_modules/mdx-bundler/dist/client.js:44:14), <anonymous>:3:25369)
    at nj (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46251)
    at nM (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:47571)
    at nN (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
    at nB (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
    at nD (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:66680)
    at nN (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64853)
    at nM (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:59102)
    at nN (/Users/minpeter/github.com/minpeter/minpeter.xyz/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:64546)
 ✓ Generating static pages (55/55)

> Export encountered errors on following paths:
        /blog/[slug]/page: /blog/mdx-blog-test
 ELIFECYCLE  Command failed with exit code 1.

What you did: All dependencies were upgraded to the latest using pnpm upgrade --latest. It was built later.

What happened: The build was not successful. This was the same even after changing the eslint version to ^8.0.0.

Reproduction repository: https://github.com/minpeter/minpeter.xyz content/2023-11-21-mdx 블로그 컴포넌트 실험/mdx-blog-test.mdx post file

[dominik-sfl]

I am getting the exact same error since 14.2.

When I import components into my MDX file that use useState things break.

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
 ⨯ Internal error: TypeError: Cannot read properties of null (reading 'useState')

Are there any news on this? Have you been able to solve this @minpeter?

[minpeter]

No one paid any attention. In my case, I am staying on next.js 14.1.4

[minpeter]

There is a new update on this issue.

This does not cause all Mdx elements to fail; it only occurs for components imported using an import statement inside a .mdx file.

To use the latest Next.js and Mdx-bundler together, the problem is solved by using a temporarily globally created Mdx.

However, improvements are needed because the import function still fundamentally does not work.

| fyi: ModCodeBlock and Callout can be imported globally in the following way.

"use client";

import { CodeBlock, ModCodeBlock } from "@/components/code-block";
import Callout from "@/components/callout";
import "@/styles/mdx.css";

import { getMDXComponent } from "mdx-bundler/client";

export default function PostContent({ code }: any) {
  const Component = getMDXComponent(code);
  return (
    <Component
      components={{
        code: ({ children, className }: any) => {
          const match = /language-(\w+)/.exec(className || "");
          const language = match ? match[1] : "";

          return <CodeBlock language={language} code={children} />;
        },
        ModCodeBlock,
        Callout,
      }}
    />
  );
}

[bayasdev]

+1