fix(gatsby): Support ESM-only gatsby-remark-* plugins

integration-tests/esm-in-gatsby-files/.gitignore

@@ -5,4 +5,6 @@ yarn.lock
 # These are removed and created during the test lifecycle
 ./gatsby-config.js
 ./gatsby-config.mjs
-./gatsby-config.ts
+./gatsby-config.ts
+./gatsby-node.js
+./gatsby-node.mjs

integration-tests/esm-in-gatsby-files/__tests__/fixtures/gatsby-config.js

@@ -7,7 +7,18 @@ helloDefaultCJS()
 helloNamedCJS()
 
 const config = {
-  plugins: [],
+  plugins: [
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: `gatsby-remark-cjs`,
+          }
+        ]
+      },
+    },
+  ],
 }
 
 module.exports = config

integration-tests/esm-in-gatsby-files/__tests__/fixtures/gatsby-config.mjs

@@ -15,6 +15,16 @@ const config = {
         slugify,
       },
     },
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: `gatsby-remark-esm`,
+          }
+        ]
+      },
+    },
   ],
 }
 

integration-tests/esm-in-gatsby-files/__tests__/fixtures/plugins/gatsby-remark-cjs/index.js

@@ -0,0 +1,5 @@
+console.info(`gatsby-remark-cjs-gatsby-config-js`)
+
+module.exports = ({ markdownAST }, pluginOptions) => {
+  return markdownAST
+}

integration-tests/esm-in-gatsby-files/__tests__/fixtures/plugins/gatsby-remark-cjs/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "gatsby-remark-cjs",
+  "version": "1.0.0",
+  "main": "index.js"
+}

integration-tests/esm-in-gatsby-files/__tests__/fixtures/plugins/gatsby-remark-esm/index.js

@@ -0,0 +1,5 @@
+console.info(`gatsby-remark-esm-gatsby-config-mjs`)
+
+export default ({ markdownAST }, pluginOptions) => {
+  return markdownAST
+}

integration-tests/esm-in-gatsby-files/__tests__/fixtures/plugins/gatsby-remark-esm/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "gatsby-remark-esm",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js"
+}

integration-tests/esm-in-gatsby-files/__tests__/gatsby-config.test.js

@@ -36,13 +36,17 @@ async function build() {
 // Tests include multiple assertions since running multiple builds is time consuming
 
 describe(`gatsby-config.js`, () => {
-  afterEach(() => {
-    fs.rmSync(configPath.cjs)
+  afterEach(async () => {
+    await fs.rm(configPath.cjs)
+    await fs.rm(localPluginTargetDir, { recursive: true })
   })
 
   it(`works with required CJS modules`, async () => {
     await fs.copyFile(fixturePath.cjs, configPath.cjs)
 
+    await fs.ensureDir(localPluginTargetDir)
+    await fs.copy(localPluginFixtureDir, localPluginTargetDir)
+
     const stdout = await build()
 
     // Build succeeded
@@ -51,6 +55,9 @@ describe(`gatsby-config.js`, () => {
     // Requires work
     expect(stdout).toContain(`hello-default-cjs`)
     expect(stdout).toContain(`hello-named-cjs`)
+
+    // Local gatsby-remark-plugin works
+    expect(stdout).toContain(`gatsby-remark-cjs-gatsby-config-js`)
   })
 })
 
@@ -78,6 +85,9 @@ describe(`gatsby-config.mjs`, () => {
     // Local plugin gatsby-config.mjs works
     expect(stdout).toContain(`a-local-plugin-gatsby-config-mjs`)
 
+    // Local ESM gatsby-remark-plugin works
+    expect(stdout).toContain(`gatsby-remark-esm-gatsby-config-mjs`)
+
     // Local plugin with an esm module passed via options works, this implicitly tests gatsby-node.mjs too
     expect(stdout).toContain(`a-local-plugin-using-passed-esm-module`)
   })

integration-tests/esm-in-gatsby-files/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "gatsby": "next",
+    "gatsby-transformer-remark": "next",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/gatsby/babel.config.js

@@ -7,9 +7,10 @@ module.exports = {
     keepDynamicImports: [
       `./src/utils/feedback.ts`,
 
-      // These files use dynamic imports to load gatsby-config and gatsby-node so esm works
+      // These files use dynamic imports to load gatsby-config, gatsby-node, and subPlugins so esm works
       `./src/bootstrap/get-config-file.ts`,
       `./src/bootstrap/resolve-module-exports.ts`,
+      `./src/bootstrap/load-plugins/validate.ts`,
       `./src/utils/import-gatsby-plugin.ts`
     ]
   }]],

packages/gatsby/src/bootstrap/load-plugins/validate.ts

@@ -19,6 +19,7 @@ import {
   ISiteConfig,
 } from "./types"
 import { resolvePlugin } from "./resolve-plugin"
+import { preferDefault } from "../prefer-default"
 
 interface IApi {
   version?: string
@@ -178,6 +179,27 @@ export async function handleBadExports({
   }
 }
 
+interface ISubPluginCustomReturn {
+  resolve: string
+  modulePath: string
+  options: {
+    [key: string]: unknown
+  }
+  module: any
+}
+
+const addModuleImport = async (
+  value: Array<ISubPluginCustomReturn>
+): Promise<Array<ISubPluginCustomReturn>> => {
+  for (const plugin of value) {
+    const importedModule = await import(plugin.modulePath)
+    const pluginModule = preferDefault(importedModule)
+    plugin.module = pluginModule
+  }
+
+  return value
+}
+
 async function validatePluginsOptions(
   plugins: Array<IPluginRefObject>,
   rootDir: string
@@ -233,7 +255,6 @@ async function validatePluginsOptions(
                       `${resolvedPlugin.resolve}${entry ? `/${entry}` : ``}`
                     )
                     value.modulePath = modulePath
-                    value.module = require(modulePath)
 
                     const normalizedPath = helpers.state.path
                       .map((key, index) => {
@@ -266,7 +287,8 @@ async function validatePluginsOptions(
                   return value
                 })
               }, `Gatsby specific subplugin validation`)
-              .default([]),
+              .default([])
+              .external(addModuleImport, `add module key to subplugin`),
             args: (schema: any, args: any): any => {
               if (
                 args?.entry &&