Next.js Discord

Discord Forum

Dynamic Import Strangeness

Answered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
Can anyone explain why this is failing:
const path = '/public/blog/self-taught-linear-algebra.mdx'
const grabBlog = await import(`${path}`);


but this isn't:
const grabBlog = await import(`/public/blog/self-taught-linear-algebra.mdx`);


It makes not sense to me.
Answered by Ray
View full answer

23 Replies

@Brown bear Can anyone explain why this is failing: javascript const path = '/public/blog/self-taught-linear-algebra.mdx' const grabBlog = await import(`${path}`); but this isn't: javascript const grabBlog = await import(`/public/blog/self-taught-linear-algebra.mdx`); It makes not sense to me.
Brown bearOP
For more information:

Inside of my nextjs project, I have a bunch of mdx files inside of my blogs folder which is inside of my public folder (nextjsproject -> public -> blogs -> .mdx files).

These mdx files are exporting an object named metadata. The way I grab this metadata at the moment is by importing the mdx file (as shown above). Then, I can do imported_blog.metadata to grab the metadata export.

Problem is, my project breaks the moment I enter a variable into import inside of the async function I have.
I know a lot of things are a bit wonky in here at the moment, but I've just been doing a lot of placeholder things while debugging this.
Would appreciate any help to fix this issue, or even an improved way of doing this!
Ray
Answer
Brown bearOP
Oh
Any ideas on how I can do what I'm trying or nah?
Ray
what you wanna achieve? render a list of content you have?
Brown bearOP
Sort of
I have a folder of mdx files
I want to grab the metadata of all of the mdx files
Then I'd just pass those into a component that'd allow me to load up components that show the name of each of the blogs, their descriptions, etc. that's contained inside of the metadata of the blogs
Ray
try using next-mdx-remote instead
it has a serialize function
@Brown bear Then I'd just pass those into a component that'd allow me to load up components that show the name of each of the blogs, their descriptions, etc. that's contained inside of the metadata of the blogs
Ray
import fs from "fs/promises";
import { serialize } from "next-mdx-remote/serialize";

for (const blogFile of blogFiles) {
  const mdx = await fs.readFile(process.cwd() + "/public/doc/" + blogFile);
  const serializedPost = await serialize(mdx, {
    parseFrontmatter: true,
  });
  console.log(serializedPost.frontmatter);
}
this should do it
Brown bearOP
Ahh that won't work the way I want it to unfortunately. Already tried it and it causes different difficulties for me. I'll just have to figure out another way. Thank you!
Ray
hmm this is not what you want?
Brown bearOP
It causes me to have to be way less flexible with what I can do in my mdx files when it comes to using components.
It might've just been me using it poorly, so I'll take another look at it later
But for now I have a couple things I wanna try out
Again thank you!
Ray
oh ok np