Error when trying to run docs site locally

[macklinu]

Subject of the issue

I am unable to start the Gatsby dev server for the docs site after cloning, installing, and bootstrapping this repo (as described at https://mdxjs.com/contributing).

Your environment

• macOS 10.14.3
• node v10.14.2
• yarn v1.15.2

Steps to reproduce

• clone the repo
• run yarn
• run yarn bootstrap
• run yarn docs

Expected behaviour

yarn docs should start a dev server of https://mdxjs.com/ locally (on localhost:8000).

Actual behaviour

yarn docs errors and exits:

❯ yarn docs
yarn run v1.15.2
$ gatsby develop
success open and validate gatsby-configs — 0.033 s
success load plugins — 0.517 s
success onPreInit — 0.002 s
success initialize cache — 0.010 s
success copy gatsby files — 0.131 s
success onPreBootstrap — 0.013 s
success source and transform nodes — 0.023 s
success building schema — 0.161 s
success createPages — 0.000 s
success createPagesStatefully — 0.081 s
success onPreExtractQueries — 0.001 s
success update schema — 0.030 s
success extract queries from components — 0.075 s
success run static queries — 0.001 s
success run page queries — 0.033 s — 1/1 30.99 queries/second
success write out page data — 0.013 s
success write out redirect data — 0.003 s
success onPostBootstrap — 0.000 s

info bootstrap finished - 4.212 s

(node:46526) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:46526) DeprecationWarning: Resolver#doResolve: The type arguments (string) is now a hook argument (Hook). Pass a reference to the hook instead.
error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html


  Error: ./node_modules/gatsby-mdx/wrap-root-element.js 36:11
  Module parse failed: Unexpected token (36:11)
  You may need an appropriate loader to handle this file type.
  |       ({ guard }) => (guard ? guard(props) : true)
  |     );
  >     return <Component {...props} />;
  |   };
  |
   @ ./node_modules/gatsby-mdx/gatsby-ssr.js 1:0-39 2:31-35
   @ ./.cache/api-runner-ssr.js
   @ ./.cache/develop-static-entry.js

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[johno]

This is now fixed thanks to @ChristopherBiscardi's detective work.

[indiesquidge]

Following the contributing steps for running the docs site, I get this same issue only in a new location from the original issue.

❯❯❯ yarn docs
yarn run v1.17.3
$ gatsby develop
success open and validate gatsby-configs - 0.038 s
success load plugins - 0.448 s
success onPreInit - 0.002 s
success initialize cache - 0.004 s
success copy gatsby files - 0.077 s
success onPreBootstrap - 0.012 s
success source and transform nodes - 0.067 s
success building schema - 0.150 s
success createPages - 0.061 s
success createPagesStatefully - 0.151 s
success onPreExtractQueries - 0.001 s
success update schema - 0.026 s
success extract queries from components - 0.058 s
success write out requires - 0.003 s
success write out redirect data - 0.001 s
success onPostBootstrap - 0.002 s
⠀
info bootstrap finished - 4.264 s
⠀
success run static queries - 0.002 s
success run page queries - 0.014 s — 2/2 171.48 queries/second
ERROR  Failed to compile with 1 errors

error  in ./packages/gatsby-theme-mdx/node_modules/gatsby-plugin-mdx/context.js
⠀
Module parse failed: Unexpected token (11:2)
You may need an appropriate loader to handle this file type.
|
| export const MDXScopeProvider = ({ __mdxScope, children }) => (
>   <GatsbyMDXScopeContext.Provider value={__mdxScope}>
|     {children}
|   </GatsbyMDXScopeContext.Provider>

 @ ./packages/gatsby-theme-mdx/node_modules/gatsby-plugin-mdx/mdx-renderer.js 3:24-44
 @ ./packages/gatsby-theme-mdx/src/templates/doc.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/event-source-polyfill/src/eventsource.js (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
⠀
✖ ｢wdm｣:
ERROR in ./packages/gatsby-theme-mdx/node_modules/gatsby-plugin-mdx/context.js 11:2
Module parse failed: Unexpected token (11:2)
You may need an appropriate loader to handle this file type.
|
| export const MDXScopeProvider = ({ __mdxScope, children }) => (
>   <GatsbyMDXScopeContext.Provider value={__mdxScope}>
|     {children}
|   </GatsbyMDXScopeContext.Provider>
 @ ./packages/gatsby-theme-mdx/node_modules/gatsby-plugin-mdx/mdx-renderer.js 3:24-44
 @ ./packages/gatsby-theme-mdx/src/templates/doc.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/event-source-polyfill/src/eventsource.js (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.

If I update gatsby-config to include the suspect module, the issue seems to be resolved, but I'm not sure if that's just a patch or a proper solution.

    {
      resolve: 'gatsby-plugin-compile-es6-packages',
      options: {
-       modules: ['gatsby-theme-mdx']
+       modules: ['gatsby-theme-mdx', 'gatsby-plugin-mdx']
      }
    },

@johno, could I submit a PR to include this fix?

[johno]

Would happily accept a PR @indiesquidge!

I think there might be a regression/issue with Gatsby or gatsby-plugin-mdx that's a separate issue I'll dig into (likely related to workspaces). For now a PR to get it working is great!