Skip to main content

TypeScript aliases

Typescript aliases are not supported by default, since the ESBuild Webpack loader we have does not support them. You can however patch the Webpack config to make them resolve.

Assuming you have a file:

 └── src/
   ├── lib/
   │   ├── one.ts
   │   ├── two.ts
   ├── Root.tsx
   └── index.ts
 └── src/
   ├── lib/
   │   ├── one.ts
   │   ├── two.ts
   ├── Root.tsx
   └── index.ts

and your tsconfig.json has the following paths:

json
{
  "compilerOptions": {
    "paths": {
      "lib/*": ["./src/lib/*"]
    }
  }
}
json
{
  "compilerOptions": {
    "paths": {
      "lib/*": ["./src/lib/*"]
    }
  }
}

you can add the aliases to Webpack, however you need to add each of them manually:

ts
import path from "path";
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...(config.resolve?.alias ?? {}),
        lib: path.join(process.cwd(), "src", "lib"),
      },
    },
  };
});
ts
import path from "path";
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...(config.resolve?.alias ?? {}),
        lib: path.join(process.cwd(), "src", "lib"),
      },
    },
  };
});

Remember that in Node.JS APIs, the config file does not apply, so you need to add the Webpack override also to the bundle() and deploySite() functions.

Automatically syncing Webpack and TypeScript aliases​

To not duplicate the aliases in your Webpack override and in your tsconfig.json, you can install tsconfig-paths-webpack-plugin and use it:

ts
import path from "path";
import { Config } from "@remotion/cli/config";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...replaced.resolve,
      plugins: [
        ...(replaced.resolve?.plugins ?? []),
        new TsconfigPathsPlugin(),
      ],
    },
  };
});
ts
import path from "path";
import { Config } from "@remotion/cli/config";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...replaced.resolve,
      plugins: [
        ...(replaced.resolve?.plugins ?? []),
        new TsconfigPathsPlugin(),
      ],
    },
  };
});

See also​