Theo's Typesafe Cult•12mo ago

Any idea how to use imports outside of a module? Trouble understanding this error:

What does this error mean by cannot use import statements outside a module? This is a mdx blog with contentlayer, and it doesn't like me using the useMDXComponent function.

21 Replies

machina•12mo ago

I'm not very well versed in how typescript works, so I'm having trouble figuring this out

Sturlen•12mo ago

if you could post your code inside a code tag like this, then it would be easier others to read and help you

machina•12mo ago

I’ll do that rn @sturlen

machina•12mo ago

are you getting it? I sent it in this thread but i'm getting this message @sturlen

Sturlen•12mo ago

I don't see why you'd be blocked from posting here

machina•12mo ago

specifically posting code weird

Sturlen•12mo ago

you might need to ask a mod then. I just answer the occasional question here

// app/posts/[slug]/page.tsx
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";
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;

// app/posts/[slug]/page.tsx
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";
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;

machina•12mo ago

perfect thanks

Sturlen•12mo ago

had to cut a few lines empty lines

Sturlen•12mo ago

@machina0 did you add withContentlayer to your next config? https://contentlayer.dev/docs/reference/next-contentlayer-e6e7eb3a#withcontentlayer

Contentlayer

next-contentlayer – Contentlayer

Helper for improving the experience when developing with Next.js.

machina•12mo ago

import { withContentlayer } from "next-contentlayer";
import withMDX from "@next/mdx";

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        serverComponentsExternalPackages: ["@prisma/client"],
        serverActions: true,
        mdxRs: true,
    },
};

export default withContentlayer(withMDX(nextConfig));

import { withContentlayer } from "next-contentlayer";
import withMDX from "@next/mdx";

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        serverComponentsExternalPackages: ["@prisma/client"],
        serverActions: true,
        mdxRs: true,
    },
};

export default withContentlayer(withMDX(nextConfig));

yeah here it is @sturlen

Sturlen•12mo ago

nothing strikes me as wrong at glance and the docs seem to agree. only idea I have is if something in the Button component is not working. have you tried importing in another component see if it works?

machina•12mo ago

yeah let me try that also does something seem wrong with the

  const MDXContent = useMDXComponent(post.body.raw);

  const MDXContent = useMDXComponent(post.body.raw);

line @sturlen I've seen some tutorials use post.body.code there but I don't have a .code attribute in the body

Sturlen•12mo ago

it probably depends on which kind of content source you're using

Gaming

Programming

Any idea how to use imports outside of a module? Trouble understanding this error: