Global MDX components do not work when MDX is used via a theme with NPM.

I’m unsure if this is a Gatsby or MDX issue so it is cross posted with MDX https://github.com/mdx-js/mdx/issues/1223

---

Description

I’m running into an issue where we add components to MDX global scope but those components don’t render in the page if the theme is installed via NPM, the compnents work fine if the theme is installed via Yarn.

We publish a theme (gatsby-theme-minimal) to a tag on Github via gitpkg. This theme configures MDX via gatsby-plugin-mdx, configures pages and provides a component for rendering MDX files.

Several additional components are added to the <MDXProvider> in the theme:

<MDXProvider components={{ Box, Test }}>
  <MDXRenderer>{mdx.body}</MDXRenderer>
</MDXProvider>

However when we install with npm in the reproduction folder we see this on the /test/ page:

We also see the following message in the console:

Component Box was not imported, exported, or provided by MDXProvider as global scope commons.js line 5071 > Function:14:13
Component Test was not imported, exported, or provided by MDXProvider as global scope commons.js line 5071 > Function:14:13
Component Box was not imported, exported, or provided by MDXProvider as global scope

Installing with yarn in the reproduction folder produces this on the /test/ page:

Steps to reproduce

I have created a minimal reproduction at https://github.com/patrickarlt/gatsby-mdx-theme-reproduction-issue

1. Clone the repo
2. cd reproduction
3. npm install
4. gatsby develop
5. Note the styling on /test/
6. Kill the server
7. gatsby clean
8. Delete package-lock.json and node_modules
9. yarn install
10. gatsby develop
11. Note the styling on /test/

The theme is published via gitpkg to a tag on the reproduction repo.

Actual/Expected result

The MDX page should render the same regardless on installation via Yarn/NPM.

Environment

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.16.3/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 80.0
    Safari: 13.1.2
  npmPackages:
    gatsby: ^2.23.12 => 2.24.47
    gatsby-source-filesystem: ^2.1.41 => 2.3.24
    gatsby-theme-minimal: https://github.com/patrickarlt/gatsby-mdx-theme-reproduction-issue.git#gatsby-theme-minimal-v1.0.0-gitpkg => 1.0.0
  npmGlobalPackages:
    gatsby-cli: 2.12.29

[laurieontech]

You’re absolutely right that it’s a papercut in its current state. The best solution may be to prevent the version of MDX that comes with gatsby now from being used/potentially clashing. The PR I’ve opened should be sufficient.

[patrickarlt]

I also managed to resolve this by making @mdx-js/react and @mdx-js/mdx peerDependencies of my theme instead of dependencies. Then in any Gatsby project that includes the theme yo uneed to put @mdx-js/mdx and @mdx-js/react as dependencies alongside the theme. This causes npm to install them at the root of node_modules and everything seems to work. I still think #26660 is a good PR and should probally be included to permanently resolve this since there are lot of themes that probably have a direct dependency on @mdx-js/mdx and @mdx-js/react.