How to use TS Path Mapping with Firebase Cloud Functions

Question

How do I use TS Path Mapping with Firebase Cloud Functions? I tried without success:

"baseUrl": ".",
  "paths": {
    "@custom-path/*": ["src/utils/*"],
    "@other-path/*": ["../other/path/*"]
  }

Answer 1

Finally I was able to do this with module-alias NPM package.

1. Install it as non-dev dependency: yarn add module-alias @types/module-alias
2. Create a file fixTsPaths.ts or whatever with content like this:

import * as ModuleAlias from 'module-alias';

ModuleAlias.addAliases({
    'common': __dirname + '/../../../common',
});

Here's the trick about the path /../../../common : in my case this folder is outside functions , and Typescript replicates folders structure during the build, so that's could be the reason why https://github.com/dividab/tsconfig-paths was not working out of the box. So in every case one needs to check this path and find appropriate '..' count :)

3. And finally import this file in your index.ts at the very top:

import './fixTsPaths';

Hope this helps!

Answer 2

The problem is the rule no-implicit-dependencies: true on the tslint.json . You can pass additional params to whitelist your custom paths:

"no-implicit-dependencies": [true, ["@custom-path", "@other-path"]],

Answer 3

I was able to do this with @zerollup/ts-transform-paths NPM package.

1. Install @zerollup/ts-transform-paths as dev dependency: yarn add -D @zerollup/ts-transform-paths
2. Setup following config of webpack + ts-loader.

const tsTransformPaths = require('@zerollup/ts-transform-paths');

module.exports = {
  ... // other config
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: 'ts-loader',
        options: {
          getCustomTransformers: (program) => {
            const transformer = tsTransformPaths(program);

            return {
              before: [transformer.before], // for updating paths in generated code
              afterDeclarations: [transformer.afterDeclarations] // for updating paths in declaration files
            };
          }
        }
      }
    ]
  }
};

See more in detail: https://github.com/zerkalica/zerollup/tree/5aee60287647350215c81d0b2da5a30717d9dccb/packages/ts-transform-paths

Answer 4

for anyone who still struggles with this issue, but the below code at the top of the entry point file (main.ts). don't forget to adjust the tsconfig.json file path if it is not in the default location

const tsConfig = require('../tsconfig.json');
const tsConfigPaths = require('tsconfig-paths');
tsConfigPaths.register({
    baseUrl: __dirname,
    paths: tsConfig.compilerOptions.paths,
});

Answer 5

It's 2022 and the neatest way to do this is to use tsc-alias .

On tsconfig.json , add baseUrl and add your paths under compilerOptions . Something like:

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "@constants/*": ["api/constants/*"],
      "@interfaces/*": ["api/interfaces/*"],
      "@middlewares/*": ["api/middlewares/*"],
      "@modules/*": ["api/modules/*"],
      "@services/*": ["api/services/*"]
    },
    ...
}

Then, change your serve and build scripts, under package.json . Like:

...
  "scripts": {
    "build": "tsc && tsc-alias",
    "build:watch": "tsc-alias --watch",
    "serve": "concurrently --kill-others \"firebase emulators:start --only functions\" \"npm run build:watch\"",
    ...
  },
...

☝️ here I'm using concurrently , but feel free to use whatever you like.

And that's it. You can now import stuff using your defined paths, like:

import { messages } from '@constants/responses'
import CandidatesService from '@modules/candidates/candidates.service'
import { IModule } from '@interfaces/module.interface'

etc...