MDX is an authorable format that lets users write JSX in markdown documents.
Questions tagged [mdxjs]
153 questions
0
votes
0 answers
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/blog/node_modules/@mdx-js/react/index.js…
user19666029
0
votes
1 answer
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": "^12.1.6",
I have one react component and using it in .mdx file with some text as below
Avani Bataviya
- 750
- 1
- 6
- 20
0
votes
0 answers
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 I'd like to use the following…
Ilia
- 1
- 2
0
votes
1 answer
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:
which are displayed properly when using…
which are displayed properly when using…
Nigel
- 585
- 1
- 5
- 20
0
votes
1 answer
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.
BonisTech
- 342
- 3
- 15
0
votes
0 answers
Strapi v4 CKeditor 5 plugin does not closing ![]()
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 serializeArticleMarkdown = async (item: IArticle) => {
const body…
vitakili
- 1
- 1
0
votes
0 answers
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:
/vercel/path0/src/pages/posts/hello-world.mdx
…
gdwarrior
- 1
- 1
0
votes
0 answers
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 } }) {
body
frontmatter {
…
Fagot
- 1
- 1
0
votes
2 answers
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 visual testing with Chromatic.
Currently our…
PaulParton
- 1,013
- 1
- 11
- 19
0
votes
0 answers
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/pages/).
I'm not using templates other than…
Ganesh Iyer
- 23
- 3
0
votes
0 answers
"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 that says " Module not found".
Everything works…
Alex Cotton
- 3
- 1
- 2
0
votes
1 answer
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, '-')
return (
OldDew
- 57
- 10
0
votes
0 answers
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: `
Khepf
- 352
- 1
- 4
- 24
0
votes
1 answer
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 somewhere in file 1
Now I want to outsource the…
antonwilhelm
- 5,768
- 4
- 19
- 45
0
votes
1 answer
How to wrap different components like with 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;
- One
- component, but I just want the font to…
Akshay K Nair
- 1,107
- 16
- 29