#Issue adding layout to MDX - Cannot find module

5 messages · Page 1 of 1 (latest)

fringe garnet
#

I receive this error:

Cannot find module '@layouts/Page.astro' imported from '/PROJECT_FOLDER/src/pages/blog/index.mdx'

despite that file existing and I have this in my tsconfig.json

"paths": {
"@components/": ["./src/components/"],
"@layouts/": ["./src/layouts/"],
"@pages/": ["./src/pages/"]
}

Example page eg. index.mdx


title: 'TEST'
description: 'Lorem ipsum dolor sit amet'
pubDate: 'Jul 15 2023'
heroImage: '/blog-placeholder-2.jpg'
layout: '@layouts/Page.astro'

Lorem ipsum dolor sit amet.

I got the idea of using aliases from here: https://github.com/withastro/astro/issues/397#issuecomment-1193245056 and it would resolve my issue of having MDX files hierarchically, but it doesn't seem to work? I could do workaround with a few more paths but that would just seem dumb...

Any idea why this fails for me but works for someone else?

GitHub

Currently each markdown page needs a layout set, like this: --- layout: ../layouts/Main.astro --- But I'd like to be able to have everything in a directory use a default layout if one isn't...

static crestBOT
#
Quiet in here?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

dense scarab
#

It might be due to the way you defined your alias paths. Here's mine for comparison:

  "paths": {
    "@assets/*": ["src/assets/*"],
    "@components/*": ["src/components/*"],
    "@data/*": ["src/data/*"],
    "@layouts/*": ["src/layouts/*"],
    "@utils/*": ["src/utils/*"]
  }

note: they start with src/ not ./src/

fringe garnet
#

Thanks @dense scarab but that did not seem to help out either. I wonder, does TypeScript paths work in .MDX files at all? I suspect that might be the issue as I'm trying to make my site MDX-only for maximum CMS compability. I do have a workaround for this since my new site doesn't have a deep structure, but would had been nice if this would have worked :/

dense scarab
#

I have mdx files like this:

---
title: "some title"
description: "some description"
---

import SomeComponent from "@components/SomeComponent.astro";
import assets_images_myimage_jpg from "@assets/images/myimage.jpg";

and everything works as expected. Note: the imports come after the frontmatter, in the body of the mdx.