[cli] Fix vc dev with dynamic paths and ESM (#7946)

In a previous PR, the entrypoint path extension was stripped in `vc dev` to match the behavior of production deployments (`/api/user.js` => `/api/user`). However, it was supposed to map back to the original file extension before invoking the matching builder. This PR fixes the mapping for dynamic paths with ESM, such as `/api/[id].mjs` => `/api/[id]`.

packages/cli/src/util/dev/builder.ts

@@ -417,10 +417,6 @@ export async function getBuildMatches(
       src = src.substring(1);
     }
 
-    // We need to escape brackets since `glob` will
-    // try to find a group otherwise
-    src = src.replace(/(\[|\])/g, '[$1]');
-
     // lambda function files are trimmed of their file extension
     const mapToEntrypoint = new Map<string, string>();
     const extensionless = devServer.getExtensionlessFile(src);
@@ -429,6 +425,10 @@ export async function getBuildMatches(
       src = extensionless;
     }
 
+    // We need to escape brackets since `glob` will
+    // try to find a group otherwise
+    src = src.replace(/(\[|\])/g, '[$1]');
+
     const files = fileList
       .filter(name => name === src || minimatch(name, src, { dot: true }))
       .map(name => join(cwd, name));

packages/cli/test/dev/fixtures/42-dynamic-esm-ext/api/cjs/[id].js

@@ -0,0 +1,8 @@
+const { readFileSync } = require('fs');
+const { join } = require('path');
+
+module.exports = function handler(_req, res) {
+  const path = join(__dirname, '[id].js');
+  const file = readFileSync(path, 'utf8');
+  res.end(file ? 'found .js' : 'did not find .js');
+};

packages/cli/test/dev/fixtures/42-dynamic-esm-ext/api/esm/[id].mjs

@@ -0,0 +1,7 @@
+import { readFileSync } from 'fs';
+
+export default function handler(_req, res) {
+  const url = new URL('[id].mjs', import.meta.url);
+  const file = readFileSync(url, 'utf8');
+  res.end(file ? 'found .mjs' : 'did not find .mjs');
+};

packages/cli/test/dev/integration-4.test.ts

@@ -315,6 +315,14 @@ test(
   })
 );
 
+test(
+  '[vercel dev] 42-dynamic-esm-ext',
+  testFixtureStdio('42-dynamic-esm-ext', async (testPath: any) => {
+    await testPath(200, '/api/cjs/foo', 'found .js');
+    await testPath(200, '/api/esm/foo', 'found .mjs');
+  })
+);
+
 test(
   '[vercel dev] Use `@vercel/python` with Flask requirements.txt',
   testFixtureStdio('python-flask', async (testPath: any) => {