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:

npm
yarn
pnpm

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:

package.json
1{2  "scripts": {3    // other scripts...4    "resolve:aliases": "tsc --showConfig -p tsconfig.json > tsconfig.resolved.json && tsc-alias -p tsconfig.resolved.json && rimraf tsconfig.resolved.json",5    "build": "medusa build && npm run resolve:aliases"6  }7}

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:

tsconfig.json
1{2  "compilerOptions": {3    // ...4    "paths": {5      "@/*": ["./src/*"]6    }7  }8}

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:

Code
import { BrandModuleService } from "@/modules/brand/service"

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:

src/admin/tsconfig.json
1{2  "compilerOptions": {3    "baseUrl": ".",4    "paths": {5      "@/*": ["./*"] 6    }7
8    // other options...9  }10}

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:

medusa-config.ts
1import path from "path"2
3module.exports = defineConfig({4  // ...5  admin: {6    vite: () => ({7      resolve: {8        alias: {9          "@": path.resolve(__dirname, "./src/admin"),10        },11      },12    }),13  },14})

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:

Code
import Container from "@/components/Container"

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/*:

src/admin/tsconfig.json
1{2  "compilerOptions": {3    "baseUrl": ".",4    "paths": {5      "@/*": ["./components/*"]6    }7  }8}

Then, the vite alias configuration would be:

medusa-config.ts
1import path from "path"2
3module.exports = defineConfig({4  // ...5  admin: {6    vite: () => ({7      resolve: {8        alias: {9          "@": path.resolve(__dirname, "./src/admin/components"),10        },11      },12    }),13  },14})