feat(gatsby): support node: protocol when bundling engines (#36506)

Co-authored-by: Josh Johnson <[email protected]>

Author: pieh

e2e-tests/production-runtime/cypress/integration/ssr.js

@@ -173,3 +173,15 @@ describe(`500 status`, () => {
       .should(`exist`)
   })
 })
+
+describe(`"node:" protocol`, () => {
+  it(`engines work when bundled code contains node:path import`, () => {
+    cy.visit(`/ssr/using-node-protocol/`).waitForRouteChange()
+
+    // validating that this page was rendered with SSR mode
+    cy.getTestElement(`is-ssr`).contains(`true`)
+
+    // content of field is generated using `node:path` import
+    cy.getTestElement(`field-result`).contains(`"foo/bar"`)
+  })
+})

e2e-tests/production-runtime/gatsby-config.js

@@ -26,6 +26,7 @@ module.exports = {
     },
     `gatsby-plugin-local-worker`,
     `gatsby-ssr-tsx`,
+    `gatsby-plugin-node-protocol-test`,
     `gatsby-plugin-image`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-sass`,

e2e-tests/production-runtime/package.json

@@ -27,7 +27,7 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "cross-env GATSBY_PREFIXED_FROM_COMMAND_LINE=YES FROM_COMMAND_LINE=YES CYPRESS_SUPPORT=y gatsby build",
+    "build": "cross-env GATSBY_PREFIXED_FROM_COMMAND_LINE=YES FROM_COMMAND_LINE=YES CYPRESS_SUPPORT=y NODE_OPTIONS='--require ./polyfill-node-protocol-imports.js' gatsby build",
     "build:offline": "cross-env GATSBY_PREFIXED_FROM_COMMAND_LINE=YES FROM_COMMAND_LINE=YES TEST_PLUGIN_OFFLINE=y CYPRESS_SUPPORT=y gatsby build",
     "develop": "cross-env CYPRESS_SUPPORT=y gatsby develop",
     "format": "prettier --write '**/*.js' --ignore-path .gitignore",
@@ -66,4 +66,4 @@
     "type": "git",
     "url": "https://github.com/gatsbyjs/gatsby-starter-default"
   }
-}
+}

e2e-tests/production-runtime/plugins/gatsby-plugin-node-protocol-test/gatsby-node.js

@@ -0,0 +1,18 @@
+const path = require(`node:path`)
+
+exports.createResolvers = ({ createResolvers }) => {
+  createResolvers({
+    Query: {
+      fieldWithResolverThatMakeUseOfImportWithNodeProtocol: {
+        type: `String`,
+        args: {
+          left: `String!`,
+          right: `String!`,
+        },
+        resolve: (_, args) => {
+          return path.posix.join(args.left, args.right)
+        },
+      },
+    },
+  })
+}

e2e-tests/production-runtime/plugins/gatsby-plugin-node-protocol-test/index.js

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

e2e-tests/production-runtime/plugins/gatsby-plugin-node-protocol-test/package.json

@@ -0,0 +1 @@
+{}

e2e-tests/production-runtime/polyfill-node-protocol-imports.js

@@ -0,0 +1,21 @@
+// this polyfill adds support for "require('node:<node_builtin>')" imports
+// this feature is available in Node v14.18.0+ and v16.0.0+
+// gatsby's minimal version (v14.15.0) does not support this feature
+// so the environment we run our e2e tests in doesn't support it
+// and we need to use polyfill to test if our bundlers support it correctly
+
+// this file is injected with NODE_OPTIONS env var via package.json's
+// "build" script
+
+try {
+  require(`node:path`)
+} catch (e) {
+  const mod = require("module")
+  const originalModuleLoad = mod._load
+  mod._load = (request, parent, isMain) => {
+    if (request.startsWith(`node:`)) {
+      request = request.replace(`node:`, ``)
+    }
+    return originalModuleLoad(request, parent, isMain)
+  }
+}

e2e-tests/production-runtime/src/pages/ssr/using-node-protocol.js

@@ -0,0 +1,35 @@
+import React from "react"
+import { graphql } from "gatsby"
+
+export default function StaticPath({ data, serverData }) {
+  return (
+    <>
+      <pre data-testid="field-result">
+        {JSON.stringify(
+          data?.fieldWithResolverThatMakeUseOfImportWithNodeProtocol
+        )}
+      </pre>
+      <pre data-testid="is-ssr">
+        {JSON.stringify(serverData?.usingEngines ?? false)}
+      </pre>
+    </>
+  )
+}
+
+// just mark it as page that will use engine
+export async function getServerData() {
+  return {
+    props: {
+      usingEngines: true,
+    },
+  }
+}
+
+export const q = graphql`
+  {
+    fieldWithResolverThatMakeUseOfImportWithNodeProtocol(
+      left: "foo"
+      right: "bar"
+    )
+  }
+`

packages/gatsby/src/schema/graphql-engine/bundle-webpack.ts

@@ -86,8 +86,10 @@ export async function createGraphqlEngineBundle(
       mod.builtinModules.reduce((acc, builtinModule) => {
         if (builtinModule === `fs`) {
           acc[builtinModule] = `global _actualFsWrapper`
+          acc[`node:${builtinModule}`] = `global _actualFsWrapper`
         } else {
           acc[builtinModule] = `commonjs ${builtinModule}`
+          acc[`node:${builtinModule}`] = `commonjs ${builtinModule}`
         }
 
         return acc