export const metadata = { title: ${pageNumber} Using TypeScript Aliases, }

{metadata.title}

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 install --save-dev tsc-alias rimraf

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:

{
  "scripts": {
    // other scripts...
    "resolve:aliases": "tsc --showConfig -p tsconfig.json > tsconfig.resolved.json && tsc-alias -p tsconfig.resolved.json && rimraf tsconfig.resolved.json",
    "build": "medusa build && npm run resolve:aliases"
  }
}

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:

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

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:

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:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"] 
    }

    // other options...
  }
}

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:

import path from "path"

module.exports = defineConfig({
  // ...
  admin: {
    vite: () => ({
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src/admin"),
        },
      },
    }),
  },
})

Learn more about the vite configuration in the Medusa configuration chapter.

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:

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

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./components/*"]
    }
  }
}

Then, the vite alias configuration would be:

import path from "path"

module.exports = defineConfig({
  // ...
  admin: {
    vite: () => ({
      resolve: {
        alias: {
          "@": path.resolve(__dirname, "./src/admin/components"),
        },
      },
    }),
  },
})