Full support for "TypeScript Alias" in Remotion projects
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?