Typescript not bundling modules

user_3955685 0
Viewed 671

I have a node application that compiles typescript files to a dist folder and then serves these files as lambda resolvers via aws cdk. Here is an example of my setup:

The code

register.ts

import ValidateUserFields from '../utils/forms';

exports.main = async function (event: any, context: any) {
    return {
      statusCode: 200,
    };
}

register-lambda-config.ts

import { Construct } from 'constructs';
import * as apigateway from 'aws-cdk-lib/aws-apigateway';
import * as lambda from 'aws-cdk-lib/aws-lambda';
import * as s3 from 'aws-cdk-lib/aws-s3';

export class FrontendService extends Construct {
  constructor(scope: Construct, id: string) {
    super(scope, id);

    const api = new apigateway.RestApi(this, 'frontend-api', {
      restApiName: 'Frontend Service',
      description: 'This service serves the frontend.',
    });

    const functionName = 'register';

    const handler = new lambda.Function(this, functionName, {
      functionName,
      runtime: lambda.Runtime.NODEJS_14_X,
      code: lambda.Code.fromAsset('dist/src/lambda'),
      handler: 'register.main',
    });

    const registerIntegration = new apigateway.LambdaIntegration(handler, {
      requestTemplates: { 'application/json': '{ "statusCode": "200" }' },
    });

    const registerResource = api.root.addResource('register');
    registerResource.addMethod('POST', registerIntegration);
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "commonjs",
    "moduleResolution": "node",
    "lib": ["es2018"],
    "declaration": true,
    "strict": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": false,
    "inlineSourceMap": true,
    "inlineSources": true,
    "experimentalDecorators": true,
    "strictPropertyInitialization": false,
    "outDir": "dist",
    "typeRoots": ["./node_modules/@types"]
  },
  "exclude": ["node_modules", "cdk.out", "./dist/**/*"]
}

And finally here is the script part of my package.json file:

  "scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "cdk": "cdk",
    "bootstrap": "cdk bootstrap",
    "deploy": "cdk deploy && rimraf cdk.out",
    "destroy": "cdk destroy",
    "run-same-local-fe-api": "sam local start-api -p 4000 -t ./template.yaml",
    "dev": "npm run build && npm run synth && concurrently --kill-others \"npm run watch\" \"npm run run-same-local-fe-api\"",
    "synth": "cdk synth --no-staging > template.yaml"
  },

The problem

When I run npm run dev it compiles my typescript files to the dist folder in the same structure as what I have in my src folder (where all my typescript files live). I however run into the following error if I have any imports in my register.ts file:

{"errorType":"Runtime.ImportModuleError","errorMessage":"Error: Cannot find module '../utils/forms'\nRequire stack:\n- /var/task/register.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js","stack":["Runtime.ImportModuleError: Error: Cannot find module '../utils/forms'","Require stack:","- /var/task/register.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js"," at _loadUserApp (/var/runtime/UserFunction.js:202:13)"," at Object.module.exports.load (/var/runtime/UserFunction.js:242:17)","
at Object. (/var/runtime/index.js:43:30)"," at Module._compile (internal/modules/cjs/loader.js:1085:14)"," at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)"," at Module.load (internal/modules/cjs/loader.js:950:32)"," at Function.Module._load (internal/modules/cjs/loader.js:790:12)"," at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12)"," at internal/main/run_main_module.js:17:47"]}

This happens for imports from relative local files (like '../utils/forms' as shown in the code above) but also for imports from node_modules. When I look into the compiled register.js file in the dist folder I see that it has made an attempt to parse the import:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const forms_1 = __importDefault(require("../utils/forms"));
const bucketName = process.env.BUCKET;

exports.main = async function (event, context) { ...

however it shows the error message above. I have tried using require instead of import but it was the same result...

Any help would be greatly appreciate! Thanks

aws-cdk typescript node.js amazon-web-services javascript
2 Answers

Stated that this is really hard to answer without a minimal reproducible example; I would at least suggest to avoid any require and exports, and to use only import / export statements and following in tsconfig.json.

{
  "compilerOptions": {
    "module": "esnext"
  }
}
user_46909460

Well.. I do understand that you want your main function to look something like this:

// final result written in javascript
exports.main = async function (event, context) {
  return {
      statusCode: 200,
    };
}

But... using module.exports in Typescript is not the way to achieve that. Instead, Typescript using export directive (no s at the end of it) to define which parts of your code should be export. It's then up to your tsconfig.json file to determine which syntax will be used in order to represent this export (this is actually a part of Typescript engine)

So... a script written like this in Typescript

export async function main(event: any, context: any) {
  return {
    statusCode: 200,
  };
}

Will be parse in Typescript as follow (I've used module: commonjs to achieve below result)

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.main = void 0;
async function main(event, context) {
    return {
        statusCode: 200,
    };
}
exports.main = main;
//# sourceMappingURL=test.js.map

Please note how the resulted js file correctly use modile.exports and main as you intended

In short: when using Typescript, please use the language directives and let the engine to do the rest for you. This way - a single source of code can be deployed for different environment without requireing changing your app logic. Neat!

user_40621970
Related