Fails with Invalid loader value: "mjs" (CDK ESM module)

[kristiandreher]

I am using the @graphql-tools packages to manage the Appsync schema in my application. When running lld I get the following error message:

> yarn lld -v                                                     
yarn run v1.22.22
warning package.json: No license field
$ /<project-root>/node_modules/.bin/lld -v
Welcome to Lambda Live Debugger 🐞 version 1.2.2.
Parameters: 
 - context=undefined
 - interval=3000
 - verbose=true
 - debuggerId=80edea8f7b5fa224fdc38915ba29a40c
 - start=true
NPM module folder: /<project-root>/node_modules/lambda-live-debugger/dist
Project folder: /<project-root>
Starting the debugger (ID 80edea8f7b5fa224fdc38915ba29a40c)...
Getting resources with 'cdk' framework
[CDK] Entry file: /<project-root>/bin/esm-test-app.ts
[CDK] Using ESM format
✘ [ERROR] Invalid loader value: "mjs" [plugin injectCode]

    node_modules/@graphql-tools/load-files/esm/index.js:14:22:
      14 │ import { parse } from 'graphql';
         ╵                       ~~~~~~~~~

Error: Error building CDK code: Build failed with 1 error:
node_modules/@graphql-tools/load-files/esm/index.js:14:22: ERROR: [plugin: injectCode] Invalid loader value: "mjs"
    at CdkFramework.getLambdasDataFromCdkByCompilingAndRunning (file:///<project-root>/node_modules/lambda-live-debugger/dist/frameworks/cdkFramework.mjs:284:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async CdkFramework.getLambdas (file:///<project-root>/node_modules/lambda-live-debugger/dist/frameworks/cdkFramework.mjs:51:30)
    at async Object.getLambdas (file:///<project-root>/node_modules/lambda-live-debugger/dist/resourceDiscovery.mjs:43:21)
    at async Object.discoverLambdas (file:///<project-root>/node_modules/lambda-live-debugger/dist/configuration.mjs:115:26)
    at async run (file:///<project-root>/node_modules/lambda-live-debugger/dist/lldebugger.mjs:54:5) {
  [cause]: Error: Build failed with 1 error:
  node_modules/@graphql-tools/load-files/esm/index.js:14:22: ERROR: [plugin: injectCode] Invalid loader value: "mjs"
      at failureErrorWithLog (/<project-root>/node_modules/esbuild/lib/main.js:1651:15)
      at /<project-root>/node_modules/esbuild/lib/main.js:1059:25
      at runOnEndCallbacks (/<project-root>/node_modules/esbuild/lib/main.js:1486:45)
      at buildResponseToResult (/<project-root>/node_modules/esbuild/lib/main.js:1057:7)
      at /<project-root>/node_modules/esbuild/lib/main.js:1086:16
      at responseCallbacks.<computed> (/<project-root>/node_modules/esbuild/lib/main.js:704:9)
      at handleIncomingPacket (/<project-root>/node_modules/esbuild/lib/main.js:764:9)
      at Socket.readFromStdout (/<project-root>/node_modules/esbuild/lib/main.js:680:7)
      at Socket.emit (node:events:519:28)
      at addChunk (node:internal/streams/readable:559:12) {
    errors: [Getter/Setter],
    warnings: [Getter/Setter]
  }
}
Done in 1.43s.

esm-test-app-stack.ts:

import { loadFilesSync } from "@graphql-tools/load-files";
import { Duration, Stack, type StackProps } from "aws-cdk-lib";
import { Construct } from "constructs";
import * as url from "url";
import { resolve } from "path";
import { NodejsFunction, OutputFormat } from "aws-cdk-lib/aws-lambda-nodejs";
import { Runtime } from "aws-cdk-lib/aws-lambda";
import { join } from "path";

const __dirname = url.fileURLToPath(new URL(".", import.meta.url));

export class EsmTestAppStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    const schemas = loadFilesSync<string>(join(__dirname, "../schemas"));

    new NodejsFunction(this, "Lambda", {
      timeout: Duration.seconds(20),
      memorySize: 1024,
      runtime: Runtime.NODEJS_20_X,
      entry: resolve(__dirname, "./handler.ts"),
      environment: {
        NODE_OPTIONS: "--enable-source-maps",
        LOG_LEVEL: "DEBUG",
      },
      bundling: {
        minify: true,
        sourceMap: true,
        externalModules: [],
        platform: "node",
        // ESM important properties:
        mainFields: ["module", "main"],
        format: OutputFormat.ESM,
        banner:
          "const require = (await import('node:module')).createRequire(import.meta.url);",
      },
    });
  }
}

package.json

{
  "name": "esm-test-app",
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    "@graphql-tools/load-files": "^7.0.0",
    "@types/node": "20.14.9",
    "aws-cdk": "2.152.0",
    "graphql": "^16.9.0",
    "lambda-live-debugger": "^1.2.2",
    "tsx": "^4.17.0",
    "typescript": "~5.5.3"
  },
  "dependencies": {
    "aws-cdk-lib": "2.152.0",
    "constructs": "^10.0.0"
  }
}

[ServerlessLife]

Thank you, @kristiandreher, for reporting the issues.

I will take a careful look into this because others could have a similar problem.

Could you share a sample Lambda handler or part of it? Of course, a sample project would be even better.

[kristiandreher]

Thanks a lot for looking into the issue!

The problem is not in the Lambda handler. The problem is in the CDK stack. I have included the stack code in the issue. Let me know if you need more details.

[ServerlessLife]

Aha. I misunderstood. Thank you for clarifying.

I will try to reproduce and fix it over the weekend.

[kristiandreher]

Awesome!

[kristiandreher]

I did some more tests and now I get a different error. (I think I had an old .lldebugger folder when reporting the issue above). When removing the .lldebugger folder I get the following error.

> yarn lld -v                                                                                                             
yarn run v1.22.22
warning package.json: No license field
$ /<project-root>/node_modules/.bin/lld -v
Welcome to Lambda Live Debugger 🐞 version 1.2.2.
Error: Cannot find package '/<project-root>/node_modules/lambda-live-debugger/package.json' imported from /<project-root>/.lldebugger/configCompiled.mjs
    at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
    at packageResolve (node:internal/modules/esm/resolve:841:14)
    at moduleResolve (node:internal/modules/esm/resolve:927:18)
    at defaultResolve (node:internal/modules/esm/resolve:1169:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
    at link (node:internal/modules/esm/module_job:86:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
Done in 0.69s.

Sorry for the confusion.

Using node v20.16.0

[markostru]

@kristiandreher
The issues look unrelated.

The second problem is extremely weird. Do you have any idea what caused it or how the project is different from others that work? Is it repeatable?

[kristiandreher]

Please ignore the second issue. I can't reproduce it with a clean repo. Maybe the .lldebugger folder was left in a bad state after the first error?

Sorry about the confusion.

[ServerlessLife]

I managed to reproduce and fix the problem. Thank you again.

I will deploy it sometime today.

Since you helped me a lot with bug reports, I will be adding you to the list of contributors. I hope that is OK with you.

[ServerlessLife]

🎉 This issue has been resolved in version 1.2.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀