MDX is an authorable format that lets users write JSX in markdown documents.
Questions tagged [mdxjs]
153 questions
1
vote
2 answers
Warning: data for page "/blog/....") is 569 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance
What is the best way to handle "Warning: data for page "/blog/....") is 569 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance" in nextjs for mdx file without using largePageDataBytes in next.config.js. I'm using…

faisal-akbar
- 33
- 1
- 7
1
vote
0 answers
Next.JS + MDX-Bundler Hydration Error when MDX Component is Wrapping children in New Lines
I am using next.js + mdx-bundler. I have a very basic component that I use within my mdx.
This works:
Mdx is a great format and I like it a lot .
Mdx is a great
format
and I like it a
lot .
However,…

antonwilhelm
- 5,768
- 4
- 19
- 45
1
vote
0 answers
Cannot render MDX body in react node with Gatsby
I have a gatsby website that is using mdx as section instead of pages. I thought this should be simple. I can query all the sections with graphQL
query HomePageQuery {
allMdx(filter: {fields: {source: {eq: "section"}}}) {
edges {
…

Ryan
- 414
- 1
- 6
- 16
1
vote
1 answer
How to resolve gatsby-plugin-mdx threw an error while running the onCreateNode lifecycle when passing code to a React Bootstrap Alert?
Trying to pass MDX formatted code to render with a React BootStrap Alert manipulated with Styled Components:
MDX:
import AlertMessage from '../src/components/AlertMessage'
\```html
This is a bold
…

DᴀʀᴛʜVᴀᴅᴇʀ
- 7,681
- 17
- 73
- 127
1
vote
1 answer
WebAssembly directive ignored for next.config.mjs and getting error
I'm trying to migrate my site to mdx2 and mdx-embed.
I'm running into issues with webpack not recognizing my web-assembly configuration in next.config.mjs. The issue is happening during the import of wasm file during the "yarn build".
Import trace…

Hany Morcos
- 147
- 1
- 5
1
vote
0 answers
Can't get values of nested frontMatter objects
I'm using gray-matter/frontMatter and remark-mdx to read values of an .mdx file in a nextJS project:
.mdx file:
details:
- pronoun: she/her
- favoriteThing: learning
- leastFavoriteThing: winter
- favoriteMovie: kiki's delivery service
-…

JordyJordyJordyJordan
- 137
- 1
- 9
1
vote
1 answer
ArgsTable storybook 6 MDX
I am trying to insert ArgsTable inside an MDX file but it does not show the table.
The components are developed with Litelement.
Have you also encountered the same problem?

Giuseppe D'Andria
- 31
- 2
1
vote
2 answers
How to get exports form mdx in nextjs
My Problem
The nextjs documentation on mdx states that it does not support frontmatter. Instead it is suggested to create a constant and export it [1]. However I can't seem to get at data exported in such a way. For instance using the following
/*…

groot sarchy
- 90
- 7
1
vote
1 answer
Weird plain-text duplication in MDX after LaTeX equation
I am trying to integrate the MDX with remark-math and rehype-katex plugin on Next.js. However, after I successfully added the plugins, there are a plain-text duplication after the equation. Here is the MDX file code:
# Hello
My name $x^2+2x+1$
1.…
1
vote
1 answer
React components and math expressions in .mdx file are not rendering correctly in Next.js application
My custom React components when imported in a .mdx file, are not being rendered at all. The math expressions in the .mdx file either render unformatted or throw parsing errors in spite of following the configuration instructions in the Next.js…

IronManAYaad
- 143
- 2
- 7
1
vote
1 answer
How to map frontmatter subitem?
I want to map the frontmatter subitems in Gatsby template. The infobox has sub-items and I want to map the infobox as they will change per article. Some articles may have 3 others may have 10. Some articles will have date and fullName others will…

mardag
- 21
- 1
- 6
1
vote
0 answers
Convert string read from a local mdx file to a window.document object
I have a next.js project using mdx-bundler'
Is there a way to convert string read from a local mdx file to a window.document object so I can use querySelector to query dom elements?
for example, I have a mdx file like this:
## h2
dfdfd
### h3
####…

Joji
- 4,703
- 7
- 41
- 86
1
vote
1 answer
How can I make vue-i18n / vue2 work with Storybook mdx type story?
I couldn't make it work for a long time so I thought to put here for others fighting with the same issue.
The setup is:
- "vue": "^2.6.12",
- @storybook/vue": "^6.4.19",
- "vue-i18n": "^8.22.4",
Following the i18n documentation I had updated my…

Picard
- 3,745
- 3
- 41
- 50
1
vote
0 answers
NextJS turn a .MDX into a component
I am trying to create an MDX blog and integrate it into my project. I currently have most of the setup done but I cannot for the life of me get MDX file into a component to render between my Layout. Here's my issue, all of the examples showcase…

Nikola-Milovic
- 1,393
- 1
- 12
- 35
1
vote
0 answers
Error while using next/image with MDX content - `validateDOMNesting`
I'm creating a Next.js blog using mdx-bundler and styled-components. I'm using remark-mdx-images to import images into JSX. I created a custom component (styled.div) to embed the next/image in it.
But when I run the blog in browser, i'm receiving an…

Gangula
- 5,193
- 4
- 30
- 59