fix(exec): Support aliased imports with file extension (#494)

Author: Tobbe

__fixtures__/test-project/api/src/services/contacts/contacts.ts

@@ -1,6 +1,7 @@
 import type { QueryResolvers, MutationResolvers } from 'types/graphql'
 
-import { db } from 'src/lib/db'
+// Testing aliased imports with extensions
+import { db } from 'src/lib/db.js'
 
 export const contacts: QueryResolvers['contacts'] = () => {
   return db.contact.findMany()

__fixtures__/test-project/scripts/one/two/myNestedScript.ts

@@ -1,3 +1,6 @@
+import { contacts } from 'api/src/services/contacts/contacts'
+
 export default async () => {
+  const _allContacts = await contacts()
   console.log('Hello from myNestedScript.ts')
 }

docs/implementation-docs/exec-custom-resolver.md

@@ -0,0 +1,28 @@
+I was getting errors like these when running scripts with `exec scriptName`:
+
+```
+7:08:58 PM [vite] Pre-transform error: Failed to load url /api/src/lib/db.js (resolved id: /api/src/lib/db.js) in /Users/tobbe/tmp/cedar-0140-jobs/api/src/lib/jobs.ts. Does the file exist?
+7:08:58 PM [vite] Pre-transform error: Failed to load url /api/src/lib/logger.js (resolved id: /api/src/lib/logger.js) in /Users/tobbe/tmp/cedar-0140-jobs/api/src/lib/jobs.ts. Does the file exist?
+7:08:58 PM [vite] Pre-transform error: Failed to load url /api/src/lib/db.js (resolved id: /api/src/lib/db.js) in /Users/tobbe/tmp/cedar-0140-jobs/api/src/lib/jobs.ts. Does the file exist?
+7:08:58 PM [vite] Pre-transform error: Failed to load url /api/src/lib/logger.js (resolved id: /api/src/lib/logger.js) in /Users/tobbe/tmp/cedar-0140-jobs/api/src/lib/jobs.ts. Does the file exist?
+```
+
+The issue is with these imports:
+
+```ts
+import { db } from 'src/lib/db.js'
+import { logger } from 'src/lib/logger.js'
+```
+
+In a TypeScript project the name of the source files for those imports are
+db.ts and logger.ts
+
+When authoring TypeScript, that's to be transpiled to JavaScript and then run by
+Node, using the .js extension is typically what you should do, because that's
+what the files to import will be named when Node executes them. But now we're
+using vite-node, and vite-node runs the source files, not built files. And so
+the extension should be empty, to let vite-node guess the file extension, or .ts
+to explicitly tell it.
+
+The solution is to update our custom resolver in packages/cli/src/lib/exec.js to
+remove .js imports and let vite figure out the file extension:

packages/cli/src/lib/exec.js

@@ -61,12 +61,23 @@ export async function runScriptFunction({
             // from scripts/ because it doesn't know what the src/ alias is.
             // So we have to tell it to use the correct path based on what file
             // is doing the importing.
+            // Also, to support both imports like 'src/lib/db.js' and
+            // 'src/lib/db' in ts files we need to have special treatment for
+            // the .js extension.
             if (importer.startsWith(apiImportBase)) {
               const apiImportSrc = importStatementPath(getPaths().api.src)
-              return { id: id.replace('src', apiImportSrc) }
+              let resolvedId = id.replace('src', apiImportSrc)
+              if (importer.endsWith('.ts') || importer.endsWith('.tsx')) {
+                resolvedId = resolvedId.replace(/\.jsx?$/, '')
+              }
+              return { id: resolvedId }
             } else if (importer.startsWith(webImportBase)) {
               const webImportSrc = importStatementPath(getPaths().web.src)
-              return { id: id.replace('src', webImportSrc) }
+              let resolvedId = id.replace('src', webImportSrc)
+              if (importer.endsWith('.ts') || importer.endsWith('.tsx')) {
+                resolvedId = resolvedId.replace(/\.jsx?$/, '')
+              }
+              return { id: resolvedId }
             }
 
             return null

tasks/test-project/rebuild-test-project-fixture.ts

@@ -421,7 +421,10 @@ async function runCommand() {
       fs.mkdirSync(nestedPath, { recursive: true })
       fs.writeFileSync(
         path.join(nestedPath, 'myNestedScript.ts'),
-        'export default async () => {\n' +
+        "import { contacts } from 'api/src/services/contacts/contacts'\n" +
+          '\n' +
+          'export default async () => {\n' +
+          '  const _allContacts = await contacts()\n' +
           "  console.log('Hello from myNestedScript.ts')\n" +
           '}\n\n',
       )

tasks/test-project/tui-tasks.ts

@@ -768,6 +768,20 @@ export async function apiTasks(
         )
 
         await generateScaffold('contacts')
+
+        const contactsServicePath = fullPath(
+          'api/src/services/contacts/contacts',
+        )
+        fs.writeFileSync(
+          contactsServicePath,
+          fs
+            .readFileSync(contactsServicePath, 'utf-8')
+            .replace(
+              "import { db } from 'src/lib/db'",
+              '// Testing aliased imports with extensions\n' +
+                "import { db } from 'src/lib/db.js'",
+            ),
+        )
       },
     },
     {