fix(gatsby): Panic on gatsby-node.jsx/gatsby-node.tsx (#36308)

Co-authored-by: Michal Piechowiak <[email protected]>

Author: LekoArts

packages/gatsby-cli/src/structured-errors/error-map.ts

@@ -358,7 +358,9 @@ const errors = {
   },
   "10124": {
     text: (context): string =>
-      `It looks like you were trying to add the config file? Please rename "${context.nearMatch}" to "${context.configName}.js"`,
+      `It looks like you were trying to add the config file? Please rename "${
+        context.nearMatch
+      }" to "${context.configName}.${context.isTSX ? `ts` : `js`}"`,
     type: Type.CONFIG,
     level: Level.ERROR,
     category: ErrorCategory.USER,
@@ -388,6 +390,15 @@ const errors = {
     level: Level.ERROR,
     category: ErrorCategory.USER,
   },
+  "10128": {
+    text: (context): string =>
+      `It looks like you were trying to add the gatsby-node file? Please rename "${
+        context.nearMatch
+      }" to "${context.configName}.${context.isTSX ? `ts` : `js`}"`,
+    type: Type.CONFIG,
+    level: Level.ERROR,
+    category: ErrorCategory.USER,
+  },
   "10226": {
     text: (context): string =>
       [

packages/gatsby/src/bootstrap/__mocks__/get-config/tsx-dir/gatsby-confi.tsx

@@ -0,0 +1,13 @@
+// `gatsby-confi.tsx` name is intentional. This is used for testing misspelled `gatsby-config` errors
+
+import type { GatsbyConfig } from "gatsby"
+
+const config: GatsbyConfig = {
+  siteMetadata: {
+    title: `ts`,
+    siteUrl: `https://www.yourdomain.tld`,
+  },
+  plugins: [],
+}
+
+export default config

packages/gatsby/src/bootstrap/__tests__/get-config-file.ts

@@ -1,5 +1,5 @@
 import path from "path"
-import { isNearMatch, getConfigFile } from "../get-config-file"
+import { getConfigFile } from "../get-config-file"
 import { testRequireError } from "../../utils/test-require-error"
 import reporter from "gatsby-cli/lib/reporter"
 
@@ -41,25 +41,12 @@ const reporterPanicMock = reporter.panic as jest.MockedFunction<
   typeof reporter.panic
 >
 
-describe(`isNearMatch`, () => {
-  it(`should NOT find a near match if file name is undefined`, () => {
-    const nearMatchA = isNearMatch(undefined, `gatsby-config`, 1)
-    expect(nearMatchA).toBeFalse()
-  })
-
-  it(`should calculate near matches based on distance`, () => {
-    const nearMatchA = isNearMatch(`gatsby-config`, `gatsby-conf`, 2)
-    const nearMatchB = isNearMatch(`gatsby-config`, `gatsby-configur`, 2)
-    expect(nearMatchA).toBeTrue()
-    expect(nearMatchB).toBeTrue()
-  })
-})
-
 // Separate config directories so cases can be tested separately
 const dir = path.resolve(__dirname, `../__mocks__/get-config`)
 const compiledDir = `${dir}/compiled-dir`
 const userRequireDir = `${dir}/user-require-dir`
 const tsDir = `${dir}/ts-dir`
+const tsxDir = `${dir}/tsx-dir`
 const nearMatchDir = `${dir}/near-match-dir`
 const srcDir = `${dir}/src-dir`
 
@@ -144,11 +131,28 @@ describe(`getConfigFile`, () => {
       error: expect.toBeObject(),
       context: {
         configName: `gatsby-config`,
+        isTSX: false,
         nearMatch: `gatsby-confi.js`,
       },
     })
   })
 
+  it(`should handle .tsx extension`, async () => {
+    testRequireErrorMock.mockImplementationOnce(() => true)
+
+    await getConfigFile(tsxDir, `gatsby-config`)
+
+    expect(reporterPanicMock).toBeCalledWith({
+      id: `10124`,
+      error: expect.toBeObject(),
+      context: {
+        configName: `gatsby-config`,
+        isTSX: true,
+        nearMatch: `gatsby-confi.tsx`,
+      },
+    })
+  })
+
   it(`should handle gatsby config incorrectly located in src dir`, async () => {
     testRequireErrorMock.mockImplementationOnce(() => true)
 

packages/gatsby/src/bootstrap/get-config-file.ts

@@ -1,19 +1,10 @@
-import { distance as levenshtein } from "fastest-levenshtein"
 import fs from "fs-extra"
 import { testRequireError } from "../utils/test-require-error"
 import report from "gatsby-cli/lib/reporter"
 import path from "path"
 import { sync as existsSync } from "fs-exists-cached"
 import { COMPILED_CACHE_DIR } from "../utils/parcel/compile-gatsby-files"
-
-export function isNearMatch(
-  fileName: string | undefined,
-  configName: string,
-  distance: number
-): boolean {
-  if (!fileName) return false
-  return levenshtein(fileName, configName) <= distance
-}
+import { isNearMatch } from "../utils/is-near-match"
 
 export async function getConfigFile(
   siteDirectory: string,
@@ -108,12 +99,14 @@ export async function getConfigFile(
 
       // gatsby-config is misnamed
       if (nearMatch) {
+        const isTSX = nearMatch.endsWith(`.tsx`)
         report.panic({
           id: `10124`,
           error: innerError,
           context: {
             configName,
             nearMatch,
+            isTSX,
           },
         })
       }

packages/gatsby/src/utils/__tests__/is-near-match.ts

@@ -0,0 +1,15 @@
+import { isNearMatch } from "../is-near-match"
+
+describe(`isNearMatch`, () => {
+  it(`should NOT find a near match if file name is undefined`, () => {
+    const nearMatchA = isNearMatch(undefined, `gatsby-config`, 1)
+    expect(nearMatchA).toBeFalse()
+  })
+
+  it(`should calculate near matches based on distance`, () => {
+    const nearMatchA = isNearMatch(`gatsby-config`, `gatsby-conf`, 2)
+    const nearMatchB = isNearMatch(`gatsby-config`, `gatsby-configur`, 2)
+    expect(nearMatchA).toBeTrue()
+    expect(nearMatchB).toBeTrue()
+  })
+})

packages/gatsby/src/utils/is-near-match.ts

@@ -0,0 +1,10 @@
+import { distance as levenshtein } from "fastest-levenshtein"
+
+export function isNearMatch(
+  fileName: string | undefined,
+  configName: string,
+  distance: number
+): boolean {
+  if (!fileName) return false
+  return levenshtein(fileName, configName) <= distance
+}

packages/gatsby/src/utils/parcel/__tests__/compile-gatsby-files.ts

@@ -9,11 +9,14 @@ import {
 import { siteMetadata } from "./fixtures/utils/site-metadata"
 import { moreDataConfig } from "./fixtures/utils/more-data-config"
 import { readFile, remove, pathExists } from "fs-extra"
+import reporter from "gatsby-cli/lib/reporter"
 
 const dir = {
   js: `${__dirname}/fixtures/js`,
   ts: `${__dirname}/fixtures/ts`,
   tsOnlyInLocal: `${__dirname}/fixtures/ts-only-in-local-plugin`,
+  misnamedJS: `${__dirname}/fixtures/misnamed-js`,
+  misnamedTS: `${__dirname}/fixtures/misnamed-ts`,
 }
 
 jest.setTimeout(15000)
@@ -36,6 +39,16 @@ jest.mock(`@parcel/core`, () => {
   }
 })
 
+jest.mock(`gatsby-cli/lib/reporter`, () => {
+  return {
+    panic: jest.fn(),
+  }
+})
+
+const reporterPanicMock = reporter.panic as jest.MockedFunction<
+  typeof reporter.panic
+>
+
 interface IMockedParcel extends Parcel {
   options: unknown
 }
@@ -77,18 +90,24 @@ describe(`gatsby file compilation`, () => {
         await compileGatsbyFiles(dir.js)
       })
 
+      beforeEach(() => {
+        reporterPanicMock.mockClear()
+      })
+
       it(`should not compile gatsby-config.js`, async () => {
         const isCompiled = await pathExists(
           `${dir.js}/.cache/compiled/gatsby-config.js`
         )
         expect(isCompiled).toEqual(false)
+        expect(reporterPanicMock).not.toHaveBeenCalled()
       })
 
       it(`should not compile gatsby-node.js`, async () => {
         const isCompiled = await pathExists(
           `${dir.js}/.cache/compiled/gatsby-node.js`
         )
         expect(isCompiled).toEqual(false)
+        expect(reporterPanicMock).not.toHaveBeenCalled()
       })
     })
 
@@ -99,6 +118,10 @@ describe(`gatsby file compilation`, () => {
         await compileGatsbyFiles(dir.ts)
       })
 
+      beforeEach(() => {
+        reporterPanicMock.mockClear()
+      })
+
       it(`should compile gatsby-config.ts`, async () => {
         const compiledGatsbyConfig = await readFile(
           `${dir.ts}/.cache/compiled/gatsby-config.js`,
@@ -108,6 +131,7 @@ describe(`gatsby file compilation`, () => {
         expect(compiledGatsbyConfig).toContain(siteMetadata.title)
         expect(compiledGatsbyConfig).toContain(siteMetadata.siteUrl)
         expect(compiledGatsbyConfig).toContain(moreDataConfig.options.name)
+        expect(reporterPanicMock).not.toHaveBeenCalled()
       })
 
       it(`should compile gatsby-node.ts`, async () => {
@@ -117,6 +141,7 @@ describe(`gatsby file compilation`, () => {
         )
 
         expect(compiledGatsbyNode).toContain(`I am working!`)
+        expect(reporterPanicMock).not.toHaveBeenCalled()
       })
     })
 
@@ -147,3 +172,37 @@ describe(`gatsby file compilation`, () => {
     })
   })
 })
+
+describe(`misnamed gatsby-node files`, () => {
+  beforeEach(() => {
+    reporterPanicMock.mockClear()
+  })
+  it(`should panic on gatsby-node.jsx`, async () => {
+    process.chdir(dir.misnamedJS)
+    await remove(`${dir.misnamedJS}/.cache`)
+    await compileGatsbyFiles(dir.misnamedJS)
+
+    expect(reporterPanicMock).toBeCalledWith({
+      id: `10128`,
+      context: {
+        configName: `gatsby-node`,
+        isTSX: false,
+        nearMatch: `gatsby-node.jsx`,
+      },
+    })
+  })
+  it(`should panic on gatsby-node.tsx`, async () => {
+    process.chdir(dir.misnamedTS)
+    await remove(`${dir.misnamedTS}/.cache`)
+    await compileGatsbyFiles(dir.misnamedTS)
+
+    expect(reporterPanicMock).toBeCalledWith({
+      id: `10128`,
+      context: {
+        configName: `gatsby-node`,
+        isTSX: true,
+        nearMatch: `gatsby-node.tsx`,
+      },
+    })
+  })
+})

packages/gatsby/src/utils/parcel/__tests__/fixtures/misnamed-js/gatsby-node.jsx

@@ -0,0 +1,39 @@
+import { working } from "../utils/say-what"
+import { createPages } from "../utils/create-pages"
+
+export const onPreInit = ({ reporter }) => {
+  reporter.info(working)
+}
+
+export const sourceNodes = async ({ actions, createNodeId, createContentDigest }) => {
+  const { createNode } = actions
+
+  let characters = [
+    {
+      id: `0`,
+      name: `A`
+    },
+    {
+      id: `1`,
+      name: `B`
+    }
+  ]
+
+  characters.forEach((character) => {
+    const node = {
+      ...character,
+      id: createNodeId(`characters-${character.id}`),
+      parent: null,
+      children: [],
+      internal: {
+        type: 'Character',
+        content: JSON.stringify(character),
+        contentDigest: createContentDigest(character),
+      },
+    }
+
+    createNode(node)
+  })
+}
+
+export { createPages }

packages/gatsby/src/utils/parcel/__tests__/fixtures/misnamed-ts/gatsby-node.tsx

@@ -0,0 +1,45 @@
+import { GatsbyNode } from "gatsby"
+import { working } from "../utils/say-what-ts"
+import { createPages } from "../utils/create-pages-ts"
+
+export const onPreInit: GatsbyNode["onPreInit"] = ({ reporter }) => {
+  reporter.info(working)
+}
+
+type Character = {
+  id: string
+  name: string
+}
+
+export const sourceNodes: GatsbyNode["sourceNodes"] = async ({ actions, createNodeId, createContentDigest }) => {
+  const { createNode } = actions
+
+  let characters: Array<Character> = [
+    {
+      id: `0`,
+      name: `A`
+    },
+    {
+      id: `1`,
+      name: `B`
+    }
+  ]
+
+  characters.forEach((character: Character) => {
+    const node = {
+      ...character,
+      id: createNodeId(`characters-${character.id}`),
+      parent: null,
+      children: [],
+      internal: {
+        type: 'Character',
+        content: JSON.stringify(character),
+        contentDigest: createContentDigest(character),
+      },
+    }
+
+    createNode(node)
+  })
+}
+
+export { createPages }