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@next OR yarn add --exact gatsby@next gatsby-plugin-mdx@next Make 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.
-
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.
-
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. Log
Update: 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.
-
@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.
-
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.
-
I'm hitting this Log from `gatsby develop`
crash.log generated by segfault-handler
I 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.
-
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.
-
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.
-
I have a few questions:
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.
-
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.
-
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 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 query
My 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.6 My 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.
-
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.
-
Awesome work! Anyone has a minimal/small repo with all the right deps and MDX v2 working? |
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.
-
🎉 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.
-
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.
-
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.
-
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.
-
It will not work with |
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.
-
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.
-
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.
Released 🎉
https://www.gatsbyjs.com/docs/reference/release-notes/v4.21/#gatsby-plugin-mdx-v4