Merge pull request #6529 from Shopify/10-17-improve_error_message_when_multiple_web_configs_are_found

Improve error message when multiple web configs are found

Author: isaacroldan

packages/app/src/cli/models/app/loader.test.ts

@@ -578,7 +578,18 @@ wrong = "property"
     await writeWebConfiguration({webDirectory: anotherWebDirectory, role: 'backend'})
 
     // Then
-    await expect(loadTestingApp()).rejects.toThrow()
+    try {
+      await loadTestingApp()
+      expect.fail('Expected loadTestingApp to throw an error')
+    } catch (error) {
+      if (!(error instanceof AbortError)) {
+        throw error
+      }
+      expect(error.message).toContain('You can only have one "web" configuration file with the backend role')
+      expect(error.message).toContain('Conflicting configurations found at:')
+      expect(error.message).toContain(joinPath(webDirectory, configurationFileNames.web))
+      expect(error.message).toContain(joinPath(anotherWebDirectory, configurationFileNames.web))
+    }
   })
 
   test('throws an error if there are multiple frontends', async () => {
@@ -590,7 +601,18 @@ wrong = "property"
     await writeWebConfiguration({webDirectory: anotherWebDirectory, role: 'frontend'})
 
     // Then
-    await expect(loadTestingApp()).rejects.toThrow()
+    try {
+      await loadTestingApp()
+      expect.fail('Expected loadTestingApp to throw an error')
+    } catch (error) {
+      if (!(error instanceof AbortError)) {
+        throw error
+      }
+      expect(error.message).toContain('You can only have one "web" configuration file with the frontend role')
+      expect(error.message).toContain('Conflicting configurations found at:')
+      expect(error.message).toContain(joinPath(webDirectory, configurationFileNames.web))
+      expect(error.message).toContain(joinPath(anotherWebDirectory, configurationFileNames.web))
+    }
   })
 
   test('loads the app with custom located web blocks', async () => {

packages/app/src/cli/models/app/loader.ts

@@ -428,12 +428,17 @@ class AppLoader<TConfig extends AppConfiguration, TModuleSpec extends ExtensionS
   private validateWebs(webs: Web[]): void {
     ;[WebType.Backend, WebType.Frontend].forEach((webType) => {
       const websOfType = webs.filter((web) => web.configuration.roles.includes(webType))
-      if (websOfType[1]) {
+      if (websOfType.length > 1) {
+        const conflictingPaths = websOfType.map((web) => joinPath(web.directory, configurationFileNames.web))
+        const pathsList = conflictingPaths.map((path) => `  ${path}`).join('\n')
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const lastConflictingPath = conflictingPaths[conflictingPaths.length - 1]!
         this.abortOrReport(
-          outputContent`You can only have one web with the ${outputToken.yellow(webType)} role in your app`,
+          outputContent`You can only have one "web" configuration file with the ${outputToken.yellow(
+            webType,
+          )} role in your app.\n\nConflicting configurations found at:\n${pathsList}`,
           undefined,
-
-          joinPath(websOfType[1].directory, configurationFileNames.web),
+          lastConflictingPath,
         )
       }
     })