feat(gatsby-plugin-mdx): use subplugin annotation to use automatic su…

…bplugin module loading (#33040)

patches/v4/3-gatsby-plugin-mdx-subplugin.patch

@@ -0,0 +1,94 @@
+diff --git a/packages/gatsby-plugin-mdx/gatsby-node.js b/packages/gatsby-plugin-mdx/gatsby-node.js
+index a5e0f5bb92..4c7b964582 100644
+--- a/packages/gatsby-plugin-mdx/gatsby-node.js
++++ b/packages/gatsby-plugin-mdx/gatsby-node.js
+@@ -80,16 +80,9 @@ exports.pluginOptionsSchema = function ({ Joi }) {
+       .unknown(true)
+       .default({})
+       .description(`Set the layout components for MDX source types`),
+-    gatsbyRemarkPlugins: Joi.array()
+-      .items(
+-        Joi.string(),
+-        Joi.object({
+-          resolve: Joi.string(),
+-          options: Joi.object({}).unknown(true),
+-        })
+-      )
+-      .default([])
+-      .description(`Use Gatsby-specific remark plugins`),
++    gatsbyRemarkPlugins: Joi.subPlugins({ entry: `index` }).description(
++      `Use Gatsby-specific remark plugins`
++    ),
+     lessBabel: Joi.boolean()
+       .default(false)
+       .description(
+diff --git a/packages/gatsby-plugin-mdx/gatsby/create-schema-customization.js b/packages/gatsby-plugin-mdx/gatsby/create-schema-customization.js
+index aca0536a58..33e7480ff9 100644
+--- a/packages/gatsby-plugin-mdx/gatsby/create-schema-customization.js
++++ b/packages/gatsby-plugin-mdx/gatsby/create-schema-customization.js
+@@ -17,7 +17,6 @@ const getTableOfContents = require(`../utils/get-table-of-content`)
+ const defaultOptions = require(`../utils/default-options`)
+ const genMDX = require(`../utils/gen-mdx`)
+ const { mdxHTMLLoader: loader } = require(`../utils/render-html`)
+-const { interopDefault } = require(`../utils/interop-default`)
+
+ async function getCounts({ mdast }) {
+   const counts = {}
+@@ -75,7 +74,7 @@ module.exports = function createSchemaCustomization(
+    */
+   for (const plugin of options.gatsbyRemarkPlugins) {
+     debug(`requiring`, plugin.resolve)
+-    const requiredPlugin = interopDefault(require(plugin.resolve))
++    const requiredPlugin = plugin.module
+     debug(`required`, plugin)
+     if (_.isFunction(requiredPlugin.setParserPlugins)) {
+       for (const parserPlugin of requiredPlugin.setParserPlugins(
+diff --git a/packages/gatsby-plugin-mdx/loaders/mdx-loader.js b/packages/gatsby-plugin-mdx/loaders/mdx-loader.js
+index a602ca833c..9f9432df06 100644
+--- a/packages/gatsby-plugin-mdx/loaders/mdx-loader.js
++++ b/packages/gatsby-plugin-mdx/loaders/mdx-loader.js
+@@ -5,7 +5,6 @@ const path = require(`path`)
+ const unified = require(`unified`)
+ const babel = require(`@babel/core`)
+ const { createRequireFromPath, slash } = require(`gatsby-core-utils`)
+-const { interopDefault } = require(`../utils/interop-default`)
+
+ const {
+   isImport,
+@@ -206,7 +205,7 @@ ${contentWithoutFrontmatter}`
+    */
+   for (const plugin of options.gatsbyRemarkPlugins) {
+     debug(`requiring`, plugin.resolve)
+-    const requiredPlugin = interopDefault(require(plugin.resolve))
++    const requiredPlugin = plugin.module
+     debug(`required`, plugin)
+     if (_.isFunction(requiredPlugin.setParserPlugins)) {
+       for (const parserPlugin of requiredPlugin.setParserPlugins(
+diff --git a/packages/gatsby-plugin-mdx/utils/get-source-plugins-as-remark-plugins.js b/packages/gatsby-plugin-mdx/utils/get-source-plugins-as-remark-plugins.js
+index 86f14c514e..6246062755 100644
+--- a/packages/gatsby-plugin-mdx/utils/get-source-plugins-as-remark-plugins.js
++++ b/packages/gatsby-plugin-mdx/utils/get-source-plugins-as-remark-plugins.js
+@@ -1,5 +1,4 @@
+ const visit = require(`unist-util-visit`)
+-const { interopDefault } = require(`./interop-default`)
+
+ // ensure only one `/` in new url
+ const withPathPrefix = (url, pathPrefix) =>
+@@ -36,7 +35,7 @@ module.exports = async function getSourcePluginsAsRemarkPlugins({
+
+   // return list of remarkPlugins
+   const userPluginsFiltered = gatsbyRemarkPlugins.filter(
+-    plugin => typeof interopDefault(require(plugin.resolve)) === `function`
++    plugin => typeof plugin.module === `function`
+   )
+
+   if (!userPluginsFiltered.length) {
+@@ -44,7 +43,7 @@ module.exports = async function getSourcePluginsAsRemarkPlugins({
+   }
+
+   const userPlugins = userPluginsFiltered.map(plugin => {
+-    const requiredPlugin = interopDefault(require(plugin.resolve))
++    const requiredPlugin = plugin.module
+     const wrappedPlugin = () =>
+       async function transformer(markdownAST) {
+         await requiredPlugin(