MDX v2 #25068
-
SummaryWe are updating Try it outYou can use this Codesandbox: https://githubbox.com/gatsbyjs/gatsby/tree/master/examples/using-mdx You can try it out by installing canary versions of npm install --save-exact gatsby@next gatsby-plugin-mdx@nextOR yarn add --exact gatsby@next gatsby-plugin-mdx@nextMake sure to also update MDX dependencies
In progress documentation: MotivationThe current In its current state, the plugin abstraction layer doesn’t work in favor of Gatsby as the plugin is lagging behind the ecosystem, and solutions that require more self-written code can easily be updated (e.g. using MDX with Next, Remix, etc.). These other solutions can “just work” as they don’t have Gatsby’s data layer and can rely on third-party code like the webpack loader. There’s also a problem with “bundle bloat and global scope problems” surfaced in some GitHub Discussions. At the moment all custom MDX components are added to the site-wide bundle, or in other words: On pages components are loaded that are not even used. Ideally, the scope of the plugin and what it does is greatly reduced by relying on said third parties to do the heavy lifting and we provide the glue code to incorporate Gatsby’s data layer. Adoption strategyUpgrading to the new Related issues/discussions |
Beta Was this translation helpful? Give feedback.
Replies: 28 comments 118 replies
-
|
Reposing this here from #27120 Hey there 👋 I have an interesting situation where we need to be able to define custom IDs for headings generated from markdown. I am part of a team in the process of moving an old docs site written in drupal over to Gatsby/MDX. We have lots and lots of pages within the docs site (5000+) and many of them link to each other. Because we want to maintain backwards compatibility with the existing site, we need to maintain the existing ProblemIn MDX v1, the extended syntax for custom heading IDs works correctly with the Take the following example: ## A heading {#custom-id}This would result in the MDXAST looking something like the following: {
type: 'heading',
depth: 2,
children: [
{
type: 'text',
value: 'A heading {#custom-id}',
}
],
}Note here how the custom ID was part of the With the much more robust parsing in the upcoming changes to MDX v2, the same node is parsed into the following MDXAST: {
type: 'heading',
depth: 2,
children: [
{
type: 'text',
value:
'A heading',
},
{
type: 'mdxSpanExpression',
value: '#custom-id',
},
],
}Because of this, it unfortunately causes issues with the <h1>{`A heading`}
{#test}</h1>My question is: Is there a plan to continue to support custom IDs on headers within the plugin for MDX v2? I've also cross-posted this issue over in mdx-js/mdx#1279. I'm not sure whether this behavior belongs best in the parsing/AST generation phase, or whether this is something the gatsby-remark-autolink-headers plugin should handle itself. At the very least, I wanted to throw this information out there to see what makes the most sense and get a discussion going. Thanks so much for the excellent work on Gatsby and the ecosystem. Our team has been HUGELY successful because of it and absolutely love working daily in the ecosystem. Thanks for all the hard work! |
Beta Was this translation helpful? Give feedback.
-
|
Any update on this? I tried what the doc suggested and used |
Beta Was this translation helpful? Give feedback.
-
|
In case somebody is still looking for solution to this: remark-custom-heading-id works beautifully. |
Beta Was this translation helpful? Give feedback.
-
|
Would love for this to happen, now that MDX v2 is final! Can't wait to use https://codehike.org/ on our blog 🥰 |
Beta Was this translation helpful? Give feedback.
-
|
Hey everyone! We're starting this work in May. Stay tuned - we're excited to get this updated for you all, and will happily welcome testers as we make progress! |
Beta Was this translation helpful? Give feedback.
-
|
Very cool, glad to test this when you're ready! |
Beta Was this translation helpful? Give feedback.
-
|
This is great! Is #35650 by @axe312ger a part of this work? |
Beta Was this translation helpful? Give feedback.
-
|
Yes it is :) |
Beta Was this translation helpful? Give feedback.
-
|
Work on this has started, you can follow https://github.com/gatsbyjs/gatsby/milestone/12 for updates. Once a canary is available we'll share it and ask for your feedback in this discussion 👍 |
Beta Was this translation helpful? Give feedback.
-
|
A canary is available. See in the "Try it out" section. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the amazing canary version. LogUpdate: Maybe this is caused by some old incompatible usages. After updating my website following the guidance here, I got another error. In const onCreatePage = async ({
page,
actions
}, pluginOptions) => {
const {
createPage,
deletePage,
} = actions;
const {
extensions
} = (0, _pluginOptions.defaultOptions)(pluginOptions);
const ext = _path.default.extname(page.component); // Only apply on pages based on .mdx files and avoid loops
if (extensions.includes(ext) && !page.context.frontmatter){
// The plugin failed at next line:
const content = await _fsExtra.default.readFile(page.component.split(`__mdxPath=`)[1], `utf8`);
const {
data: frontmatter
} = (0, _grayMatter.default)(content);
deletePage(page);
createPage({ ...page,
context: { ...page.context,
frontmatter
}
});
}
};
{
internalComponentName: 'Component/blog/hello-world',
path: '/blog/hello-world',
matchPath: undefined,
component: '/mnt/data/Repos/Mine/kxxt-website/content/blog/hello-world/index.md',
componentPath: '/mnt/data/Repos/Mine/kxxt-website/content/blog/hello-world/index.md',
componentChunkName: 'component---content-blog-hello-world-index-md',
isCreatedByStatefulCreatePages: false,
context: {
id: '8e69fbc5-91f0-534e-864d-2338e2a777f7',
previousPostId: null,
nextPostId: undefined
},
updatedAt: 1656108381289,
pluginCreator___NODE: '7374ebf2-d961-52ee-92a2-c25e7cb387a9',
pluginCreatorId: '7374ebf2-d961-52ee-92a2-c25e7cb387a9',
mode: 'SSG'
} |
Beta Was this translation helpful? Give feedback.
-
|
Please see #25068 (reply in thread) |
Beta Was this translation helpful? Give feedback.
-
|
@LekoArts thanks for the canary version! After upgrading to the two alpha package versions, our build fails with the MDX plugin being unable to find a path: $ GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true NODE_ENV=production gatsby build
success compile gatsby files - 2.910s
success load gatsby config - 0.046s
warning Warning: there are unknown plugin options for "gatsby-plugin-mdx": remarkPlugins, rehypePlugins
Please open an issue at https://ghub.io/gatsby-plugin-mdx if you believe this option is valid.
success load plugins - 1.065s
success onPreInit - 0.004s
success initialize cache - 0.071s
success copy gatsby files - 0.118s
success Compiling Gatsby Functions - 0.208s
success onPreBootstrap - 0.224s
success createSchemaCustomization - 0.005s
success Checking for changed pages - 0.000s
success source and transform nodes - 3.409s
info Writing GraphQL type definitions to /home/runner/work/project/.cache/schema.gql
success building schema - 0.393s
warning Warning: there are unknown plugin options for "gatsby-plugin-mdx": remarkPlugins, rehypePlugins
Please open an issue at https://ghub.io/gatsby-plugin-mdx if you believe this option is valid.
success createPages - 0.001s
error "gatsby-plugin-mdx" threw an error while running the onCreatePage lifecycle:
The "path" argument must be of type string or an instance of Buffer or URL. Received undefined
361 |
362 | if (extensions.includes(ext) && !page.context.frontmatter) {
> 363 | const content = await _fsExtra.default.readFile(page.component.split(`__mdxPath=`)[1], `utf8`);
| ^
364 | const {
365 | data: frontmatter
366 | } = (0, _grayMatter.default)(content);
TypeError:The "path" argument must be of type string or an instance of Buffer or URL. Received undefined
TypeError: The "path" argument must be of type string or an instance of Buffer or URL. Received undefined
- node:fs:393 readFile
node:fs:393:10
- graceful-fs.js:118 go$readFile
[project]/[graceful-fs]/graceful-fs.js:118:14
- graceful-fs.js:115 Object.readFile
[project]/[graceful-fs]/graceful-fs.js:115:12
- index.js:8
[project]/[universalify]/index.js:8:12
- new Promise
- index.js:7 Object.readFile
[project]/[universalify]/index.js:7:14
- gatsby-node.js:364 Object.onCreatePage
[project]/[gatsby-plugin-mdx]/dist/gatsby-node.js:364:44
- api-runner-node.js:462 runAPI
[project]/[gatsby]/src/utils/api-runner-node.js:462:22
- api-runner-node.js:613 Promise.catch.decorateEvent.pluginName
[project]/[gatsby]/src/utils/api-runner-node.js:613:13
- debuggability.js:384 Promise._execute
[project]/[bluebird]/js/release/debuggability.js:384:9
- promise.js:518 Promise._resolveFromExecutor
[project]/[bluebird]/js/release/promise.js:518:18
- promise.js:103 new Promise
[project]/[bluebird]/js/release/promise.js:103:10
- api-runner-node.js:611
[project]/[gatsby]/src/utils/api-runner-node.js:611:16
- util.js:16 tryCatcher
[project]/[bluebird]/js/release/util.js:16:23
- reduce.js:166 Object.gotValue
[project]/[bluebird]/js/release/reduce.js:166:18
- reduce.js:155 Object.gotAccum
[project]/[bluebird]/js/release/reduce.js:155:25
failed createPagesStatefully - 0.683s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /opt/hostedtoolcache/node/16.15.1/x64/bin/node
Arguments: /usr/local/lib/node_modules/yarn/lib/cli.js build-cy
Directory: /home/runner/work/project
Output:
info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 1.I added some logging of the Any clues as to why this may be? The relevant part of our config: {
resolve: 'gatsby-plugin-mdx',
options: {
defaultLayouts: {
pages: `${__dirname}/src/components/Layout.tsx`,
},
remarkPlugins: [
remarkExternalLinks,
],
rehypePlugins: [
rehypeSlug,
[rehypeAutolinkHeadings, { behavior: 'wrap' }],
[
require('@jsdevtools/rehype-toc'),
{
headings: ['h2', 'h3', 'h4', 'h5', 'h6'],
customizeTOC(toc: Node) {
if (
toc.children[0] &&
toc.children[0].children &&
toc.children[0].children.length < 1
) {
return false;
}
return {
type: 'element',
tagName: 'details',
properties: {
class: 'table-of-contents',
},
children: [
{
type: 'element',
tagName: 'summary',
children: [{ type: 'text', value: 'Table of Contents' }],
},
toc,
],
};
},
},
],
],
gatsbyRemarkPlugins: [
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 921,
linkImagesToOriginal: false,
},
},
{
resolve: 'gatsby-remark-images-medium-zoom',
options: {},
},
{
resolve: 'gatsby-remark-copy-relative-linked-files',
options: {
filename: ({
name,
hash,
extension,
}: {
name: string;
hash: string;
extension: string;
}) => `${name}-${hash}.${extension}`,
},
},
{
resolve: 'gatsby-remark-embedded-codesandbox',
options: {
protocol: 'embedded-html-codesandbox://',
directory: `${__dirname}/src/pages/c/`,
embedOptions: {
codemirror: 1,
fontsize: 12,
// hidenavigation: 1,
module: 'index.html',
view: 'split',
},
},
}
]
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, I was a bit too overeager in sharing the canary (I'm just excited myself 😅 ). We don't have everything in place just yet to have a smooth migration experience as we'll need to do some more changes to have the new underlying architecture working. You're getting this error because yes, this Once we have more in place and a bit of documentation/migration guide, I'll post an update. Thanks for trying it though! |
Beta Was this translation helpful? Give feedback.
-
|
Ok, now it's time to shout about an RC (Release Candidate) version of See the "Try it out" section above. Also be sure to visit the in progress updated documentation mentioned there. We have also an in-progress migration guide, and a new How-To Guide which explains the most common use cases. Breaking changes will also still need to be collected and documented in the README, but this here should be a list of most relevant things:
Currently not working things but will be fixed:
If you're curious, here's a PR migrating my own website to the new RC: LekoArts/portfolio-v2#45 |
Beta Was this translation helpful? Give feedback.
-
|
This one updates wesbos.com: |
Beta Was this translation helpful? Give feedback.
-
|
I'm hitting this Log from `gatsby develop`crash.log generated by segfault-handlerI can't figure out why this error could happen since my template only has one export const pageQuery = graphql`
query BlogPostById(
$id: String!
$previousPostId: String
$nextPostId: String
) {
site {
siteMetadata {
title
}
}
mdx(id: { eq: $id }) {
...BlogFields
}
previous: mdx(id: { eq: $previousPostId }) {
...BlogQuickInfoFields
}
next: mdx(id: { eq: $nextPostId }) {
...BlogQuickInfoFields
}
}
`And the segfault seems coming directly from node. (Not from a native module like #35837) By the way, I spotted a typo in the migration guide and made a pull request: #36081 Edit: The segfault seems related to nodejs/node#35889 |
Beta Was this translation helpful? Give feedback.
-
|
You'll want to remove the name |
Beta Was this translation helpful? Give feedback.
-
Thanks for the fix. GraphQL errors disappeared but I'm still hitting the same segfault both on my PC and on vercel. Any idea on the segfault? This node.js bug nodejs/node#35889 hasn't been fixed for almost two years. |
Beta Was this translation helpful? Give feedback.
-
|
Oh, I just found the cause of the segfault. After I removed the |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the update about the RC @LekoArts ! Trying it out just now, it is going further than before 🙌 Throwing a new error about Looks like this may be related to HTML comments in my MDX content: #26941 Edit: After removing the comments, also received another error with the Not sure what this one is, I'll have to work with process of elimination... Edit 2: Ok, seems to be all content-related (except for the Also, I think one thing that may be missing from the migration guide is upgrading the Is that missing from the migration guide? Another thing that seems to be missing from the migration guide: how do we use a custom layout? (now that
|
Beta Was this translation helpful? Give feedback.
-
|
Can you give me content examples for both errors you saw ("Unexpected character The migration guide wasn't complete yet, this should be a better version now: https://github.com/gatsbyjs/gatsby/blob/f17c723728eb351df7ba5398b122959e61c7c37f/packages/gatsby-plugin-mdx/README.md#migrating-from-v3-to-v4 |
Beta Was this translation helpful? Give feedback.
-
|
Ok, managed to reproduce one error you mentioned and improved the message:
|
Beta Was this translation helpful? Give feedback.
-
|
Just have a big push to finish out some unrelated feature work - I'll try circling back around to this either this or next weekend, and document all of the content issues that I have, including error messages and my resolution for them. And thanks for the tip on the new migration guide, looks like Thanks for the engagement here! |
Beta Was this translation helpful? Give feedback.
-
|
Did not get back to this yet 😅 but implementing an unrelated feature (adding linting using So if anyone else is experiencing the same issue, you may want to try adding $ yarn eslint . --max-warnings 0
/Users/k/p/courses/packages/content-items/contentItems/9-to-5/index.mdx
2:27 error Parsing error: Could not parse expression with acorn: Unexpected content after expression
/Users/k/p/courses/packages/content-items/contentItems/additional-learning-platforms/index.mdx
4:15 error Parsing error: Could not parse expression with acorn: Unexpected content after expression
/Users/k/p/courses/packages/content-items/contentItems/additional-learning-topics/index.mdx
2:27 error Parsing error: Could not parse expression with acorn: Unexpected content after expression
/Users/k/p/courses/packages/content-items/contentItems/automaton/index.mdx
2:27 error Parsing error: Could not parse expression with acorn: Unexpected content after expression
/Users/k/p/courses/packages/content-items/contentItems/better-version/index.mdx
2:27 error Parsing error: Could not parse expression with acorn: Unexpected content after expression
/Users/k/p/courses/packages/content-items/contentItems/books/index.mdx
2:27 error Parsing error: Could not parse expression with acorn: Unexpected content after expression
/Users/k/p/courses/packages/content-items/contentItems/bootcamp-course-intro/index.mdx
2:27 error Parsing error: Could not parse expression with acorn: Unexpected content after expression
/Users/k/p/courses/packages/content-items/contentItems/bootcamp-lectures/index.mdx
368:2 error Parsing error: Unexpected character `!` (U+0021) before name, expected a character that can start a name, such as a letter, `$`, or `_` (note: to create a comment in MDX, use `{/* text */}`)
/Users/k/p/courses/packages/content-items/contentItems/bootcamp-prep-course-intro/index.mdx
2:27 error Parsing error: Could not parse expression with acorn: Unexpected content after expression
/Users/k/p/courses/packages/content-items/contentItems/bulletproof/index.mdx
70:2 error Parsing error: Unexpected character `!` (U+0021) before name, expected a character that can start a name, such as a letter, `$`, or `_` (note: to create a comment in MDX, use `{/* text */}`)
/Users/k/p/courses/packages/content-items/contentItems/changes/index.mdx
2:27 error Parsing error: Could not parse expression with acorn: Unexpected content after expression |
Beta Was this translation helpful? Give feedback.
-
|
Is it still possible to query multiple MDX source files for the same template? I might be missing something, but it can't seem to figure out how. |
Beta Was this translation helpful? Give feedback.
-
|
is there any news on this topic? We also pull in data from multiple mdx files in a single template. This is no longer possible. |
Beta Was this translation helpful? Give feedback.
-
|
any updates? |
Beta Was this translation helpful? Give feedback.
-
|
No, it is not reasonable implementable till Gatsby supports ESM at a GraphQL resolver level. |
Beta Was this translation helpful? Give feedback.
-
|
But Gatsby might be able to do it soon: |
Beta Was this translation helpful? Give feedback.
-
|
I've asked the same question here: #37301 |
Beta Was this translation helpful? Give feedback.
-
|
I have a few questions:
Update:
|
Beta Was this translation helpful? Give feedback.
-
For the ESM piece: I've updated https://github.com/gatsbyjs/gatsby/blob/feat/mdx-v2-docs/packages/gatsby-plugin-mdx/README.md#mdxoptions |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for answering and updating docs for ESM packages! |
Beta Was this translation helpful? Give feedback.
-
|
@LekoArts The link is 404 now. What's the update? |
Beta Was this translation helpful? Give feedback.
-
|
I've followed the migration guide, but it seems to be complaining that the component doesn't exist when it does? The context in the error also weirdly doesn't match what I'm passing in: const blogPage = path.resolve('./src/templates/template-blog-page.js')
return createPage({
path: slug,
component: `${blogPage}?__contentFilePath=${node.parent.absolutePath}`,
context: {
slug, // used for the CTA message banner
id: node.id,
},
}) |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, appreciate it! My gut feeling says that it's yarn 3 incompatibility but we'll see |
Beta Was this translation helpful? Give feedback.
-
|
I've removed yarn, same error with latest NPM. |
Beta Was this translation helpful? Give feedback.
-
|
You installed the wrong version of gatsby. It should be |
Beta Was this translation helpful? Give feedback.
-
|
Ah that worked, thanks. I saw this mentioned in the Gatsby v4.19 release notes, and thought it would be compatible with Gatsby v4.19. |
Beta Was this translation helpful? Give feedback.
-
|
@Mike-Dax the change to get MDX v2 going needs changes deep in Gatsby core. Thats why you need a special version. Will all be easier as soon we go final/stable with the MDXv2 stuff :) |
Beta Was this translation helpful? Give feedback.
-
|
I followed the migration guide for mdx v2 and was able to get my project working with the exception of loading a remark module (remark-gfm for markdown tables support) in gatsby-config. When importing this module, the build fails to process gatsby-config and when running it under "gatsby develop --inspect-brk" in the debugger I see this error / exception: Error [ERR_REQUIRE_ESM]: require() of ES Module /xxxxxx/node_modules/remark-gfm/index.js from /xxxxxx/.cache/compiled/gatsby-config.js not supported. |
Beta Was this translation helpful? Give feedback.
-
|
Okay, going back to version 1.0.0 of remark-gfm (which looks to be the last non-ESM verson) works. |
Beta Was this translation helpful? Give feedback.
-
|
@vadimgo please check readme related to ESM plugins: https://github.com/gatsbyjs/gatsby/blob/feat/mdx-v2/packages/gatsby-plugin-mdx/README.md#mdxoptions |
Beta Was this translation helpful? Give feedback.
-
|
Love the v2 🎉 Some notes as a simple user:
import path from "path";
const postTemplate = path.resolve(`src/templates/post.jsx`);
// (is it even better to do path.resolve(path.join(__dirname, `./src/templates/post.jsx`))?)
/* ... */
component: `${postTemplate}?__contentFilePath=${node.internal.contentFilePath}`,
actions.createPage({
path: node.frontmatter.slug,
- component: `/path/to/your/template.js?__contentFilePath=${node.internal.contentFilePath}`,
+ component: `/path/to/your/template.js`,
+ __contentFilePath: node.internal.contentFilePath,
context: {
id: node.id,
},
})Thanks for your hard work 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Hey, thanks for your suggestions.
Hope this clarifies :) |
Beta Was this translation helpful? Give feedback.
-
|
For 1, I think you don't necessarily have to explain relative vs absolute but it should be nice to have path resolve in the example. The mdx path is shown with an absolute path but then with a way ( |
Beta Was this translation helpful? Give feedback.
-
|
I think 1) is a good suggestion, most people will already have a |
Beta Was this translation helpful? Give feedback.
-
|
I adjusted the readme, we now everywhere suggest Thank you @khinshankhan |
Beta Was this translation helpful? Give feedback.
-
|
Hey all, I'm having trouble rewriting my queries. In short, I'm unsure on how to reshape them after going through the migration steps found here: https://github.com/gatsbyjs/gatsby/blob/feat/mdx-v2/packages/gatsby-plugin-mdx/README.md#migrating-from-v3-to-v4. I probably just need to create a small skeleton project — that will actually build — so I can see the
But after reading that the following nodes were removed from If I can get help figuring my query out, I'd be glad to contribute examples like mine to the migration guide. I currently use My non-migrated queryMy Environment// from `gatsby info`
System:
OS: macOS 12.5
CPU: (16) x64 Intel(R) Core(TM) i7-10700K CPU @ 3.80GHz
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
Yarn: 3.2.1 - ~/.nvm/versions/node/v16.15.0/bin/yarn
npm: 8.14.0 - ~/.nvm/versions/node/v16.15.0/bin/npm
Browsers:
Chrome: 103.0.5060.134
Safari: 15.6My Dependency changes// package.json for theme
"devDependencies": {
"dotenv": "^16.0.1",
- "gatsby": "^4.19.2",
+ "gatsby": "mdxv4-rc",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"peerDependencies": {
- "gatsby": "^4.19.2",
+ "gatsby": "mdxv4-rc",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"dependencies": {
"@adobe/focus-ring-polyfill": "^0.1.5",
"@adobe/gatsby-source-github-file-contributors": "^0.3.1",
"@adobe/prism-adobe": "^1.0.3",
"@emotion/react": "^11.9.3",
"@loadable/component": "^5.15.2",
- "@mdx-js/mdx": "1.6.22",
- "@mdx-js/react": "1.6.22",
+ "@mdx-js/react": "latest",
+ "@sindresorhus/slugify": "1.0.0",
"@spectrum-css/accordion": "3.0.24",
"@spectrum-css/actionbutton": "2.1.0",
"@spectrum-css/actiongroup": "^2.0.0",
"@spectrum-css/assetlist": "3.0.24",
"@spectrum-css/badge": "^1.0.20",
"@spectrum-css/breadcrumb": "5.0.0",
"@spectrum-css/button": "6.0.13",
"@spectrum-css/card": "5.0.0",
"@spectrum-css/checkbox": "3.1.3",
"@spectrum-css/dialog": "6.0.15",
"@spectrum-css/divider": "1.0.27",
"@spectrum-css/icon": "3.0.23",
"@spectrum-css/inlinealert": "4.0.13",
"@spectrum-css/link": "3.1.23",
"@spectrum-css/menu": "4.0.4",
"@spectrum-css/modal": "3.0.23",
"@spectrum-css/picker": "1.2.12",
"@spectrum-css/popover": "5.0.18",
"@spectrum-css/progresscircle": "1.0.23",
"@spectrum-css/search": "4.2.12",
"@spectrum-css/sidenav": "3.0.24",
"@spectrum-css/table": "4.0.19",
"@spectrum-css/tabs": "3.2.19",
"@spectrum-css/textfield": "3.2.4",
"@spectrum-css/tooltip": "3.1.18",
"@spectrum-css/typography": "4.0.20",
"@spectrum-css/underlay": "2.0.31",
"@spectrum-css/vars": "8.0.0",
"@spectrum-css/well": "3.0.22",
"algolia-html-extractor": "^0.0.1",
"algoliasearch": "4.14.2",
"await-exec": "^0.1.2",
"builtin-status-codes": "^3.0.0",
"classnames": "^2.3.1",
"core-js": "^3.24.0",
"gatsby-plugin-algolia": "^0.26.0",
"gatsby-plugin-emotion": "^7.19.0",
"gatsby-plugin-layout": "^3.19.0",
- "gatsby-plugin-mdx": "^3.19.0",
+ "gatsby-plugin-mdx": "mdxv4-rc",
"gatsby-plugin-mdx-embed": "^1.0.0",
"gatsby-plugin-preact": "^6.19.0",
"gatsby-plugin-react-helmet": "^5.19.0",
- "gatsby-plugin-sharp": "^4.19.0",
+ "gatsby-plugin-sharp": "mdxv4-rc",
- "gatsby-remark-autolink-headers": "^5.19.0",
+ "gatsby-remark-autolink-headers": "mdxv4-rc",
"gatsby-remark-copy-linked-files": "^5.19.0",
- "gatsby-remark-images": "^6.19.0",
+ "gatsby-remark-images": "mdxv4-rc",
- "gatsby-source-filesystem": "^4.19.0",
+ "gatsby-source-filesystem": "mdxv4-rc",
- "gatsby-transformer-remark": "^5.19.0",
+ "gatsby-transformer-remark": "mdxv4-rc",
- "gatsby-transformer-sharp": "^4.19.0",
+ "gatsby-transformer-sharp": "mdxv4-rc",
"https-browserify": "^1.0.0",
"lmdb-store": "^1.6.14",
"mdx-embed": "^1.0.0",
"mobx": "^6.6.1",
"os-browserify": "^0.3.0",
"path-browserify": "^1.0.1",
"penpal": "^6.2.2",
"postcss": "^8.4.14",
"preact": "^10.10.0",
"preact-render-to-string": "^5.2.1",
"prism-react-renderer": "1.3.5",
"prop-types": "^15.8.1",
"react-helmet": "^6.1.0",
"react-id-generator": "^3.0.2",
+ "reading-time": "^1.5.0",
"redoc": "2.0.0-rc.73",
"redoc-cli": "^0.13.16",
+ "remark-frontmatter": "^3.0.0",
+ "remark-gfm": "1.0.0",
"sharp": "^0.30.7",
"stream-http": "^3.2.0",
"styled-components": "^5.3.5",
"swiper": "^8.3.2",
"to-arraybuffer": "^1.0.1",
"tty-browserify": "^0.0.1",
"unist-util-select": "2.0.2",
"uuid": "^8.3.2"
}My Mdx plugin changes// gatsby-config.js
module.exports = {
flags: {
PARALLEL_QUERY_RUNNING: true
},
plugins: [
`gatsby-plugin-preact`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-emotion`,
`gatsby-plugin-mdx-embed`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-plugin-layout`,
options: {
component: require.resolve(`./src/components/Layout/index.js`)
}
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `src/pages`
}
},
{
resolve: `gatsby-plugin-mdx`,
options: {
- mediaTypes: [`text/markdown`, `text/x-markdown`],
+ mdxOptions: {
+ remarkPlugins: [`remark-gfm`, `remark-frontmatter`],
+ rehypePlugins: [],
+ },
extensions: [`.mdx`, `.md`],
- defaultLayouts: {
- default: require.resolve(`./src/components/MDXFilter/index.js`)
- },
- plugins: [
- `gatsby-transformer-remark`,
- `gatsby-remark-autolink-headers`,
- `gatsby-remark-copy-linked-files`,
- `gatsby-remark-images`
- ],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-transformer-remark`
},
{
resolve: `gatsby-remark-autolink-headers`,
options: {
icon: false,
maintainCase: false,
removeAccents: true,
enableCustomId: true,
elements: [`h2`, `h3`, `h4`, `h5`]
}
},
{
resolve: `gatsby-remark-copy-linked-files`,
options: {
ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff`, `md`, `mdx`],
destinationDir: `assets`
}
},
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: DESKTOP_SCREEN_WIDTH,
linkImagesToOriginal: false,
showCaptions: false,
quality: 100,
withWebp: { quality: 100 },
disableBgImage: true,
backgroundColor: 'none'
}
}
]
}
},
{
resolve: `gatsby-plugin-algolia`,
...
}
]
};My GraphQL MDX node additions? |
Beta Was this translation helpful? Give feedback.
-
|
On a quick look:
I'll see what we can do adding more info to the migration guide! |
Beta Was this translation helpful? Give feedback.
-
|
I already added more content for most questions to the README :) |
Beta Was this translation helpful? Give feedback.
-
|
@LekoArts, thanks for the update to the readme. That helps. @axe312ger, regarding question 1: Incorrect. I've worked with gatsby-node.js to createSchemaCustomizations and Resolvers for frontmatter fields, etc. But I've not used |
Beta Was this translation helpful? Give feedback.
-
|
Hey guys, first of all thanks for the great work so far! I'm currently working on a blog using the new mdx plugin and encountered the following problem when using it with typescript and the graphql typegen that gatsby supports out of the box.
My setup is as follows:
As I am quite new to the whole mdx world, I'm curious if there is something I am missing in my setup or if it could be an issue with the new plugin that should be fixed. |
Beta Was this translation helpful? Give feedback.
-
|
I don't think you can have query named
|
Beta Was this translation helpful? Give feedback.
-
|
@khinshankhan Ah did not see that part, thanks for the help! |
Beta Was this translation helpful? Give feedback.
-
|
@khinshankhan I just tried it out and the error is gone of course but how would I go about typing the data properly now? I could not find a corresponding type in the Queries namespace for the exported query in the template. |
Beta Was this translation helpful? Give feedback.
-
|
For now you can't have automatic types as the typegen feature requires a name and the MDX plugin doesn't allow it (this is a limitation of the MDX plugin). It won't be fixed for the initial release but can be a feature request afterwards. |
Beta Was this translation helpful? Give feedback.
-
|
As a stopgap, maybe you could create the types manually until it gets implemented as explained here from the days before typegen https://jhackshaw.com/post/efficient-types-with-gatsby Should be relatively smooth if you copy over the old typegen types though usually it's just copying the query and adding colons and types 🤷♂️ |
Beta Was this translation helpful? Give feedback.
-
|
Awesome work! Anyone has a minimal/small repo with all the right deps and MDX v2 working? |
Beta Was this translation helpful? Give feedback.
-
|
You can use this Codesandbox: https://codesandbox.io/s/github/LekoArts/mdx-v2-example |
Beta Was this translation helpful? Give feedback.
-
|
Love seeing you show up here @pomber, Code Hike actually is the reason I'm watching this discussion! 🎉 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, @LekoArts! Appreciate your helpful additions. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @LekoArts ! @julrich you can also follow here code-hike/codehike#254 |
Beta Was this translation helpful? Give feedback.
-
|
I'm testing out the latest RC, but seeing I've tried comparing my code to LekoArts/portfolio-v2#45 Is there any specific thing I need to do to get |
Beta Was this translation helpful? Give feedback.
-
|
@LekoArts cpboyd/portfolio-v2@d4fd528 This results in the same error I was seeing for http://localhost:8000/design/introducing-the-theme-ui-plugin-for-figma |
Beta Was this translation helpful? Give feedback.
-
|
@cpboyd I think we fixed this, can you try it with |
Beta Was this translation helpful? Give feedback.
-
|
@axe312ger Even after updating to gatsby@next, it still seemed to have the same error when just re-exporting a named function. I was able to find a simple solution of simply defining a new function that simply behaves as a import ProseTemplate from "../pages/prose"
- export default ProseTemplate
+ const ProseTemplate2: React.FC<PageProps<WritingViewDataProps>> = (props) => <ProseTemplate {...props} />
+ export default ProseTemplate2 |
Beta Was this translation helpful? Give feedback.
-
|
@LekoArts @axe312ger |
Beta Was this translation helpful? Give feedback.
-
|
Interestingly, a work-around for the |
Beta Was this translation helpful? Give feedback.
-
|
🎉 The main PR #35650 was merged and y'all can use |
Beta Was this translation helpful? Give feedback.
-
|
Released 🎉 https://www.gatsbyjs.com/docs/reference/release-notes/v4.21/#gatsby-plugin-mdx-v4 |
Beta Was this translation helpful? Give feedback.
-
|
Does not work with tags or headings or any grouping, as in Array's |
Beta Was this translation helpful? Give feedback.
-
@LekoArts , the new gatsby-mdx-remote plugin that is confirmed to work (see thread below) does not get indexed by Algolia. Do you know whom to check the issue with? |
Beta Was this translation helpful? Give feedback.
-
|
How about a working example with typescript, tags and categories, cannot add a group to types, or??? = good luck on slug errors, try rehype-slug it works. |
Beta Was this translation helpful? Give feedback.
-
|
Cannot get MDX v2 to work with headings. or tags or categories. And the reason you will not post something on how to get it to work with tags headings ect.. I you cannot figure it out either. Why did you not build the new MDX plugin like the last and make it so we could just use it instead of rebuilding our whole site which does not work. Back to AST something I can control. Gatsby MDX v2 is a very poor representation of what it should be. |
Beta Was this translation helpful? Give feedback.
-
|
Please let me know if there is a better place to ask, but how can I change how gatsby-plugin-mdx generates the header in page.mdx: |
Beta Was this translation helpful? Give feedback.
-
|
MDX 2 Gatsby plugin is a hack at best. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I was wondering what is the simplest way to get gatsby-plugin-feed working with RSS since it depends on |
Beta Was this translation helpful? Give feedback.
-
|
I made my .xml files and rss.xml by hand and did not generate them with Gatsby, I will try `"gatsby-plugin-feed"-mdx: "^1.1.0",`` is old and should not be used. You can generate rss.xml online, with online feed generation tools that spider your site generating the rss.xml then just add it to the root of your static folder as rss.xml I do not generate html from gatsby-node.js. I assume you need html for .mdx files and for I use mdx v3 not .mdx v 5 and Gatsby v 5.1.0 having slug errors on Gatsby I generate html and slug for mdx in a useStaticQuery as getposts.ts then consume it in a page as mdx.slug.tsx. And use Note my sort and filter part of my queries have been updated to Gatsby version 5, My repo is typescript , and fully typed so it will be a little different with gatsby-config.js. allMdx should not be used in gatsby-node. I add allMdx for generating blog posts. I do no page creation for the pages folder in gatsby-node.ts. Gatsby automatically generates the html from the pages folder. The only time I use createPages is for tags and categories in gatbsy-node,ts I have a older version in .js at Old publiuslogic site which would be easier to figure out if you're not using typescript. and using older versions of Gatsby One good thing about React and Gatsby is there is a lot of ways to generate slug and html, and it also makes it confusing. Look through my repo's to give yourself some ideas. If still confused then send me a link to your repo that you are working on, if you need further assistance, and I will see what I can do to help. Also, if you are using headings, there are good examples of how to use it with Or fork one of the above repos that would be cool. Good Day Donald Boulton |
Beta Was this translation helpful? Give feedback.
-
|
It will not work with |
Beta Was this translation helpful? Give feedback.
-
|
Thanks mate! |
Beta Was this translation helpful? Give feedback.
-
|
I am going to make a component and page with a query to generate.rss.xml. The rss.xml Gatsby makes or made is not valid anyway. it should not have the complete body of the document just some excerpt of the body content. I will get back to you and send you my code once completed. The whole Gatsby Community would benefit from proper rss.xml |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I was wondering if there is any plans on allowing other sources then files sourced from 'gatsby-source-filesystem'. Currently I'm using V3 in combination with Strapi (gatsby-source-strapi) which works perfect. Any nodes that have media type 'text/markdown' get a childMdx node that I can use. With V4 and V5 this option is longer available, and with V3 causing quite some issues with React 18 (and Node 18), it would be great this options is added back to V4/V5. |
Beta Was this translation helpful? Give feedback.
-
|
Latest update, 1.0.16, pushed a few minutes ago just received childMdx support for rich content nodes along with some documentations, and also support for both a markdownImageList array with picked up transformed images and a configurable frontmatter field for additional images to preprocess when needed. Documentation updated added as well for the above so should be working! Fantastic work on how MDXv2 was implemented, enabling these additional plugins. Unfortunately the Algolia indexer to get the new plugins listed has not picked them up. I would need help to check what's wrong, I have not managed to figure it out, I've tried to dot the i and cross the t:s on all the plugin recommendations including naming. @axe312ger , did you have any contacts you could check with? I'm quite new to the Gatsby ecosystem... |
Beta Was this translation helpful? Give feedback.
-
|
Another update today, which includes childMdx support to connect the original content node with the MDX for more elegant queries and support for more advanced workflows. @rsaarloos , thanks for the issue request! |
Beta Was this translation helpful? Give feedback.
-
|
So with the latest version of gatsby-mdx-remote I'm able to see the Before I was pulling the
This works when you create full pages from MDX files (or remotely retrieved MDX using gatsby-mdx-remote), but I don't see how this would work if only a small part of my page is built up from MDX content. In my use case I have a page which contains many components, and some of them contain rich text. This rich text is defined in Strapi using Markdown with JSX (in some cases). With V3 I would pull the MDX body from GraphQL and put it in a component I made that made use of the |
Beta Was this translation helpful? Give feedback.
-
|
Copied from the closed issue with some thoughts.
I have not tried, but maybe you can pick out what the generated component name is from the Filenode filename and use that as a component to import. Some stitching to do, but might work as hackey approach perhaps? Someone versed in the MDX plugin itself might be able to figure it out. Does not sound impossible. For catching all MDX nodes, perhaps it could be added as a PR/issue? |
Beta Was this translation helpful? Give feedback.
-
|
So after trying quite some different solution, for now I decided to stick to MDX v1 (and gatsby-plugin-mdx V3). After getting the dependencies correctly, this seems to work fine with Gatsby 5, albeit some warnings in the build process. Not ideal, but that is at least something that is working, the alternative is to drop MDX support and move back to Markdown. Still would be great to see this functionality from V3 to return in the next versions of the gatsby plugin, will be eagerly waiting for it. For reference I'm using the following dependencies in my package.json (if anybody else wants to get MDX v1 to work with Gatsby V5) |
Beta Was this translation helpful? Give feedback.
-
|
Hi, maybe someone here has similar issues as we have with the new MDX v2 plugin and give tips in which direction we could proceed. The "Motiviation" section by @laurieontech above mentions
This has become reality through passing the template for a page and a path to the page MDX to Question Does anybody here know an approach to get the "Building HTML renderer" build phase to not inline all template components, MDX shortcodes and their complete transitive dependency tree into a new intermediate JS bundle per page in the |
Beta Was this translation helpful? Give feedback.
-
|
We have just one layout for MDX files. And when a page is a But again, the pain is then how to set/update page titles. In my case I render a title element in |
Beta Was this translation helpful? Give feedback.
-
|
Some more context to your question; If you set a layout in e.g. How do you differ today the layouts templates? |
Beta Was this translation helpful? Give feedback.
-
|
I have written a documentation site based on MDX and something always struck me as odd. I would import data into an .mdx file for use in a component I wanted to document: import data from "../data/big-menu.yaml"This data object would then be available in another .mdx file as the same variable I had assumed imports into an .mdx file would be scoped to that file, but that doesn't seem to be the case. The work-around of naming each import differently was tedious and made the documentation less clear. I wonder if this is essentially the same issue. It has always bothered me that those variables were "somewhere in the global space" Maybe this is related to your issue with bloat and components loading where they haven't been imported??? |
Beta Was this translation helpful? Give feedback.
-
|
True, I import a lot of things. And if a default import had the same name in two MDX files, they competed with each other, as things got imported in a global scope. How ever, when I try to replicate this in v2, it looks to me this is not the case in MDX v2 anymore 👍 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the update! great news |
Beta Was this translation helpful? Give feedback.
-
|
I am refactoring my documentation site to work with the latest In the existing site a writer adds a codeblock in an mdx document like this import {Box} from "package"
```jsx display="live"
<Box />
```behind the scenes:
In the old site I also passed in the scoped components from the As that is no longer available, I am looking for another way to get the (This is not the same as getting the shortcodes using Are you aware of anyway (another plugin, a strategy, a hook?) to get the scope from an |
Beta Was this translation helpful? Give feedback.
-
|
For all of our component example codes, we also use ReactLive. But we do import the examples as TSX files into MDX. This way we get type checks on them. To make that happen, we created a Babel Plugin / Gatsby Plugin. Here is an example:
I know, its not quit a solution for your issue. But its a similar use-case. So I just wanted to mention it. |
Beta Was this translation helpful? Give feedback.
-
|
Did you have any luck with this @smerth? I am facing the same exact issue. The only solution I have found would be to add every one of our imported components into the MDX shortcodes but it feels like a backwards step given this was supported in v2 of |
Beta Was this translation helpful? Give feedback.
-
|
Hi Team, Please make it work with other sources than files sourced from 'gatsby-source-filesystem'. Older versions was working excellently with the datacoms nodes which have mdx field. Now we wanted to upgrade our project to gatsby v5 with the latest gatsby-source-mdx. We tried upgrading but it failed due to datocms node now don't have childMdx for each mdx field. |
Beta Was this translation helpful? Give feedback.
-
|
I have the same issue with gatsby-source-contentful, but using the old gatsby-plugin-mdx v1 it still works fine, even with Gatsby v5. If we want other sources, we should do this as a community effort, I don't see a chance this will be implemented any time soon, except we do the ground work or heavy lifting :/ |
Beta Was this translation helpful? Give feedback.
and others
Released 🎉
https://www.gatsbyjs.com/docs/reference/release-notes/v4.21/#gatsby-plugin-mdx-v4