MDX app bundle bloating and global scope problems

[johno]

MDX currently shoehorns imports into the app bundle, and adds all imports to the global scope (causing imports to need to be namespaced to avoid clashing). When the new webpack APIs land we should leverage them to improve some of the rough edges around gatsby-plugin-mdx.

This is also related to how gatsby-plugin-feed works with MDX because it requires more complex bundling and rendering than its remark counterpart.

Related issues reporting bugs

• Imports in programmatic MDX pages require reboot of the web server #15881
• [gatsby-plugin-mdx] Support shortcodes on feed HTML #24321
• [gatsby-plugin-mdx] import names across MDX content collide #17119
• [gatsby-plugin-feed] can this plugin be run onPreBuild instead of onPostBuild? #25407
• [gatsby-plugin-mdx] html field returns empty div for [gatsby-plugin-feed] #27416
• [gatsby-plugin-mdx] Stale scope caches causing build failures on valid input #29122

Related PRs for APIs

• refactor(gatsby): use virtual modules for (a)sync-requires and match-paths.json #25057
• feat(gatsby): Webpack API for dependencies #24903

[janosh]

When the new webpack APIs land we should leverage them to improve some of the rough edges around gatsby-plugin-mdx.

Sounds great! Really excited for any and all improvements to MDX! Is this a gatsby-plugin-mdx only matter? Or is this tied to the MDX 2.0 release?

[pieh]

Sounds great! Really excited for any and all improvements to MDX! Is this a gatsby-plugin-mdx only matter?

API is generic and other plugins (or sites directly) can use it (if there is need for it) - there are slightly more details / context / discussion about this in #18689 . But this issue is about gatsby-plugin-mdx specific app bundle issue (we still will need to integrate those new APIs in gatsby-plugin-mdx when API lands) and also html field (gatsby-plugin-feed)

Or is this tied to the MDX 2.0 release?

Not tied to MDX 2.0 functionally. We might bundle those if both MDX 2.0 and webpack api changes will require us to make breaking changes in plugin to do 1 major release instead of 2 in short period of times.

[mohsenkhanpour]

There is an issue when react and react-dom are upgraded to "16.14.0" or "17.0.0-rc".

Steps to reproduce:

1. Clone the default MDX starter:
   gatsby new my-site https://github.com/ChristopherBiscardi/gatsby-starter-mdx-basic

2. Upgrade react and react-dom to "16.13.1" and yarn build, it works.

3. Upgrade react and react-dom to "16.14.0" and yarn build, it doesn't work.

The build fails with the following error:

/src/pages/page-2.mdx: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | import * as React from 'react'
    | ^
  2 |   /* @jsx mdx */
  3 | import { mdx } from '@mdx-js/react';
  4 | /* @jsx mdx */

File: src/pages/page-2.mdx

This only effects mdx pages in src/pages/, mdx pages created with templates seem to be working fine.

[phil-lgr]

I think I'm hitting the prob described in #29122

I change this:

To this:

and the old import causes an error:

Are there any way to disable the gatsby-plugin-mdx cache? or known workaround?

Thanks!

[phil-lgr]

Is there anything new on this front?

[pelikhan]

The "bundle everything in mdx" issue is quite a big gotcha. I am migrating as much content as possible out of MDX to avoid getting a massive app bundle.

[quanru]

#27416 still not work

[illogic-al]

I was only considering image imports with #35028 but that commit could also do the same thing for .md files.
@LekoArts Think I should add '.md' files to my regex?

[LekoArts]

Hi!

We merged #35650 which means that a new major version of gatsby-plugin-mdx will be released on August 16. You can already try it out by installing gatsby-plugin-mdx@next & gatsby@next.

The original issue is fixed 🎉

MDX currently shoehorns imports into the app bundle, and adds all imports to the global scope (causing imports to need to be namespaced to avoid clashing)

The new version splits bundles and thus supports all the niceties of tree-shaking and scoping. It uses the MDX webpack loader under the hood so it can split the components, scope etc. by MDX file.

[phil-lgr]

This is huge, thank you for working this one out!