Questions tagged [mdxjs]
MDX is an authorable format that lets users write JSX in markdown documents.
136
questions
1
vote
0
answers
35
views
How can i find milkdown data?
I just setup milkdown for the first time and implement basic setup like see this examples:
But now i can't find data (try console.log still not found).
So how can i find data to use in my Project, can ...
0
votes
0
answers
22
views
javascript inside storybook
So my file extension is .mdx and I'm not sure if it allows me to include js code inside the .mdx file. I tried having it in the preview tag but it prints it as a string.
Below I have tried to write js ...
0
votes
0
answers
31
views
Next mdx remote replacing the whole line after matching with regex
If you know how Platforms on Vercel replaces tweet's link with a static tweet, likewise I tried to replace github repository link with a component that takes in git owners' name and git repo id and ...
0
votes
1
answer
78
views
Astrojs: How can I get a component to appear as inline text in an MDX file?
Question:
In the screenshot below, I want the first line to appear exactly as the second line. Is there a way to do this in Astrojs?
Here is my full reproduction on Codesandbox.
Here is what the ...
1
vote
0
answers
35
views
React composite components cause linting error in mdxjs
I am writing some documentation in .mdx (mdxjs) using Storybook js for a React composite component.
When I import the component into the mdx file and try to reference the composite child the linter (&...
0
votes
0
answers
75
views
Need help importing object from mdx file into pages/index.js
I am trying to create a blog in next js using mdx.
I am having trouble importing the meta object from my project-setup.mdx file into pages/index.js.
Error:
require() of ES Module
/Users/user/Desktop/...
0
votes
1
answer
64
views
Custom component in starting of mdx file in next js project not following indentation
I have nextjs project with below versions
"@mdx-js/loader": "^2.1.5",
"@mdx-js/react": "^2.1.5",
"@next/mdx": "^12.1.6",
"next": &...
0
votes
0
answers
44
views
Converting MDX content to array for Next.js
I try to create NextJS component for my content project.
I am using this starter:
https://github.com/timlrx/tailwind-nextjs-starter-blog
which use MDX for rendering Markdown documents.
In my .md file ...
0
votes
1
answer
89
views
docusaurus fails to find images after build
I have a Docusauris site that works fine when in development mode, served using npm run start. My docs pages (e.g. docs/GettingStarted.md) include images such as:
<img src="/images/Buttons....
1
vote
1
answer
38
views
In there a markdown syntax similar to ­?
I'm looking for a similar markdown syntax to ­ in HTML.
I know there are hard breaks in markdown, but I'm looking for something that acts like ­ or similar.
8
votes
0
answers
710
views
How to use @next/mdx with NextJS 13 app directory?
With the new app directory, all route directories must have a page.js, page.jsx or a page.tsx file to be visible publicly (eg: mywebsite.com/about requires a file app/about/page.js). But when I try ...
0
votes
2
answers
96
views
Remix: Generate links to all routes programatically
I'm a creating a blog using Remix.
Remix supports MDX as a route, which is perfect for me, as I can just write my blog posts as .mdx files and they'll naturally become routes.
However, if you access ...
0
votes
0
answers
88
views
Strapi v4 CKeditor 5 plugin does not closing <img> tag
Im facing a problem with CKeditor 5 plugin in Strapi v4 which doenst close ** **tag and throws error compiling MDX using 'next-mdx-remote/serialize'
utils/index.ts
`
export const ...
0
votes
0
answers
52
views
MDXJS Syntax Error: ncomplete explicit mapping pair; a key node is missed; or followed by a non-tabulated empty line
when building my astro site on vercel i am currently getting the below error:
error incomplete explicit mapping pair; a key node is missed; or followed by a non-tabulated empty line
File:
/...
0
votes
1
answer
584
views
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 ...
0
votes
0
answers
16
views
Generate body from mdx file problem: Element type is invalid
It tries to generate a body from an MDX file.
That's look my OffersSingle template query:
export const query = graphql`
query OffersSingle($slug: String!) {
mdx(frontmatter: { slug: { eq: $slug ...
0
votes
2
answers
85
views
Make chromatic snapshot docs tab in storybook
What i'm looking to achieve
I am looking at options for reducing the number of stories we snapshot and test in Chromatic (currently nearing 400). We use storybook for our design system and also for ...
3
votes
0
answers
87
views
Cannot use next/image with mdx-bundler
I have a blog that uses nextjs and mdx bundler, when I try to import the NextJS Image component inside an MDX file, I get this error:
Error: Build failed with 2 errors:
../node_modules/next/dist/...
1
vote
0
answers
276
views
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 <Component>format and I like it a lot</Component>.
Mdx is a great
<...
0
votes
0
answers
137
views
How does one include src to a lottie JSON inside an MDX file in a Gatsby project?
For context, I'm running a gatsby site with MDX enabled and I can't for the life of me, figure out how to get the URL to a Lottie JSON animation in the same folder as the MDX file (different from /src/...
0
votes
0
answers
49
views
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: {...
0
votes
0
answers
28
views
"Module not found" when adding MDX to NextJs project
I have a project that is working properly (as far as I can see), now I want to add a blog using MDX and have gone through the installation process but when I start the localhost I get an error message ...
0
votes
0
answers
43
views
Can I use MUI5 components in MDX (mdxjs) files directly in the Next.js app?
I heard a lot of good things about using the MDX (mdxjs) format in Next.js applications, they say that it is very convenient to make simple blogs this way, for example. As far as I know, custom ...
1
vote
1
answer
734
views
Formatting MDX programmatically using prettier
I would like to format MDX using prettier.
It's working on the playground, but I'm having trouble to get it running programmatically. In my code i get an unchanged result (no error, but not formatted)
...
0
votes
0
answers
34
views
images not visible, output html 0 width and height
I am trying to add an image to an .mdx blogpost on my gatsby site.
In my gatsby config I include the needed plugins:
{
resolve: `gatsby-source-filesystem`,
options: {
name: `mdx-pages`,...
0
votes
0
answers
49
views
output images corrupt when using mdx-bundler + remark-mdx-images
I am writing a site using the remix JavaScript framework.
It is a blog that uses MDX for the blog content. I want to include images within this content.
Background
I am using a combination of mdx-...
1
vote
1
answer
544
views
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'
<AlertMessage variant={'...
1
vote
1
answer
254
views
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 ...
0
votes
0
answers
16
views
Can .mdx files be viewed in a non-javascript environment?
I do not use javascript in my current development setup and would [admittedly lazily..] like to avoid adding it to my dev stack. Is there a standalone viewer for .mdx files either in an IDE or maybe ...
0
votes
0
answers
50
views
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
...
0
votes
1
answer
462
views
How to dynamically import a MDX Component in React?
I created an Article component which gets its title through the route parameters like this:
const Article = () => {
const params = useParams()
const dashedTitle = params.title.replace(/ /g, '-')...
1
vote
1
answer
278
views
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?
<ArgsTable story="...
0
votes
0
answers
25
views
Why doesn't a sliced string appear in the DOM after compiling?
This is a storybook mdx file in an Angular 13 project:
Here is the code: (icons.stories.mdx)
import ZeroPlus from "../assets/icons/UserInterface/0.svg";
import ThreePlus from "../assets/...
0
votes
0
answers
162
views
How iterate over array of svgs and display in html without chrome blocking it?
import { userInterfaceIcons } from "../assets/icons/icons-list";
I have a bunch of svgs in an array, here is an example of one:
{
name: '0+',
data: `<svg width="24" ...
0
votes
1
answer
26
views
Creating a File that Imports & Immediately Exports Components Again
Not sure why this isn't working. I used to have
// file 1
import Box from '@/components/Box'
import Popup from '@/components/Popup'
const MDXComponents = {
Box,
Popup
}
// using MDXComponents ...
2
votes
0
answers
506
views
Next.js MDX rendering problem with remark-math and rehype-katex
I am using MDX in my NEXT.JS project with the react-math and rehype-katex plugins.
When I render the MDX files it gives me errors:
"LaTeX-incompatible input and strict mode is set to 'warn': In ...
0
votes
1
answer
198
views
How to wrap different components like <ol> with <Typography> when using MDX with MUI (NextJS)
Is there any way to wrap different MDX elements like ol or li in MUI components to get the MUI theme styles?
The MDX gives out plain HTML without any styles;
<ol>
<li>One</li>
<...
0
votes
0
answers
82
views
Open in a New tab for all links of a website
I'm coding a website/blog using MDX and if I would like to create links in markdown I have to do link. However, if I want the link to open it in a new tab, I'd have to use HTML and use something like ...
0
votes
2
answers
404
views
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 ...
2
votes
0
answers
835
views
Next.js MDX blog post not building due to module not found, runs fine on localhost
My Next.js project is failing to build on Vercel.
I have a BlogAuthor.tsx file as so:
import Avatar from "../../Common/Avatar/Avatar";
import CopyLink from "../../Common/Widgets/...
0
votes
0
answers
98
views
MDX loader only working on top level directory
In the "Create Next App" section about rendering markdown they have us make posts.js that uses remark to parse the .md files.
In the guide for adding .mdx support they initialize it in next....
0
votes
0
answers
194
views
Attempting to output HTML tag in MDX results in string, not HTML object
I have an external icon library I am attempting to import into Material-UI using the SvgIcon component. I'm unsure if this is a driving factor behind the issue or not.
The icon is a <path> ...
2
votes
1
answer
432
views
How to get data from the second query using a variable from the first query in graphql gatsby?
I'm trying to render all photos from a directory that will be defined in the frontmatter of an mdx file called carouselPhotosDir. I thought that to do this, I would need to query the specific mdx's ...
0
votes
1
answer
194
views
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 ...
1
vote
1
answer
732
views
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 ...
2
votes
2
answers
689
views
How can I integrate MDX with STRAPI
I am creating a project in which I am trying to use MDX with STRAPI but I am confused. How and where to integrate that, as MDX work with .mdx file but as I am using strapi it works with API
Can anyone ...
2
votes
1
answer
2k
views
Using Remark and Rehype plugins with MDX in Next.js (with @next/mdx)
I was trying to use Github Flavored Markdown using @next/mdx but I can't seem to figure out how to use plugins with the code. Here is what I did:
(I am following along from Next.js Documentation: ...
1
vote
1
answer
144
views
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 ...
1
vote
0
answers
270
views
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 ...
1
vote
1
answer
633
views
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&...