SAM deploying TypeScript source code instead of the transpiled JavaScript

[seansica]

My build process successfully outputs webpack .js artifacts. However, when I deploy to AWS, only the original TypeScript files get uploaded, not the transpiled .js and .map.js files shown below. I cannot for the life of me figure out why this is happening.

Running webpack-cli produces:

.aws-sam
└── build
    ├── ConfigFunction
    │   ├── index.js
    │   └── index.js.map
    ├── DiscordNotifierFunction
    │   ├── index.js
    │   └── index.js.map
    ├── QueuePublisherFunction
    │   ├── index.js
    │   └── index.js.map
    ├── ShopifySyncFunction
    │   ├── index.js
    │   └── index.js.map
    └── template.yaml

But when I deploy the stack, the deployed lambda packages only include the orginal TypeScript files, not the webpack bundles.

Example:

Ignore the fact that the file is named app instead of index -- this is because I've been trying different things and happened to grab a screenshot before I switched to using index. The important part is that the .ts source code is getting deployed instead of the .js files that are generated in the .aws-sam/build directory.

Here is my webpack config. Note that I added an --env flag to webpack to more easily switch between template.prod.yaml and template.dev.yaml.

webpack.config.cjs:

const path = require("path");
const AwsSamPlugin = require("aws-sam-webpack-plugin");

const getEnvironment = (env) => {
    if (env.prod) {
        return 'prod';
    }
    if (env.dev) {
        return 'dev';
    }
    throw new Error('No valid Webpack environment set');
};

module.exports = (env) => {
    const environment = getEnvironment(env);
    const awsSamPlugin = new AwsSamPlugin({
        projects: {
            [environment]: `./template.${environment}.yaml`,
        },
        outFile: "index"
    });
    return {
        entry: () => awsSamPlugin.entry(),
        output: {
            filename: (chunkData) => awsSamPlugin.filename(chunkData),
            libraryTarget: "commonjs2",
            path: path.resolve("."),
        },
        devtool: "source-map",
        resolve: {
            extensions: [".ts", ".js"],
        },
        target: "node",
        externals: process.env.NODE_ENV === "development" ? [] : ["aws-sdk"],
        mode: process.env.NODE_ENV || "production",
        module: {
            rules: [{ test: /\.tsx?$/, loader: "ts-loader" }],
        },
        plugins: [awsSamPlugin],
    };
};

To deploy, I run sam deploy --config-env dev or sam deploy --config-env default.

samconfig.toml:

version = 0.1
[default]
[default.deploy]
[default.deploy.parameters]
stack_name = "shopify-bot"
s3_bucket = "aws-sam-cli-managed-default-samclisourcebucket-1n1zoqn89o0dg"
s3_prefix = "shopify-bot"
region = "us-east-1"
confirm_changeset = true
capabilities = "CAPABILITY_IAM"
image_repositories = []
profile = "AdministratorAccess-328571739532"
template_file = "template.prod.yaml"

[dev]
[dev.deploy]
[dev.deploy.parameters]
stack_name = "shopify-bot-dev"
s3_bucket = "aws-sam-cli-managed-default-samclisourcebucket-csuag1qx37c0"
s3_prefix = "shopify-bot-dev"
region = "us-east-2"
confirm_changeset = true
capabilities = "CAPABILITY_IAM"
image_repositories = []
profile = "AdministratorAccess-328571739532"
template_file = "template.dev.yaml"

Here is how my lambda files are organized:

├── lambdas
│   ├── checkAllInventory
│   │   └── index.ts
│   ├── config
│   │   └── index.ts
│   ├── discordNotifier
│   │   └── index.ts
│   ├── queuePublisher
│   │   └── index.ts
│   └── shopifySync
│       └── index.ts
├── package-lock.json
├── package.json

Here are the CodeUri and Handler properties declared in my SAM templates:

Resources:

  ConfigFunction:
    Type: AWS::Serverless::Function
    Properties:
      FunctionName: ConfigFunction
      CodeUri: lambdas/config
      Handler: index.handler

  ShopifySyncFunction:
    Type: AWS::Serverless::Function
    Properties:
      FunctionName: ShopifySyncFunction
      CodeUri: lambdas/shopifySync
      Handler: index.handler

  QueuePublisherFunction:
    Type: AWS::Serverless::Function
    Properties:
      FunctionName: QueuePublisherFunction
      CodeUri: lambdas/queuePublisher
      Handler: index.handler

  DiscordNotifierFunction:
    Type: AWS::Serverless::Function
    Properties:
      FunctionName: DiscordNotifierFunction
      CodeUri: lambdas/discordNotifier
      Handler: index.handler

Any help in understanding why SAM is deploying TypeScript files despite webpack correctly outputting ECMAScript files to .aws-sam/build/ would be appreciated!