remotion icon indicating copy to clipboard operation
remotion copied to clipboard

Full support for "TypeScript Alias" in Remotion projects

Open mnlbox opened this issue 2 years ago • 0 comments

Feature Request 🛍️

I'm using a NX monorepo contains multiple Remotion projects. I have a shared @types package that contains all the shared typescript types, classes and interfaces that I used in all of my Remotion projects. So I have import lines like this:

import {MyType} from '@types';

Everything was working OK (honestly I wondered how it's working as Remotion not support alias 🤔 ) until I added an "enum" to my @types packages and changed one of my import commands to this:

import {MyType, MyEnum} from '@types';

and I see runtime errors like this:

ERROR in ./src/video-1/components/Caption.tsx 4:0-60
Module not found: Error: Can't resolve '@types' in '/video-1/src/code-tutorial/components'

There is no type error on vsCode during the development I just get this error on runtime.

After some research I found this issue: https://github.com/remotion-dev/remotion/issues/1964 And this article in the documentation: https://www.remotion.dev/docs/typescript-aliases

Use Case

I tried the approach mentioned in the docs to define my alias like this:

Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...(config.resolve?.alias ?? {}),
        "@types": path.join(process.cwd(), "packages", "types"),
      },
    },
  };
});

But it didn't work and I still have same issue only when I add the new enum to the import code.

Possible Solution

A solution is to don't use alias at all. But as I have very nested folder structure in my monorepo I ended up with import commands like this:

import {MyType, MyEnum}  from '../../../../../packages/types/src/index';

Now I have these questions: 1- Why Alias is working without any custom webpack config? 🤔 2- Why it's not working only for "ENUM" definitions? 3- Is there any easier way to use TypeScript Alias in Remotion? 4- Any plan to add Alias support without custom webpack config to Remotion?

mnlbox avatar Feb 26 '24 16:02 mnlbox