fix(gatsby-plugin-mdx): Hashing and pluginOptions (#36387)

packages/gatsby-plugin-mdx/src/get-source-plugins-as-remark-plugins.ts

@@ -32,30 +32,29 @@ export async function getSourcePluginsAsRemarkPlugins({
 
   const userPlugins = userPluginsFiltered.map(plugin => {
     const requiredPlugin = plugin.module
-    const wrappedGatsbyPlugin: Pluggable<Array<any>> =
-      function wrappedGatsbyPlugin() {
-        // eslint-disable-next-line @babel/no-invalid-this
-        const mdxNode = getNode(this.data(`mdxNodeId`) as string)
+    const wrappedGatsbyPlugin: Pluggable<any> = function wrappedGatsbyPlugin() {
+      // eslint-disable-next-line @babel/no-invalid-this
+      const mdxNode = getNode(this.data(`mdxNodeId`) as string)
 
-        return async function transformer(markdownAST): Promise<any> {
-          // Execute gatsby-remark-* plugin
-          await requiredPlugin(
-            {
-              markdownAST,
-              markdownNode: mdxNode,
-              getNode,
-              getNodesByType,
-              get files() {
-                return getNodesByType(`File`)
-              },
-              pathPrefix,
-              reporter,
-              cache,
+      return async function transformer(markdownAST): Promise<any> {
+        // Execute gatsby-remark-* plugin
+        await requiredPlugin(
+          {
+            markdownAST,
+            markdownNode: mdxNode,
+            getNode,
+            getNodesByType,
+            get files() {
+              return getNodesByType(`File`)
             },
-            plugin.options || {}
-          )
-        }
+            pathPrefix,
+            reporter,
+            cache,
+          },
+          plugin.pluginOptions || {}
+        )
       }
+    }
 
     return wrappedGatsbyPlugin
   })

packages/gatsby-plugin-mdx/src/plugin-options.ts

@@ -1,7 +1,7 @@
 import type { ProcessorOptions } from "@mdx-js/mdx"
 import type { GatsbyCache, NodePluginArgs, PluginOptions, Store } from "gatsby"
 import deepmerge from "deepmerge"
-import type { IPluginRefObject } from "gatsby-plugin-utils/types"
+import type { IPluginInfo } from "gatsby-plugin-utils/types"
 import { getSourcePluginsAsRemarkPlugins } from "./get-source-plugins-as-remark-plugins"
 import rehypeMdxMetadataExtractor from "./rehype-metadata-extractor"
 import { remarkMdxHtmlPlugin } from "./remark-mdx-html-plugin"
@@ -10,7 +10,7 @@ import { remarkPathPlugin } from "./remark-path-prefix-plugin"
 export interface IMdxPluginOptions {
   extensions: [string]
   mdxOptions: ProcessorOptions
-  gatsbyRemarkPlugins?: [IPluginRefObject]
+  gatsbyRemarkPlugins?: [IPluginInfo]
 }
 interface IHelpers {
   getNode: NodePluginArgs["getNode"]
@@ -84,7 +84,7 @@ export const enhanceMdxOptions: EnhanceMdxOptions = async (
 
       if (typeof requiredPlugin.setParserPlugins === `function`) {
         for (const parserPlugin of requiredPlugin.setParserPlugins(
-          plugin.options || {}
+          plugin.pluginOptions || {}
         )) {
           if (Array.isArray(parserPlugin)) {
             const [parser, parserPluginOptions] = parserPlugin

packages/gatsby-plugin-utils/src/types.ts

@@ -33,6 +33,9 @@ export interface IPluginInfo {
 
   /** Options passed to the plugin */
   pluginOptions?: IPluginInfoOptions
+
+  module?: any
+  modulePath?: string
 }
 
 export interface IPluginInfoOptions {

packages/gatsby/src/utils/js-chunk-names.ts

@@ -52,8 +52,9 @@ export function generateComponentChunkName(componentPath: string): string {
      * File names should not exceed 255 characters
      * minus 12 for `component---`
      * minus 7 for `.js.map`
+     * minus 20 for `-[hash].js`
      */
-    const maxLength = 236
+    const maxLength = 215
     const shouldTruncate = name.length > maxLength
 
     /**