Next.js Discord

Discord Forum

Render MDX-Error: Objects are not valid as a React child (found: [object Promise]).

Answered
Sloth bear posted this in #help-forum
Open in Discord
Sloth bearOP
Hello, I'm new to NextJs. I'm having an issue when trying to render mdx content.
The Error: Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

js"use client";
import Head from "next/head";

import { Inter } from "next/font/google";
import styles from "@/styles/Home.module.css";

import fs from "fs";
import path from "path";
import matter from "gray-matter";


import { MDXRemote } from "next-mdx-remote/rsc";
import { serialize } from "next-mdx-remote/serialize";

import * as React from "react";

const inter = Inter({ subsets: ["latin"] });

export async function getStaticProps() {
  const contentDir = "content";

  const fileContent = fs.readFileSync(
    path.join(contentDir, "first.blog.mdx"),
    "utf-8"
  );

  const { data: frontMatter, content } = matter(fileContent);

  const serializedContent = await serialize(content);

  return { props: { serializedContent, frontMatter } };
}

export default function Home({ serializedContent, frontMatter }) {
  
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={`${styles.main} ${inter.className}`}>

        <div>
          {frontMatter.title}
        </div>
        <div>
          <MDXRemote source={serializedContent}></MDXRemote>
        </div>
       
      </main>
    </>
  );
}

The file is opened successfully in the getStaticProps() function and when doing a simple console.log of the content, the file content is read normally. When I try to render using <MDXRemote source={serializedContent}></MDXRemote>, the error shows. I might not be understanding something, could someone help me please
Answered by Ray
import { MDXRemote } from 'next-mdx-remote'
instead of import { MDXRemote } from 'next-mdx-remote/rsc'
View full answer

6 Replies

@Sloth bear Hello, I'm new to NextJs. I'm having an issue when trying to render mdx content. The Error: Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. js"use client"; import Head from "next/head"; import { Inter } from "next/font/google"; import styles from "@/styles/Home.module.css"; import fs from "fs"; import path from "path"; import matter from "gray-matter"; import { MDXRemote } from "next-mdx-remote/rsc"; import { serialize } from "next-mdx-remote/serialize"; import * as React from "react"; const inter = Inter({ subsets: ["latin"] }); export async function getStaticProps() { const contentDir = "content"; const fileContent = fs.readFileSync( path.join(contentDir, "first.blog.mdx"), "utf-8" ); const { data: frontMatter, content } = matter(fileContent); const serializedContent = await serialize(content); return { props: { serializedContent, frontMatter } }; } export default function Home({ serializedContent, frontMatter }) { return ( <> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <main className={`${styles.main} ${inter.className}`}> <div> {frontMatter.title} </div> <div> <MDXRemote source={serializedContent}></MDXRemote> </div> </main> </> ); } The file is opened successfully in the getStaticProps() function and when doing a simple console.log of the content, the file content is read normally. When I try to render using <MDXRemote source={serializedContent}></MDXRemote>, the error shows. I might not be understanding something, could someone help me please
riský
you look like you are using pages dir, i have no idea if the "use client"; would cause issues there (its for app dir), so is it the same error you get without that
Singapura
It looks like the value you are going to render in your code is appearing as an object
Ray
import { MDXRemote } from 'next-mdx-remote'
instead of import { MDXRemote } from 'next-mdx-remote/rsc'
Answer
riský
ahh i wasn't sure about the specifics, but glad to see something fixes it 🙂 (i haven't used this libary before)