serverless framework not recognizing tsconfig's paths

Question

I'm trying to deploy my Node.js app to Lambda using Serverless framework, however, my Node code uses paths from tsconfig.json for referencing imports but the Serverless deploy process fails. How do you wire up serverless.yml to acknowledge and use paths defined in tsconfig.json?

I've installed serverless-plugin-typescript, but it does not seem to recognize paths from tsconfig.

serverless.yml

service:
  name: app-name

custom:
  webpack:
    webpackConfig: ./webpack.config.js
    includeModules: true

plugins:
  - serverless-webpack
  - serverless-plugin-typescript

...

tsconfig.ts

{
  "compileOnSave": true,
  "compilerOptions": {
    "lib": [
      "es2017"
    ],
    "baseUrl": "./src",
    "declaration": true,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "outDir": "./dist",
    "paths": {
      "@config/*": [
        "config/*"
      ],
      "@core/*": [
        "core/*"
      ],
      "@infra/*": [
        "infra/*"
      ],
      "@modules/*": [
        "modules/*"
      ],
      "@shared/*": [
        "shared/*"
      ]
    },
    "preserveConstEnums": true,
    "removeComments": true,
    "rootDir": "./src",
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "strictNullChecks": false,
    "target": "es2017",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "node"
    ]
  },
  "include": [
    "./**/*.ts"
  ],
  "exclude": [
    "node_modules/**/*",
    ".serverless/**/*",
    ".webpack/**/*",
    "_warmup/**/*",
    ".vscode/**/*"
  ]
}

Answer 1

I found an answer. Turns out you need to install tsconfig-paths-webpack-plugin. Then in webpack.config.js you add the following:

npm install --save-dev tsconfig-paths-webpack-plugin

inside webpack.config.js:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');


module.exports = {
  ...
  resolve: {
    plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })]
  },
  ...
};

NOTE: be sure to use the plugins inside the resolve section. There is a plugins a the root, however, TsconfigPathsPlugin only works in resolve/plugins.

I hope this helps you if you experience this same issue.