fix(gatsby-plugin-mdx): support yarn PnP (#20638)

* Add missing dependencies explicitly

* Use the util from the core package

* Remove explicit deps

* Move createRequireFromPath to gatsby-core-utils

* Remove peerDeps of gatsby

Author: kevin940726

packages/gatsby-core-utils/README.md

@@ -90,3 +90,17 @@ console.log({ CI_NAME })
 // {CI_NAME: "ZEIT Now"}
 // ...
 ```
+
+### createRequireFromPath
+
+A cross-version polyfill for Node's [`Module.createRequire`](https://nodejs.org/api/modules.html#modules_module_createrequire_filename).
+
+```js
+const { createRequireFromPath } = require("gatsby-core-utils")
+
+const requireUtil = createRequireFromPath("../src/utils/")
+
+// Require `../src/utils/some-tool`
+requireUtil("./some-tool")
+// ...
+```

packages/gatsby/src/utils/create-require-from-path.js renamed to packages/gatsby-core-utils/src/create-require-from-path.js

@@ -6,3 +6,4 @@ exports.cpuCoreCount = require(`./cpu-core-count`)
 exports.urlResolve = require(`./url`).resolve
 exports.isCI = require(`./ci`).isCI
 exports.getCIName = require(`./ci`).getCIName
+exports.createRequireFromPath = require(`./create-require-from-path`)

packages/gatsby-core-utils/src/index.js

@@ -41,7 +41,7 @@ exports.preprocessSource = require(`./gatsby/preprocess-source`)
  */
 exports.onCreateBabelConfig = ({ actions }) => {
   actions.setBabelPlugin({
-    name: `@babel/plugin-proposal-object-rest-spread`,
+    name: require.resolve(`@babel/plugin-proposal-object-rest-spread`),
   })
 }
 

packages/gatsby-plugin-mdx/gatsby-node.js

@@ -3,6 +3,7 @@ const { getOptions } = require(`loader-utils`)
 const grayMatter = require(`gray-matter`)
 const unified = require(`unified`)
 const babel = require(`@babel/core`)
+const { createRequireFromPath, slash } = require(`gatsby-core-utils`)
 
 const {
   isImport,
@@ -12,16 +13,19 @@ const {
   EMPTY_NEWLINE,
 } = require(`@mdx-js/mdx/util`)
 
-const toMDAST = require(`remark-parse`)
-const squeeze = require(`remark-squeeze-paragraphs`)
+// Some packages are required implicitly from @mdx-js/mdx (not listed in package.json).
+// To support yarn PnP, we need them to be required from their direct parent.
+const requireFromMDX = createRequireFromPath(require.resolve(`@mdx-js/mdx`))
+
+const toMDAST = requireFromMDX(`remark-parse`)
+const squeeze = requireFromMDX(`remark-squeeze-paragraphs`)
 const debug = require(`debug`)(`gatsby-plugin-mdx:mdx-loader`)
 const debugMore = require(`debug`)(`gatsby-plugin-mdx-info:mdx-loader`)
 
 const genMdx = require(`../utils/gen-mdx`)
 const withDefaultOptions = require(`../utils/default-options`)
 const createMDXNode = require(`../utils/create-mdx-node`)
 const { createFileNode } = require(`../utils/create-fake-file-node`)
-const { slash } = require(`gatsby-core-utils`)
 
 const DEFAULT_OPTIONS = {
   footnotes: true,
@@ -171,8 +175,8 @@ ${contentWithoutFrontmatter}`
     const result = babel.transform(rawMDXOutput, {
       configFile: false,
       plugins: [
-        require(`@babel/plugin-syntax-jsx`),
-        require(`@babel/plugin-syntax-object-rest-spread`),
+        requireFromMDX(`@babel/plugin-syntax-jsx`),
+        requireFromMDX(`@babel/plugin-syntax-object-rest-spread`),
         require(`../utils/babel-plugin-html-attr-to-jsx-attr`),
       ],
     })

packages/gatsby-plugin-mdx/loaders/mdx-loader.js

@@ -8,7 +8,7 @@ const { warnOnIncompatiblePeerDependency } = require(`./validate`)
 const { store } = require(`../../redux`)
 const existsSync = require(`fs-exists-cached`).sync
 const createNodeId = require(`../../utils/create-node-id`)
-const createRequireFromPath = require(`../../utils/create-require-from-path`)
+const { createRequireFromPath } = require(`gatsby-core-utils`)
 
 function createFileContentHash(root, globPattern) {
   const hash = crypto.createHash(`md5`)

packages/gatsby/src/bootstrap/load-plugins/load.js

@@ -1,7 +1,7 @@
 import { store } from "../redux"
 import { memoize } from "lodash"
 
-const createRequireFromPath = require(`./create-require-from-path`)
+const { createRequireFromPath } = require(`gatsby-core-utils`)
 const { join, dirname } = require(`path`)
 
 const fs = require(`fs`)