Trying to import a module in a rsc using a variable as parameter.

Unanswered

Orinoco Crocodile posted this in #help-forum

Orinoco CrocodileOP

2024-03-18T22:20:42.000Z

I am new to nextjs and server side components. What I am trying to do is to import a module which is an mdx (I did all the mdx configuration according to the following page https://nextjs.org/docs/app/building-your-application/configuring/mdx)

// src/app/example/page.tsx
export default async function Page() {
  const getContent = async (slug: string) => {
    const filePath = `@content/${slug}`;
    console.log("filepath", filePath);
    return await import("@/content/posts/post-1.mdx"); // file located into src/content/posts/post-1.mdx
  };

  const MyPost = await getContent("posts/post-1.mdx");
  return (
    <div>
      <MyPost.default></MyPost.default>
    </div>
  );
}

While if I use a variable (which resolves to the same value) then it does not work:

export default async function Page() {
  const getContent = async (slug: string) => {
    const filePath = `@content/${slug}`;
    console.log("filepath", filePath); // The value is "@/content/posts/post-1.mdx"
    return await import(filePath);
  };

  const MyPost = await getContent("posts/post-1.mdx");
  return (
    <div>
      <MyPost.default></MyPost.default>
    </div>
  );
}

The final error is the following:

Import trace for requested module:
./src/app/example/page.tsx
filepath @content/posts/post-1.mdx
 â¨¯ Error: Cannot find module '@content/posts/post-1.mdx'
    at /Users/DaniloDelizia/projects/fixscale/subastas/.next/server/app/example/page.js:25:11
    at async getContent (./src/app/example/page.tsx:12:16)
    at async Page (./src/app/example/page.tsx:14:20)
 âš  ./src/app/example/page.tsx
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./src/app/example/page.tsx

6 Replies

@Orinoco Crocodile I am new to nextjs and server side components. What I am trying to do is to import a module which is an mdx (I did all the mdx configuration according to the following page https://nextjs.org/docs/app/building-your-application/configuring/mdx) // src/app/example/page.tsx export default async function Page() { const getContent = async (slug: string) => { const filePath = `@content/${slug}`; console.log("filepath", filePath); return await import("@/content/posts/post-1.mdx"); // file located into src/content/posts/post-1.mdx }; const MyPost = await getContent("posts/post-1.mdx"); return ( <div> <MyPost.default></MyPost.default> </div> ); } While if I use a variable (which resolves to the same value) then it does not work: export default async function Page() { const getContent = async (slug: string) => { const filePath = `@content/${slug}`; console.log("filepath", filePath); // The value is "@/content/posts/post-1.mdx" return await import(filePath); }; const MyPost = await getContent("posts/post-1.mdx"); return ( <div> <MyPost.default></MyPost.default> </div> ); } The final error is the following: Import trace for requested module: ./src/app/example/page.tsx filepath @content/posts/post-1.mdx â¨¯ Error: Cannot find module '@content/posts/post-1.mdx' at /Users/DaniloDelizia/projects/fixscale/subastas/.next/server/app/example/page.js:25:11 at async getContent (./src/app/example/page.tsx:12:16) at async Page (./src/app/example/page.tsx:14:20) âš ./src/app/example/page.tsx Critical dependency: the request of a dependency is an expression Import trace for requested module: ./src/app/example/page.tsx

Ray

2024-03-18T22:30:50.000Z

Ray

2024-03-18T22:31:13.000Z

try this instead

import dynamic from "next/dynamic";

export default async function Page() {
  const slug = "posts/post-1.mdx";
  const filePath = `@/content/${slug}`;
  const MyPost = dynamic(() => import(filePath), {
    ssr: true,
  });

  return (
    <div>
      <MyPost />
    </div>
  );
}

btw, why don't you use @next/mdx?

https://nextjs.org/docs/app/building-your-application/configuring/mdx

Orinoco CrocodileOP

2024-03-18T22:47:49.000Z

Thanks for your answer @Ray , I still get the following error:

 â¨¯ Error: Cannot find module '@/content/posts/post-1.mdx'
    at /Users/DaniloDelizia/projects/fixscale/subastas/.next/server/app/example/page.js:25:11
 âš  ./src/app/example/page.tsx
Critical dependency: the request of a dependency is an expression

I am actually using @next/mdx which works correctly. But what I would like to achieve is the following:

* Having all the posts within a folder content/posts/{slug}.mdx (instead of having a folter for each post app/post/{slug}/page.mdx)
* Creating a lister page of my blog posts

The 1st one is a "nice to have", but for the 2nd what I am trying to do is to load all the posts metadata of the mdx and trying to build the page. The problem I am facing is that I am not able to read the metadata from the mdx. If you have any advice/example for that, then it would be great.

@Orinoco Crocodile Thanks for your answer <@743561772069421169> , I still get the following error: â¨¯ Error: Cannot find module '@/content/posts/post-1.mdx' at /Users/DaniloDelizia/projects/fixscale/subastas/.next/server/app/example/page.js:25:11 âš ./src/app/example/page.tsx Critical dependency: the request of a dependency is an expression I am actually using `@next/mdx` which works correctly. But what I would like to achieve is the following: * Having all the posts within a folder `content/posts/{slug}.mdx` (instead of having a folter for each post `app/post/{slug}/page.mdx`) * Creating a lister page of my blog posts The 1st one is a "nice to have", but for the 2nd what I am trying to do is to load all the posts metadata of the mdx and trying to build the page. The problem I am facing is that I am not able to read the metadata from the mdx. If you have any advice/example for that, then it would be great.

Ray

2024-03-18T22:58:58.000Z

oh ok, maybe try it with next-mdx-remote

import { MDXRemote } from 'next-mdx-remote/rsc'
import fs from 'fs/promises'
import { join } from 'path'

export default async function Page() {
  const slug = "posts/post-1.mdx";
  const filePath = join(process.cwd(), `content/${slug}`);
  const markdown = await fs.readFile(filePath);

  return (
    <div>
      <MDXRemote source={markdown} />
    </div>
  );
}