v0.15.1: Error: Can't resolve '@mdx-js/react' in gatsby plugin

[fwextensions]

Describe the bug
Upgraded from 0.14.7 to 0.15.1, did a fresh install with npm i, and now running gatsby develop fails with an error:

Module not found: Error: Can't resolve '@mdx-js/react' in '...\node_modules\gatsby-plugin-theme-ui\src'

To Reproduce
Steps to reproduce the behavior:

Deps list in the package:

  "dependencies": {
    "@contentful/rich-text-types": "^15.13.2",
    "@fontsource/public-sans": "^4.5.10",
    "@lekoarts/gatsby-theme-styleguide": "^3.0.1",
    "@theme-ui/presets": "^0.15.1",
    "babel-plugin-styled-components": "^2.0.7",
    "dotenv": "^16.0.2",
    "gatsby": "^4.23.1",
    "gatsby-plugin-alias-imports": "^1.0.5",
    "gatsby-plugin-image": "^2.23.1",
    "gatsby-plugin-react-svg": "^3.1.0",
    "gatsby-plugin-styled-components": "^5.23.0",
    "gatsby-plugin-theme-ui": "^0.15.1",
    "gatsby-source-contentful": "^7.21.1",
    "gatsby-source-filesystem": "^4.23.0",
    "gatsby-transformer-sharp": "^4.23.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "styled-components": "^5.3.5",
    "theme-ui": "^0.15.1"
  }

Expected behavior
My project is no longer using MDX, and I removed imports of Themed, so it's surprising to see @mdx-js being required.

Additional context
I see "@mdx-js/react": "^1" as a dev dependency in the plugin package, but maybe that should be a peer? Also if it is a dependency, seems strange that it's not getting installed by npm automatically.

I can manually add @mdx-js/react to package.json to get the gatsby build to work, but then I'm back to forcing the install because of React 18, which Theme-UI now requires but isn't supported by mdx v1.

[hasparus]

Hey @fwextensions! Thanks for the issue. Could you check if the 0.15.2-canary.1 version fixes your issue?

I've just added either version of @mdx-js/react to peerDependencies, as they're both supported.

"@mdx-js/react": "^1 || ^2"

[fwextensions]

Haven't tried the PR yet, but won't this still require the installation of MDX along with Theme-UI? I thought this in the changelog meant MDX was jno longer required:

Pull out MDX to be opt-in (#2288)
Breaking: theme-ui no longer includes @theme-ui/mdx — MDX is now opt-in.

I'm not using MDX at all, so wouldn't expect to have to install it if Theme-UI doesn't need it.

[hasparus]

theme-ui no longer depends on MDX, so it doesn't bring it (and @theme-ui/mdx) with itself.

gatsby-plugin-theme-ui, however, does.
It's written under assumption that you're using Gatsby for a blog / marketing website / documentation page.

What I'd do in your case, is either "shadow" gatsby-plugin-theme-ui/src/provider.js to remove MDX provider from it, or eject the whole plugin and merge its files into yours. It might turn out that the only thing you need from the plugin is the theme provider and onRenderBody from gatsby-ssr.js.

If I were to use Gatsby shadowing, I'd remove those lines:

import { ThemeProvider, merge } from 'theme-ui'
- import { useThemedStylesWithMdx } from '@theme-ui/mdx'
import React from 'react'

import localTheme from './index'
import components from './components'
import useThemeUiConfig from './hooks/configOptions'

- import { MDXProvider, useMDXComponents } from '@mdx-js/react'

const Root = ({ children }) => {
  const themeUiConfig = useThemeUiConfig()
  const { preset, prismPreset } = themeUiConfig

  const theme = preset.default || preset

  const themeWithPrism = merge(theme, {
    styles: {
      pre: prismPreset,
    },
  })

  const fullTheme = merge(themeWithPrism, localTheme)

  return (
    <ThemeProvider theme={fullTheme}>
-      <MDXProvider
-        components={useThemedStylesWithMdx(useMDXComponents(components))}
-      >
        {children}
-      </MDXProvider>
    </ThemeProvider>
  )
}

export const WrapRootElement = ({ element }) => {
  return <Root>{element}</Root>
}