Avoid detection if .js config file is ESM or CommonJs, just try both.

.changeset/silent-badgers-travel.md

@@ -0,0 +1,5 @@
+---
+"vscode-apollo": patch
+---
+
+Avoid detection if .js config file is ESM or CommonJs, just try both.

sampleWorkspace/configFileTypes/cjsConfig/apollo.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  client: {
+    service: {
+      name: "cjsConfig",
+      localSchemaFile: "./starwarsSchema.graphql",
+    },
+  },
+};

sampleWorkspace/configFileTypes/cjsConfig/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "module"
+}

sampleWorkspace/configFileTypes/cjsConfig/src/test.js

@@ -0,0 +1,8 @@
+import gql from "graphql-tag";
+gql`
+  query Test {
+    droid(id: "2000") {
+      name
+    }
+  }
+`;

sampleWorkspace/configFileTypes/cjsConfig/starwarsSchema.graphql

@@ -0,0 +1 @@
+../fixtures/starwarsSchema.graphql

sampleWorkspace/configFileTypes/jsConfigWithCJS/apollo.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  client: {
+    service: {
+      name: "jsConfigWithCJS",
+      localSchemaFile: "./starwarsSchema.graphql",
+    },
+  },
+};

sampleWorkspace/configFileTypes/jsConfigWithCJS/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "module"
+}

sampleWorkspace/configFileTypes/jsConfigWithCJS/src/test.js

@@ -0,0 +1,8 @@
+import gql from "graphql-tag";
+gql`
+  query Test {
+    droid(id: "2000") {
+      name
+    }
+  }
+`;

sampleWorkspace/configFileTypes/jsConfigWithCJS/starwarsSchema.graphql

@@ -0,0 +1 @@
+../fixtures/starwarsSchema.graphql

sampleWorkspace/configFileTypes/jsConfigWithESM/apollo.config.js

@@ -0,0 +1,8 @@
+export default {
+  client: {
+    service: {
+      name: "jsConfigWithESM",
+      localSchemaFile: "./starwarsSchema.graphql",
+    },
+  },
+};

sampleWorkspace/configFileTypes/jsConfigWithESM/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "commonjs"
+}

sampleWorkspace/configFileTypes/jsConfigWithESM/src/test.js

@@ -0,0 +1,8 @@
+import gql from "graphql-tag";
+gql`
+  query Test {
+    droid(id: "2000") {
+      name
+    }
+  }
+`;

sampleWorkspace/configFileTypes/jsConfigWithESM/starwarsSchema.graphql

@@ -0,0 +1 @@
+../fixtures/starwarsSchema.graphql

sampleWorkspace/configFileTypes/mjsConfig/apollo.config.mjs

@@ -0,0 +1,8 @@
+export default {
+  client: {
+    service: {
+      name: "mjsConfig",
+      localSchemaFile: "./starwarsSchema.graphql",
+    },
+  },
+};

sampleWorkspace/configFileTypes/mjsConfig/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "commonjs"
+}

sampleWorkspace/configFileTypes/mjsConfig/src/test.js

@@ -0,0 +1,8 @@
+import gql from "graphql-tag";
+gql`
+  query Test {
+    droid(id: "2000") {
+      name
+    }
+  }
+`;

sampleWorkspace/configFileTypes/mjsConfig/starwarsSchema.graphql

@@ -0,0 +1 @@
+../fixtures/starwarsSchema.graphql

sampleWorkspace/configFileTypes/tsConfigWithCJS/apollo.config.ts

@@ -0,0 +1,8 @@
+module.exports = {
+  client: {
+    service: {
+      name: "tsConfigWithCJS",
+      localSchemaFile: "./starwarsSchema.graphql",
+    },
+  },
+};

sampleWorkspace/configFileTypes/tsConfigWithCJS/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "module"
+}

sampleWorkspace/configFileTypes/tsConfigWithCJS/src/test.js

@@ -0,0 +1,8 @@
+import gql from "graphql-tag";
+gql`
+  query Test {
+    droid(id: "2000") {
+      name
+    }
+  }
+`;

sampleWorkspace/configFileTypes/tsConfigWithCJS/starwarsSchema.graphql

@@ -0,0 +1 @@
+../fixtures/starwarsSchema.graphql

sampleWorkspace/configFileTypes/tsConfigWithESM/apollo.config.ts

@@ -0,0 +1,8 @@
+export default {
+  client: {
+    service: {
+      name: "tsConfigWithESM",
+      localSchemaFile: "./starwarsSchema.graphql",
+    },
+  },
+};

sampleWorkspace/configFileTypes/tsConfigWithESM/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "test",
+  "type": "commonjs"
+}

sampleWorkspace/configFileTypes/tsConfigWithESM/src/test.js

@@ -0,0 +1,8 @@
+import gql from "graphql-tag";
+gql`
+  query Test {
+    droid(id: "2000") {
+      name
+    }
+  }
+`;

sampleWorkspace/configFileTypes/tsConfigWithESM/starwarsSchema.graphql

@@ -0,0 +1 @@
+../fixtures/starwarsSchema.graphql

sampleWorkspace/sampleWorkspace.code-workspace

@@ -18,6 +18,9 @@
     {
       "path": "rover"
     },
+    {
+      "path": "configFileTypes"
+    },
     {
       "path": "../src/language-server/__tests__/fixtures/documents"
     }

src/language-server/__e2e__/configFileTypes.e2e.ts

@@ -0,0 +1,37 @@
+import { writeFile } from "fs/promises";
+import {
+  reloadService,
+  waitForLSP,
+  resolveRelativeToSampleWorkspace,
+} from "./utils";
+
+test.each([
+  ["cjsConfig", "commonjs"],
+  ["cjsConfig", "module"],
+  ["mjsConfig", "module"],
+  ["mjsConfig", "commonjs"],
+  ["jsConfigWithCJS", "commonjs"],
+  ["jsConfigWithCJS", "module"],
+  ["jsConfigWithESM", "module"],
+  ["jsConfigWithESM", "commonjs"],
+  ["tsConfigWithCJS", "commonjs"],
+  ["tsConfigWithCJS", "module"],
+  ["tsConfigWithESM", "module"],
+  ["tsConfigWithESM", "commonjs"],
+] as const)("%s with `type: '%s'`", async (project, moduleType) => {
+  await writeFile(
+    resolveRelativeToSampleWorkspace(`configFileTypes/${project}/package.json`),
+    JSON.stringify(
+      {
+        name: "test",
+        type: moduleType,
+      },
+      undefined,
+      2,
+    ),
+    "utf-8",
+  );
+  await reloadService();
+  const stats = await waitForLSP(`configFileTypes/${project}/src/test.js`);
+  expect(stats.serviceId).toBe(project);
+});

src/language-server/__e2e__/utils.ts

@@ -7,6 +7,7 @@ import { VSCodeGraphQLExtension } from "src/extension";
 function resolve(file: string) {
   return join(__dirname, "..", "..", "..", "sampleWorkspace", file);
 }
+export { resolve as resolveRelativeToSampleWorkspace };
 
 export type GetPositionFn = ReturnType<typeof getPositionForEditor>;
 export function getPositionForEditor(editor: vscode.TextEditor) {
@@ -65,7 +66,7 @@ export function waitForLSP(file: string) {
       uri.toString(),
     );
     expect(stats.loaded).toBe(true);
-    return stats;
+    return stats as ProjectStats & { loaded: true };
   });
 }
 

src/language-server/config/cache-busting-resolver.js

@@ -24,20 +24,12 @@ async function resolve(specifier, context, nextResolve) {
   if (context.importAttributes.as !== "cachebust") {
     return nextResolve(specifier, context);
   }
-  if (context.importAttributes.format) {
-    // no need to resolve at all, we have all necessary information
-    return {
-      url: bustFileName(specifier),
-      format: context.importAttributes.format,
-      importAttributes: context.importAttributes,
-      shortCircuit: true,
-    };
-  }
-  const result = await nextResolve(specifier, context);
+  // no need to resolve at all, we have all necessary information
   return {
-    ...result,
-    url: bustFileName(result.url),
+    url: bustFileName(specifier),
+    format: context.importAttributes.format,
     importAttributes: context.importAttributes,
+    shortCircuit: true,
   };
 }
 

src/language-server/config/cache-busting-resolver.types.ts

@@ -4,7 +4,7 @@ export type ImportAttributes =
   | {
       as: "cachebust";
       contents: string;
-      format?: Format;
+      format: Format;
     }
   | { as?: undefined };
 

src/language-server/config/loadTsConfig.ts

@@ -1,5 +1,5 @@
 import { Loader } from "cosmiconfig";
-import { dirname } from "node:path";
+import { dirname, extname } from "node:path";
 import typescript from "typescript";
 import { pathToFileURL } from "node:url";
 import { register } from "node:module";
@@ -59,19 +59,7 @@ async function load(
     error.message = `TypeScript Error in ${filepath}:\n${error.message}`;
     throw error;
   }
-  // eslint-disable-next-line @typescript-eslint/return-await
-  const imported = await import(
-    filepath,
-    //@ts-ignore
-    {
-      with: {
-        as: "cachebust",
-        contents: transpiledContent,
-        format: type,
-      } satisfies ImportAttributes,
-    }
-  );
-  return imported.default;
+  return loadCachebustedJs(filepath, transpiledContent, type);
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -92,15 +80,44 @@ function resolveTsConfig(directory: string): any {
 }
 
 export const loadJs: Loader = async function loadJs(filepath, contents) {
+  const extension = extname(filepath);
+  if (extension === ".mjs") {
+    return loadCachebustedJs(filepath, contents, "module");
+  }
+  if (extension === ".cjs") {
+    return loadCachebustedJs(filepath, contents, "commonjs");
+  }
+  try {
+    return await loadCachebustedJs(filepath, contents, "module");
+  } catch (error) {
+    if (
+      error instanceof Error &&
+      // [ERROR] ReferenceError: module is not defined in ES module scope
+      error.message.includes("module is not defined")
+    ) {
+      return loadCachebustedJs(filepath, contents, "commonjs");
+    } else {
+      throw error;
+    }
+  }
+};
+
+async function loadCachebustedJs(
+  filename: string,
+  contents: string,
+  type: "module" | "commonjs",
+) {
   return (
     await import(
-      filepath, // @ts-ignore
+      filename,
+      // @ts-ignore
       {
         with: {
           as: "cachebust",
           contents,
+          format: type,
         } satisfies ImportAttributes,
       }
     )
   ).default;
-};
+}