Add more detailed bundling error descriptions

Author: dmerand

.changeset/shiny-jobs-wave.md

@@ -0,0 +1,5 @@
+---
+'@shopify/app': patch
+---
+
+Report bundling errors

packages/app/src/cli/services/build/extension.ts

@@ -128,9 +128,11 @@ export async function buildUIExtension(extension: ExtensionInstance, options: Ex
       )
     }
   } catch (extensionBundlingError) {
-    // this fails if the app's own source code is broken; wrap such that this isn't flagged as a CLI bug
+    // The bundleExtension function already wrote formatted errors to stderr
+    // when esbuild errors occurred, so we just need to throw a user-friendly error
     throw new AbortError(
-      `Failed to bundle extension ${extension.localIdentifier}. Please check the extension source code for errors.`,
+      `Failed to bundle extension ${extension.localIdentifier}.`,
+      'Please check the extension source code for errors.',
     )
   }
 

packages/app/src/cli/services/extensions/bundle.test.ts

@@ -45,7 +45,7 @@ describe('bundleExtension()', () => {
     })
     const esbuildWatch = vi.fn()
     const esbuildDispose = vi.fn()
-    const esbuildRebuild = vi.fn(esbuildResultFixture)
+    const esbuildRebuild = vi.fn(esbuildSuccessResultFixture)
 
     vi.mocked(esContext).mockResolvedValue({
       rebuild: esbuildRebuild,
@@ -139,7 +139,7 @@ describe('bundleExtension()', () => {
     })
     const esbuildWatch = vi.fn()
     const esbuildDispose = vi.fn()
-    const esbuildRebuild = vi.fn(esbuildResultFixture)
+    const esbuildRebuild = vi.fn(esbuildSuccessResultFixture)
 
     vi.mocked(esContext).mockResolvedValue({
       rebuild: esbuildRebuild,
@@ -179,28 +179,88 @@ describe('bundleExtension()', () => {
     expect(plugins).not.toContain('shopify:deduplicate-react')
   })
 
-  async function esbuildResultFixture() {
+  test('throws error when bundling fails and displays formatted errors', async () => {
+    // Given
+    const extension = await testUIExtension()
+    const stdout: any = {
+      write: vi.fn(),
+    }
+    const stderr: any = {
+      write: vi.fn(),
+    }
+    const app = testApp({
+      directory: '/project',
+      allExtensions: [extension],
+    })
+    const esbuildWatch = vi.fn()
+    const esbuildDispose = vi.fn()
+    const esbuildRebuild = vi.fn(esbuildErrorResultFixture)
+
+    vi.mocked(esContext).mockResolvedValue({
+      rebuild: esbuildRebuild,
+      watch: esbuildWatch,
+      dispose: esbuildDispose,
+      cancel: vi.fn(),
+      serve: vi.fn(),
+    })
+
+    // When/Then
+    await expect(
+      bundleExtension({
+        env: {},
+        outputPath: extension.outputPath,
+        minify: true,
+        environment: 'production',
+        stdin: {
+          contents: 'console.log("mock stdin content")',
+          resolveDir: 'mock/resolve/dir',
+          loader: 'tsx',
+        },
+        stdout,
+        stderr,
+      }),
+    ).rejects.toThrow('ESBuild bundling failed')
+
+    // Verify errors were written to stderr
+    const errorOutput = vi.mocked(stderr.write).mock.calls[0][0] as string
+    expect(errorOutput).toMatch(/[✘X] \[ERROR\] error text \[plugin plugin\]/)
+  })
+
+  async function esbuildSuccessResultFixture() {
     return {
-      errors: [
+      errors: [],
+      warnings: [
         {
-          id: 'error',
+          id: 'warning',
           pluginName: 'plugin',
-          text: 'error text',
+          text: 'warning text',
           location: null,
           notes: [],
           detail: {},
         },
       ],
-      warnings: [
+      outputFiles: [],
+      metafile: {
+        inputs: {},
+        outputs: {},
+      },
+      mangleCache: {},
+    }
+  }
+
+  async function esbuildErrorResultFixture() {
+    return {
+      errors: [
         {
-          id: 'warning',
+          id: 'error',
           pluginName: 'plugin',
-          text: 'warning text',
+          text: 'error text',
           location: null,
           notes: [],
           detail: {},
         },
       ],
+      warnings: [],
       outputFiles: [],
       metafile: {
         inputs: {},

packages/app/src/cli/services/extensions/bundle.ts

@@ -60,6 +60,11 @@ export async function bundleExtension(options: BundleOptions, processEnv = proce
   const result = await context.rebuild()
   onResult(result, options)
   await context.dispose()
+
+  // If there were errors, throw an error so the caller can handle it
+  if (result.errors && result.errors.length > 0) {
+    throw new Error('ESBuild bundling failed')
+  }
 }
 
 export async function bundleThemeExtension(