Next.js Discord

Discord Forum

Unhandled Runtime Error: Cannot use import statement outside a module

Unanswered
King Shepherd posted this in #help-forum
Open in Discord
King ShepherdOP
I'm using ContentLayer to made a MDX/React blog, but I'm getting this error. Below is the full code for that page. I've been stuck on this error for a while, so any help is appreciated. Thank you

2 Replies

King ShepherdOP
import { format, parseISO } from "date-fns";
import { allPosts } from "contentlayer/generated";
import Navbar from "@/app/navbar";
import { notFound } from "next/navigation";
import { Button } from "@/components/ui/button";
import { MDXComponents } from "mdx/types";
import { useMDXComponent } from "next-contentlayer/hooks";
import { useMDXComponents } from "mdx-components";
const mdxComponents: MDXComponents = { Button };
export const generateStaticParams = async () =>
    allPosts.map((post) => ({ slug: post._raw.flattenedPath }));
export const generateMetadata = ({ params }: { params: { slug: string } }) => {
    const post = allPosts.find((post) => post._raw.flattenedPath === params.slug);
    if (!post) throw new Error(`Post not found for slug: ${params.slug}`);
    return { title: post.title };
};
const PostLayout = ({ params }: { params: { slug: string } }) => {
    const post = allPosts.find((post) => post._raw.flattenedPath === params.slug);
    if (!post) {
        throw new Error(`Post not found for slug: ${params.slug}`);
        notFound();
    }
    const MDXContent = useMDXComponent(post.body.raw);
    return (
        <body className="pt-8 flex-col h-full px-12 md:px-24 lg:px-48 lg:pt-12 bg-[#201F1F] items-center">
            <Navbar />
            <article className="mx-auto max-w-xl py-8 bg-[#201F1F] w-full h-screen text-white">
                <div className="mb-8 text-center">
                    <time dateTime={post.date} className="mb-1 text-xs text-white">
                        {format(parseISO(post.date), "LLLL d, yyyy")}
                    </time>
                    <h1 className="text-3xl font-bold">{post.title}</h1>
                </div>
                <div
                    className="[&>*]:mb-3 [&>*:last-child]:mb-0"
                    dangerouslySetInnerHTML={{ __html: post.body.html }}
                />
                <MDXContent components={mdxComponents} />
            </article>
        </body>
    );
};
export default PostLayout;