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.
No description
No description
21 Replies
machina
machina14mo ago
I'm not very well versed in how typescript works, so I'm having trouble figuring this out
Sturlen
Sturlen14mo ago
if you could post your code inside a code tag like this, then it would be easier others to read and help you
No description
machina
machina14mo ago
I’ll do that rn @sturlen
machina
machina14mo ago
No description
machina
machina14mo ago
are you getting it? I sent it in this thread but i'm getting this message @sturlen
Sturlen
Sturlen14mo ago
I don't see why you'd be blocked from posting here
machina
machina14mo ago
specifically posting code weird
Sturlen
Sturlen14mo 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
machina14mo ago
perfect thanks
Sturlen
Sturlen14mo ago
had to cut a few lines empty lines
Sturlen
Sturlen14mo 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
machina14mo 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
Sturlen14mo 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
machina14mo 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
Sturlen14mo ago
it probably depends on which kind of content source you're using
machina
machina14mo ago
hm should I open a github issue? @sturlen oh theres a discord
Sturlen
Sturlen14mo 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.
No description
Sturlen
Sturlen14mo 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
machina
machina14mo ago
running it with code (with the red squiggle underneath) gives:
machina
machina14mo ago
No description
machina
machina14mo 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
Want results from more Discord servers?
Add your server