fix(babel): Improved message for error relating to multiple files ending in Page.{js,jsx,ts,tsx} in page directories

packages/babel-config/src/plugins/__tests__/__fixtures__/route-auto-loader/failure/redwood.toml

@@ -0,0 +1,10 @@
+[web]
+  port = 8910
+  apiProxyPath = "/api/functions"
+
+[api]
+  port = 8911
+  [api.paths]
+  functions = './api/src/functions'
+  graphql = './api/src/graphql'
+  generated = './api/generated'

packages/babel-config/src/plugins/__tests__/__fixtures__/route-auto-loader/failure/web/src/Routes.tsx

@@ -0,0 +1,11 @@
+import { Router, Route } from '@redwoodjs/router'
+
+const Routes = () => {
+  return (
+    <Router>
+      <Route path="/" page={HomePage} name="home"/>
+    </Router>
+  )
+}
+
+export default Routes

packages/babel-config/src/plugins/__tests__/__fixtures__/route-auto-loader/failure/web/src/pages/HomePage/HomePage.tsx

@@ -0,0 +1,9 @@
+const HomePage = () => {
+  return (
+    <div>
+      <h1>HomePage</h1>
+    </div>
+  )
+}
+
+export default HomePage

packages/babel-config/src/plugins/__tests__/__fixtures__/route-auto-loader/failure/web/src/pages/HomePage/useHomePage.tsx

@@ -0,0 +1,5 @@
+const useHomePage = () => {
+  return 'useHomePage'
+}
+
+export default useHomePage

packages/babel-config/src/plugins/__tests__/babel-plugin-redwood-routes-auto-loader.test.ts

@@ -7,11 +7,6 @@ import { getPaths } from '@redwoodjs/project-config'
 
 import babelRoutesAutoLoader from '../babel-plugin-redwood-routes-auto-loader'
 
-const FIXTURE_PATH = path.resolve(
-  __dirname,
-  '../../../../../__fixtures__/example-todo-main/'
-)
-
 const transform = (filename: string) => {
   const code = fs.readFileSync(filename, 'utf-8')
   return babel.transform(code, {
@@ -21,7 +16,35 @@ const transform = (filename: string) => {
   })
 }
 
+describe('mulitiple files ending in Page.{js,jsx,ts,tsx}', () => {
+  const FAILURE_FIXTURE_PATH = path.resolve(
+    __dirname,
+    './__fixtures__/route-auto-loader/failure'
+  )
+
+  beforeAll(() => {
+    process.env.RWJS_CWD = FAILURE_FIXTURE_PATH
+  })
+
+  afterAll(() => {
+    delete process.env.RWJS_CWD
+  })
+
+  test('Fails with appropriate message', () => {
+    expect(() => {
+      transform(getPaths().web.routes)
+    }).toThrowError(
+      "Unable to find only a single file ending in 'Page.{js,jsx,ts,tsx}' in the follow page directories: 'HomePage"
+    )
+  })
+})
+
 describe('page auto loader correctly imports pages', () => {
+  const FIXTURE_PATH = path.resolve(
+    __dirname,
+    '../../../../../__fixtures__/example-todo-main/'
+  )
+
   let result: babel.BabelFileResult | null
 
   beforeAll(() => {

packages/babel-config/src/plugins/babel-plugin-redwood-routes-auto-loader.ts

@@ -43,6 +43,26 @@ export default function (
   // @NOTE: This var gets mutated inside the visitors
   let pages = processPagesDir().map(withRelativeImports)
 
+  // Currently processPagesDir() can return duplicate entries when there are multiple files
+  // ending in Page in the individual page directories. This will cause an error upstream.
+  // Here we check for duplicates and throw a more helpful error message.
+  const duplicatePageImportNames = new Set<string>()
+  const sortedPageImportNames = pages.map((page) => page.importName).sort()
+  for (let i = 0; i < sortedPageImportNames.length - 1; i++) {
+    if (sortedPageImportNames[i + 1] === sortedPageImportNames[i]) {
+      duplicatePageImportNames.add(sortedPageImportNames[i])
+    }
+  }
+  if (duplicatePageImportNames.size > 0) {
+    throw new Error(
+      `Unable to find only a single file ending in 'Page.{js,jsx,ts,tsx}' in the follow page directories: ${Array.from(
+        duplicatePageImportNames
+      )
+        .map((name) => `'${name}'`)
+        .join(', ')}`
+    )
+  }
+
   return {
     name: 'babel-plugin-redwood-routes-auto-loader',
     visitor: {