Theo's Typesafe Cult•15mo 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

RyanOP•15mo ago

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

Sturlen•15mo ago

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

RyanOP•15mo ago

I’ll do that rn @sturlen

RyanOP•15mo ago

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

Sturlen•15mo ago

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

RyanOP•15mo ago

specifically posting code weird

Sturlen•15mo 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;

RyanOP•15mo ago

perfect thanks

Sturlen•15mo ago

had to cut a few lines empty lines

Sturlen•15mo 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.

RyanOP•15mo 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•15mo 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?

RyanOP•15mo 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•15mo ago

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

RyanOP•15mo ago

hm should I open a github issue? @sturlen oh theres a discord

Sturlen•15mo ago

according to the docs you should have access to the the code property on MDX https://contentlayer.dev/docs/sources/files/generated-types-fda1d801#provided-types

Contentlayer

Generated Type Definitions – Contentlayer

Contentlayer automatically generates type definitions for content that lives locally.

Sturlen•15mo ago

try running it in dev mode with post.body.code instead of raw might also be related to using imports in the .mdx files contentlayer does have it's own discord, they might have fix for this: https://discord.gg/rytFErsARm

RyanOP•15mo ago

running it with code (with the red squiggle underneath) gives:

RyanOP•15mo ago

made another post for that too in the contentlayer discord. In the meantime I'll see if I can find a reason in the documentation

Gaming

Programming

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