6.3. Using TypeScript Aliases
In this chapter, you'll learn how to use TypeScript aliases in your Medusa application.
Support for TypeScript Aliases#
By default, Medusa doesn't support TypeScript aliases in production. That means you may get build errors in production if you use them in your development.
If you prefer using TypeScript aliases, this section will guide you through the steps to enable them in your Medusa application.
Step 1: Install Required Dependencies#
Start by installing the following development dependencies:
Where:
tsc-alias
resolves TypeScript aliases.rimraf
removes files and directories.
Step 2: Update package.json
#
Then, add a new resolve:aliases
script to your package.json
and update the existing build
script:
Step 3: Update tsconfig.json
#
Next, configure the TypeScript aliases you want to use in your tsconfig.json
file by adding a paths
property under compilerOptions
.
For example, to import anything under the src
directory using type aliases, add the following in tsconfig.json
:
Step 4: Use TypeScript Aliases#
Then, you can use the @
alias in your application code.
For example, if you have a service in src/modules/brand/service.ts
, you can import it like this:
Support TypeScript Aliases for Admin Customizations#
Medusa also doesn't support TypeScript aliases in the admin customizations by default. However, you can also configure your Medusa application to use TypeScript aliases in your admin customizations.
Step 1: Update src/admin/tsconfig.json
#
Update src/admin/tsconfig.json
to include baseUrl
and paths
configuration:
The baseUrl
option sets the base directory to src/admin
, and the paths
option defines the @
alias to allow importing files from the src/admin
directory using aliases.
Step 2: Update medusa-config.ts
#
Next, update the vite
configuration in medusa-config.ts
to include the resolve.alias
configuration:
Step 3: Use TypeScript Aliases in Admin Customizations#
You can now use the @
alias in your admin customizations, just like you do in your main application code.
For example, if you have a component in src/admin/components/Container.tsx
, you can import it in a widget like this:
Match TSConfig and Vite Alias Configuration#
Make sure that the @
alias points to the same path as in your src/admin/tsconfig.json
.
For example, if you set the @/*
alias to point to ./components/*
:
Then, the vite
alias configuration would be: