Use TS parser instead, es-module-lexer does not support jsx

Author: JoviDeCroock

packages/app/package.json

@@ -62,7 +62,6 @@
     "camelcase-keys": "9.1.3",
     "chokidar": "3.6.0",
     "diff": "5.2.0",
-    "es-module-lexer": "1.7.0",
     "esbuild": "0.25.5",
     "express": "4.21.2",
     "graphql-request": "6.1.0",

packages/app/src/cli/models/extensions/specifications/type-generation.ts

@@ -2,7 +2,6 @@ import {fileExists, findPathUp, readFileSync} from '@shopify/cli-kit/node/fs'
 import {dirname, joinPath, relativizePath, resolvePath} from '@shopify/cli-kit/node/path'
 import {AbortError} from '@shopify/cli-kit/node/error'
 import ts from 'typescript'
-import {init, parse} from 'es-module-lexer'
 import {createRequire} from 'module'
 
 const require = createRequire(import.meta.url)
@@ -63,21 +62,43 @@ async function fallbackResolve(importPath: string, baseDir: string): Promise<str
 
 async function parseAndResolveImports(filePath: string): Promise<string[]> {
   try {
-    await init
-
     const content = readFileSync(filePath).toString()
     const resolvedPaths: string[] = []
 
     // Load TypeScript configuration once
     const {compilerOptions} = loadTsConfig(filePath)
 
-    const [imports] = parse(content)
+    // Determine script kind based on file extension
+    let scriptKind = ts.ScriptKind.JSX
+    if (filePath.endsWith('.ts')) {
+      scriptKind = ts.ScriptKind.TS
+    } else if (filePath.endsWith('.tsx')) {
+      scriptKind = ts.ScriptKind.TSX
+    }
+
+    const sourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true, scriptKind)
 
     const processedImports = new Set<string>()
+    const importPaths: string[] = []
+
+    const visit = (node: ts.Node): void => {
+      if (ts.isImportDeclaration(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier)) {
+        importPaths.push(node.moduleSpecifier.text)
+      } else if (ts.isCallExpression(node) && node.expression.kind === ts.SyntaxKind.ImportKeyword) {
+        const firstArg = node.arguments[0]
+        if (firstArg && ts.isStringLiteral(firstArg)) {
+          importPaths.push(firstArg.text)
+        }
+      } else if (ts.isExportDeclaration(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier)) {
+        importPaths.push(node.moduleSpecifier.text)
+      }
+
+      ts.forEachChild(node, visit)
+    }
 
-    for (const pattern of imports) {
-      const importPath = pattern.n
+    visit(sourceFile)
 
+    for (const importPath of importPaths) {
       // Skip if already processed
       if (!importPath || processedImports.has(importPath)) {
         continue
@@ -149,7 +170,7 @@ export function createTypeDefinition(
         // Throw specific error for the target that failed, matching the original getSharedTypeDefinition behavior
         throw new AbortError(
           `Type reference for ${target} could not be found. You might be using the wrong @shopify/ui-extensions version.`,
-          `Fix the error by ensuring you have the correct version of @shopify/ui-extensions, for example ${year}.${month}.0, in your dependencies.`,
+          `Fix the error by ensuring you have the correct version of @shopify/ui-extensions, for example ~${year}.${month}.0, in your dependencies.`,
         )
       }
     }
@@ -160,8 +181,8 @@ export function createTypeDefinition(
       const target = targets[0] ?? ''
       return `//@ts-ignore\ndeclare module './${relativePath}' {\n  const shopify: import('@shopify/ui-extensions/${target}').Api;\n  const globalThis: { shopify: typeof shopify };\n}\n`
     } else if (targets.length > 1) {
-      const unionType = targets.map((target) => `import('@shopify/ui-extensions/${target}').Api`).join(' | ')
-      return `//@ts-ignore\ndeclare module './${relativePath}' {\n  const shopify: ${unionType};\n  const globalThis: { shopify: typeof shopify };\n}\n`
+      const unionType = targets.map((target) => `    import('@shopify/ui-extensions/${target}').Api`).join(' |\n')
+      return `//@ts-ignore\ndeclare module './${relativePath}' {\n  const shopify: \n${unionType};\n  const globalThis: { shopify: typeof shopify };\n}\n`
     }
 
     return null
@@ -173,7 +194,7 @@ export function createTypeDefinition(
     const {year, month} = parseApiVersion(apiVersion) ?? {year: 2025, month: 10}
     throw new AbortError(
       `Type reference could not be found. You might be using the wrong @shopify/ui-extensions version.`,
-      `Fix the error by ensuring you have the correct version of @shopify/ui-extensions, for example ${year}.${month}.0, in your dependencies.`,
+      `Fix the error by ensuring you have the correct version of @shopify/ui-extensions, for example ~${year}.${month}.0, in your dependencies.`,
     )
   }
 }

packages/app/src/cli/models/extensions/specifications/ui_extension.test.ts

@@ -1065,7 +1065,7 @@ Please check the configuration in ${uiExtension.configurationPath}`),
         await expect(extension.contributeToSharedTypeFile?.(typeDefinitionsByFile)).rejects.toThrow(
           new AbortError(
             'Type reference for admin.unknown.action.render could not be found. You might be using the wrong @shopify/ui-extensions version.',
-            'Fix the error by ensuring you have the correct version of @shopify/ui-extensions, for example 2025.10.0, in your dependencies.',
+            'Fix the error by ensuring you have the correct version of @shopify/ui-extensions, for example ~2025.10.0, in your dependencies.',
           ),
         )
 
@@ -1211,7 +1211,7 @@ Please check the configuration in ${uiExtension.configurationPath}`),
 
         // Then - should generate union type for shared module
         expect(types).toContain(
-          `//@ts-ignore\ndeclare module './shared/utils.js' {\n  const shopify: import('@shopify/ui-extensions/admin.product-details.action.render').Api | import('@shopify/ui-extensions/admin.orders-details.block.render').Api;\n  const globalThis: { shopify: typeof shopify };\n}\n`,
+          `//@ts-ignore\ndeclare module './shared/utils.js' {\n  const shopify: \n    import('@shopify/ui-extensions/admin.product-details.action.render').Api |\n    import('@shopify/ui-extensions/admin.orders-details.block.render').Api;\n  const globalThis: { shopify: typeof shopify };\n}\n`,
         )
       })
     })
@@ -1272,7 +1272,7 @@ Please check the configuration in ${uiExtension.configurationPath}`),
         // Then - should generate union types for shared files
         // when targets are from different surfaces (admin vs checkout)
         expect(types).toContain(
-          `//@ts-ignore\ndeclare module './src/components/Shared.jsx' {\n  const shopify: import('@shopify/ui-extensions/admin.product-details.action.render').Api | import('@shopify/ui-extensions/purchase.checkout.block.render').Api;\n  const globalThis: { shopify: typeof shopify };\n}\n`,
+          `//@ts-ignore\ndeclare module './src/components/Shared.jsx' {\n  const shopify: \n    import('@shopify/ui-extensions/admin.product-details.action.render').Api |\n    import('@shopify/ui-extensions/purchase.checkout.block.render').Api;\n  const globalThis: { shopify: typeof shopify };\n}\n`,
         )
       })
     })