feat(gatsby): ESM in gatsby-config.mjs and gatsby-node.mjs

.circleci/config.yml

@@ -306,6 +306,13 @@ jobs:
           test_path: integration-tests/head-function-export
           test_command: yarn test
 
+  integration_tests_esm_in_gatsby_files:
+    executor: node
+    steps:
+      - e2e-test:
+          test_path: integration-tests/esm-in-gatsby-files
+          test_command: yarn test
+
   e2e_tests_path-prefix:
     <<: *e2e-executor
     environment:
@@ -592,6 +599,8 @@ workflows:
           <<: *e2e-test-workflow
       - integration_tests_head_function_export:
           <<: *e2e-test-workflow
+      - integration_tests_esm_in_gatsby_files:
+          <<: *e2e-test-workflow
       - integration_tests_gatsby_cli:
           requires:
             - bootstrap

e2e-tests/mdx/cypress/integration/using-esm-only-remark-rehype-plugins.js

@@ -0,0 +1,15 @@
+describe(`ESM only Rehype & Remark plugins`, () => {
+  describe("Remark Plugin", () => {
+    it(`transforms to github-like checkbox list`, () => {
+      cy.visit(`/using-esm-only-rehype-remark-plugins/`).waitForRouteChange()
+      cy.get(`.task-list-item`).should("have.length", 2)
+    })
+  })
+
+  describe("Rehype Plugin", () => {
+    it(`use heading text as id `, () => {
+      cy.visit(`/using-esm-only-rehype-remark-plugins/`).waitForRouteChange()
+      cy.get(`#heading-two`).invoke(`text`).should(`eq`, `Heading two`)
+    })
+  })
+})

e2e-tests/mdx/gatsby-config.js → e2e-tests/mdx/gatsby-config.mjs

@@ -1,4 +1,11 @@
-module.exports = {
+import remarkGfm from "remark-gfm"
+import rehypeSlug from "rehype-slug"
+import { dirname } from "path"
+import { fileURLToPath } from "url"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const config = {
   siteMetadata: {
     title: `Gatsby MDX e2e`,
   },
@@ -28,7 +35,16 @@ module.exports = {
           `gatsby-remark-autolink-headers`,
         ],
         mdxOptions: {
-          remarkPlugins: [remarkRequireFilePathPlugin],
+          remarkPlugins: [
+            remarkRequireFilePathPlugin,
+            // This is an esm only packages, It should work out of the box
+            remarkGfm,
+          ],
+
+          rehypePlugins: [
+            // This is an esm only packages, It should work out of the box
+            rehypeSlug,
+          ],
         },
       },
     },
@@ -47,3 +63,5 @@ function remarkRequireFilePathPlugin() {
     }
   }
 }
+
+export default config

e2e-tests/mdx/package.json

@@ -16,6 +16,8 @@
     "gatsby-source-filesystem": "next",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rehype-slug": "^5.1.0",
+    "remark-gfm": "^3.0.1",
     "theme-ui": "^0.3.1"
   },
   "keywords": [

e2e-tests/mdx/src/pages/using-esm-only-rehype-remark-plugins.mdx

@@ -0,0 +1,8 @@
+---
+title: Using esm only rehype & rehype plugins
+---
+
+## Heading two
+
+- [ ] A
+- [x] B

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

@@ -0,0 +1,8 @@
+__tests__/__debug__
+node_modules
+yarn.lock
+
+# These are removed and created during the test lifecycle
+./gatsby-config.js
+./gatsby-config.mjs
+./gatsby-config.ts

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

@@ -0,0 +1,13 @@
+// This fixture is moved during the test lifecycle
+
+const helloDefaultCJS = require(`./cjs-default.js`)
+const { helloNamedCJS } = require(`./cjs-named.js`)
+
+helloDefaultCJS()
+helloNamedCJS()
+
+const config = {
+  plugins: [],
+}
+
+module.exports = config

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

@@ -0,0 +1,21 @@
+// This fixture is moved during the test lifecycle
+
+import slugify from "@sindresorhus/slugify";
+import helloDefaultESM from "./esm-default.mjs"
+import { helloNamedESM } from "./esm-named.mjs"
+
+helloDefaultESM()
+helloNamedESM()
+
+const config = {
+  plugins: [
+    {
+      resolve: `a-local-plugin`,
+      options: {
+        slugify,
+      },
+    },
+  ],
+}
+
+export default config

integration-tests/esm-in-gatsby-files/__tests__/fixtures/gatsby-node-engine-bundled.mjs

@@ -0,0 +1,12 @@
+const createResolvers = ({ createResolvers }) => {
+  createResolvers({
+    Query: {
+      fieldAddedByESMPlugin: {
+        type: `String`,
+        resolve: () => `gatsby-node-engine-bundled-mjs`
+      }
+    }
+  })
+}
+
+export { createResolvers } 

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

@@ -0,0 +1,11 @@
+// This fixture is moved during the test lifecycle
+
+const helloDefaultCJS = require(`./cjs-default.js`)
+const { helloNamedCJS } = require(`./cjs-named.js`)
+
+helloDefaultCJS()
+helloNamedCJS()
+
+exports.onPreBuild = () => {
+  console.info(`gatsby-node-cjs-on-pre-build`);
+};

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

@@ -0,0 +1,11 @@
+// This fixture is moved during the test lifecycle
+
+import helloDefaultESM from "./esm-default.mjs"
+import { helloNamedESM } from "./esm-named.mjs"
+
+helloDefaultESM()
+helloNamedESM()
+
+export const onPreBuild = () => {
+  console.info(`gatsby-node-esm-on-pre-build`);
+};

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

@@ -0,0 +1,22 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+function SSRPage({ data, serverData }) {
+  return <pre>{JSON.stringify({ data, serverData }, null, 2)}</pre>
+}
+
+export const query = graphql`
+  {
+    fieldAddedByESMPlugin
+  }
+`
+
+export const getServerData = () => {
+  return {
+    props: {
+      ssr: true,
+    },
+  }
+}
+
+export default SSRPage

integration-tests/esm-in-gatsby-files/__tests__/fixtures/plugins/a-local-plugin/gatsby-config.mjs

@@ -0,0 +1,9 @@
+// This fixture is moved during the test lifecycle
+
+console.info(`a-local-plugin-gatsby-config-mjs`)
+
+const config = {
+  plugins: [],
+}
+
+export default config

integration-tests/esm-in-gatsby-files/__tests__/fixtures/plugins/a-local-plugin/gatsby-node.mjs

@@ -0,0 +1,3 @@
+export const onPreBuild = (_, { slugify }) => {
+  console.info(slugify(`a local plugin using passed esm module`));
+};

integration-tests/esm-in-gatsby-files/__tests__/fixtures/plugins/a-local-plugin/index.js

@@ -0,0 +1 @@
+// noop

integration-tests/esm-in-gatsby-files/__tests__/fixtures/plugins/a-local-plugin/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "a-local-plugin",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

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

@@ -0,0 +1,84 @@
+import path from "path"
+import fs from "fs-extra"
+import execa from "execa"
+
+jest.setTimeout(100000)
+
+const fixtureRoot = path.resolve(__dirname, `fixtures`)
+const siteRoot = path.resolve(__dirname, `..`)
+
+const fixturePath = {
+  cjs: path.join(fixtureRoot, `gatsby-config.js`),
+  esm: path.join(fixtureRoot, `gatsby-config.mjs`),
+}
+
+const configPath = {
+  cjs: path.join(siteRoot, `gatsby-config.js`),
+  esm: path.join(siteRoot, `gatsby-config.mjs`),
+}
+
+const localPluginFixtureDir = path.join(fixtureRoot, `plugins`)
+const localPluginTargetDir = path.join(siteRoot, `plugins`)
+
+const gatsbyBin = path.join(`node_modules`, `gatsby`, `cli.js`)
+
+async function build() {
+  const { stdout } = await execa(process.execPath, [gatsbyBin, `build`], {
+    env: {
+      ...process.env,
+      NODE_ENV: `production`,
+    },
+  })
+
+  return stdout
+}
+
+// Tests include multiple assertions since running multiple builds is time consuming
+
+describe(`gatsby-config.js`, () => {
+  afterEach(() => {
+    fs.rmSync(configPath.cjs)
+  })
+
+  it(`works with required CJS modules`, async () => {
+    await fs.copyFile(fixturePath.cjs, configPath.cjs)
+
+    const stdout = await build()
+
+    // Build succeeded
+    expect(stdout).toContain(`Done building`)
+
+    // Requires work
+    expect(stdout).toContain(`hello-default-cjs`)
+    expect(stdout).toContain(`hello-named-cjs`)
+  })
+})
+
+describe(`gatsby-config.mjs`, () => {
+  afterEach(async () => {
+    await fs.rm(configPath.esm)
+    await fs.rm(localPluginTargetDir, { recursive: true })
+  })
+
+  it(`works with imported ESM modules`, async () => {
+    await fs.copyFile(fixturePath.esm, configPath.esm)
+
+    await fs.ensureDir(localPluginTargetDir)
+    await fs.copy(localPluginFixtureDir, localPluginTargetDir)
+
+    const stdout = await build()
+
+    // Build succeeded
+    expect(stdout).toContain(`Done building`)
+
+    // Imports work
+    expect(stdout).toContain(`hello-default-esm`)
+    expect(stdout).toContain(`hello-named-esm`)
+
+    // Local plugin gatsby-config.mjs works
+    expect(stdout).toContain(`a-local-plugin-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`)
+  })
+})