[static-build] add support for gatsby esm config (#9183)

Adds support for auto injection into Gatsby's new ESM config format. Only injects if the `gatsby-config.mjs` is present, and continues to default generation of `gatsby-config.js`

packages/static-build/src/utils/gatsby.ts

@@ -25,7 +25,9 @@ export async function injectVercelAnalyticsPlugin(dir: string): Promise<void> {
   process.env.GATSBY_VERCEL_ANALYTICS_ID = process.env.VERCEL_ANALYTICS_ID;
 
   const gatsbyConfigPathJs = path.join(dir, `${GATSBY_CONFIG_FILE}.js`);
+  const gatsbyConfigPathMjs = path.join(dir, `${GATSBY_CONFIG_FILE}.mjs`);
   const gatsbyConfigPathTs = path.join(dir, `${GATSBY_CONFIG_FILE}.ts`);
+
   if (await fileExists(gatsbyConfigPathTs)) {
     console.log(
       `Injecting Gatsby.js analytics plugin "${GATSBY_PLUGIN_PACKAGE_NAME}" to \`${gatsbyConfigPathTs}\``
@@ -34,6 +36,14 @@ export async function injectVercelAnalyticsPlugin(dir: string): Promise<void> {
     return updateGatsbyTsConfig(gatsbyConfigPathTs);
   }
 
+  if (await fileExists(gatsbyConfigPathMjs)) {
+    console.log(
+      `Injecting Gatsby.js analytics plugin "${GATSBY_PLUGIN_PACKAGE_NAME}" to \`${gatsbyConfigPathMjs}\``
+    );
+    await addGatsbyPackage(dir);
+    return updateGatsbyMjsConfig(gatsbyConfigPathMjs);
+  }
+
   console.log(
     `Injecting Gatsby.js analytics plugin "${GATSBY_PLUGIN_PACKAGE_NAME}" to \`${gatsbyConfigPathJs}\``
   );
@@ -102,6 +112,44 @@ export default vercelConfig;
   );
 }
 
+async function updateGatsbyMjsConfig(configPath: string): Promise<void> {
+  await fs.rename(configPath, configPath + '.__vercel_builder_backup__.mjs');
+
+  await fs.writeFile(
+    configPath,
+    `import userConfig from "./gatsby-config.mjs.__vercel_builder_backup__.mjs";
+
+// https://github.com/gatsbyjs/gatsby/blob/354003fb2908e02ff12109ca3a02978a5a6e608c/packages/gatsby/src/bootstrap/prefer-default.ts
+const preferDefault = (m) => (m && m.default) || m;
+
+const vercelConfig = Object.assign(
+  {},
+
+  // https://github.com/gatsbyjs/gatsby/blob/a6ecfb2b01d761e8a3612b8ea132c698659923d9/packages/gatsby/src/services/initialize.ts#L113-L117
+  preferDefault(userConfig)
+);
+if (!vercelConfig.plugins) {
+  vercelConfig.plugins = [];
+}
+
+const hasPlugin = vercelConfig.plugins.find(
+  (p) =>
+    p && (p === "gatsby-plugin-vercel" || p.resolve === "gatsby-plugin-vercel")
+);
+
+if (!hasPlugin) {
+  vercelConfig.plugins = vercelConfig.plugins.slice();
+  vercelConfig.plugins.push({
+    resolve: "gatsby-plugin-vercel",
+    options: {},
+  });
+}
+
+export default vercelConfig;
+`
+  );
+}
+
 async function updateGatsbyJsConfig(configPath: string): Promise<void> {
   await fs.rename(configPath, configPath + '.__vercel_builder_backup__.js');
 

packages/static-build/test/build-fixtures/14-gatsby-with-esm-config/gatsby-config.mjs

@@ -0,0 +1,7 @@
+export default {
+  siteMetadata: {
+    title: `Gatsby ESM Config`,
+    siteUrl: `https://gatsby-esm-config.vercel.app`,
+  },
+  plugins: [],
+};

packages/static-build/test/build-fixtures/14-gatsby-with-esm-config/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "scripts": {
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  },
+  "dependencies": {
+    "gatsby": "5.3.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "engines": {
+    "node": "18.x"
+  }
+}

packages/static-build/test/build-fixtures/14-gatsby-with-esm-config/src/pages/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import '../styles/index.css';
+
+function Index() {
+  return (
+    <main>
+      <h1>Gatsby + API Route</h1>
+      <h2>
+        Deployed with{' '}
+        <a
+          href="https://vercel.com/docs"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          Vercel
+        </a>
+        !
+      </h2>
+      <p>
+        This project is a <a href="https://www.gatsbyjs.org/">Gatsby</a> app
+        with typescript gatsby-config.ts.
+      </p>
+    </main>
+  );
+}
+
+export default Index;

packages/static-build/test/build-fixtures/14-gatsby-with-esm-config/src/styles/index.css

@@ -0,0 +1,44 @@
+main {
+  align-content: center;
+  box-sizing: border-box;
+  display: grid;
+  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
+    'Arial', sans-serif;
+  hyphens: auto;
+  line-height: 1.65;
+  margin: 0 auto;
+  max-width: 680px;
+  min-height: 100vh;
+  padding: 72px 0;
+  text-align: center;
+}
+h1 {
+  font-size: 45px;
+}
+h2 {
+  margin-top: 1.5em;
+}
+p {
+  font-size: 16px;
+}
+a {
+  border-bottom: 1px solid white;
+  color: #0076ff;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+a:hover {
+  border-bottom: 1px solid #0076ff;
+}
+code,
+pre {
+  color: #d400ff;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace, serif;
+  font-size: 0.92em;
+}
+code:before,
+code:after {
+  content: '\`';
+}

packages/static-build/test/build-fixtures/14-gatsby-with-esm-config/vercel.json

@@ -0,0 +1,13 @@
+{
+  "version": 2,
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@vercel/static-build",
+      "config": {
+        "zeroConfig": true,
+        "framework": "gatsby"
+      }
+    }
+  ]
+}

packages/static-build/test/builds.test.js

@@ -290,6 +290,54 @@ it(
   FOUR_MINUTES
 );
 
+it(
+  'Should build Gatsby with configuration defined in esm',
+  async () => {
+    const { workPath } = await runBuildLambda(
+      path.join(__dirname, 'build-fixtures/14-gatsby-with-esm-config')
+    );
+
+    const contents = await fs.readdir(workPath);
+
+    expect(contents.some(name => name === 'gatsby-config.js')).toBeFalsy();
+    expect(contents.some(name => name === 'gatsby-config.ts')).toBeFalsy();
+    expect(contents.some(name => name === 'gatsby-config.mjs')).toBeTruthy();
+    // using `import` causes a seg fault.
+    expect(await fs.readFile(path.join(workPath, 'gatsby-config.mjs'), 'utf-8'))
+      .toBe(`import userConfig from "./gatsby-config.mjs.__vercel_builder_backup__.mjs";
+
+// https://github.com/gatsbyjs/gatsby/blob/354003fb2908e02ff12109ca3a02978a5a6e608c/packages/gatsby/src/bootstrap/prefer-default.ts
+const preferDefault = (m) => (m && m.default) || m;
+
+const vercelConfig = Object.assign(
+  {},
+
+  // https://github.com/gatsbyjs/gatsby/blob/a6ecfb2b01d761e8a3612b8ea132c698659923d9/packages/gatsby/src/services/initialize.ts#L113-L117
+  preferDefault(userConfig)
+);
+if (!vercelConfig.plugins) {
+  vercelConfig.plugins = [];
+}
+
+const hasPlugin = vercelConfig.plugins.find(
+  (p) =>
+    p && (p === "gatsby-plugin-vercel" || p.resolve === "gatsby-plugin-vercel")
+);
+
+if (!hasPlugin) {
+  vercelConfig.plugins = vercelConfig.plugins.slice();
+  vercelConfig.plugins.push({
+    resolve: "gatsby-plugin-vercel",
+    options: {},
+  });
+}
+
+export default vercelConfig;
+`);
+  },
+  FOUR_MINUTES
+);
+
 it(
   'Should build Nuxt.js with "@nuxtjs/web-vitals" plugin',
   async () => {