#Website mdx not rendering after build

4 messages · Page 1 of 1 (latest)

obsidian kayak
#

I have a webpage that renders mdx as its content, on dev it works but when i build the website the style and half of the page dont get rendered. Is my code appropriate?

MDX FILE:

import Card from '../components/Card.astro';
import CardGroup from '../components/CardGroup.astro';

# Uses

This is the equipment I use for gaming, programming, everyday.

## PC

<CardGroup
 data={[
  {
   title: 'MSI Optix G27C4',
   description: '27" 170Hz Monitor',
   href: 'https://a.co/d/9RVOkbS',
   image: '/assets/pc/monitor-g27c4.png',
  },
  {
   title: 'RTX 3060 Ti',
   description: 'Graphics Card',
   href: 'https://a.co/d/4jZ9uKM',
   image: '/assets/pc/rtx-3060-ti.png',
  },
  {
   title: 'i5 12400',
   description: 'CPU',
   href: 'https://a.co/d/0tuUfyo',
   image: '/assets/pc/i5-12400.png',
  },
  {
   title: 'Lenovo DDR4 16 GB',
   description: 'RAM',
   href: 'https://a.co/d/bzmfGsA',
   image: '/assets/pc/lenovo-ram16gb.png',
  },
 ]}
/>

## Coding

<CardGroup
 data={[
  { title: 'Visual Studio Code', description: 'Code Editor & IDE', image: 'skill-icons:vscode-dark', has: 'icon' },
  { title: 'Github Pages', description: 'Hosting', image: 'simple-icons:githubpages', has: 'icon' },
 ]}
/>

## Software

<CardGroup
 data={[
  {
   title: 'Arc',
   description: 'Web browser',
   image: 'arc',
   has: 'icon',
  },
  {
   title: 'Lunacy',
   description: 'Design Tool',
   image: 'simple-icons:lunacy',
   has: 'icon',
  }
/>

ASTRO FILE:

---
import Container from '../components/Container.astro';
import Layout from '../layouts/Layout.astro';
import { Content } from './uses.mdx';
import '@fontsource/poppins/600.css';
const title = 'Aryxst';

// 400+600
---

<Layout {title}>
 <Container>
  <div id='render'><Content /></div>
 </Container>
</Layout>

The container element is just a prose with an header on top, for context.

errant valveBOT
#

Hi @obsidian kayak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided, it seems like you're experiencing a common issue with Astro where styles or components don't render correctly in production builds, even though they work fine in development. This issue has been reported by several users in the Astro GitHub issues.

One possible cause could be the way you're importing and using your components in your MDX file. In some cases, Astro might not be able to correctly resolve the components, especially if they're being used within a dynamic context like a map function or a custom component.

Here are a few things you could try:

  1. Make sure your components are correctly exported and imported. Check for any typos or incorrect paths.

  2. Try to simplify your MDX content as much as possible. Instead of using a dynamic component like CardGroup, try to manually write out each Card component to see if that makes a difference.

  3. Check if there are any errors or warnings in your build logs. These could give you a clue about what's going wrong.

  4. Try to create a minimal reproducible example and share it on the Astro GitHub issues. The Astro team and community might be able to help you figure out the problem.

Here are some related issues for reference:

#

Remember, these are just suggestions and the actual solution might be different depending on your specific setup and code.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: