You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: www/apps/book/app/learn/configurations/ts-aliases/page.mdx
+125-6Lines changed: 125 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,17 +4,30 @@ export const metadata = {
4
4
5
5
# {metadata.title}
6
6
7
-
By default, Medusa doesn't support TypeScript aliases in production.
7
+
In this chapter, you'll learn how to use TypeScript aliases in your Medusa application.
8
8
9
-
If you prefer using TypeScript aliases, install following development dependencies:
9
+
## Support for TypeScript Aliases
10
+
11
+
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.
12
+
13
+
If you prefer using TypeScript aliases, this section will guide you through the steps to enable them in your Medusa application.
14
+
15
+
### Step 1: Install Required Dependencies
16
+
17
+
Start by installing the following development dependencies:
10
18
11
19
```bash npm2yarn
12
20
npm install --save-dev tsc-alias rimraf
13
21
```
14
22
15
-
Where`tsc-alias` is a package that resolves TypeScript aliases, and `rimraf` is a package that removes files and directories.
23
+
Where:
16
24
17
-
Then, add a new `resolve:aliases` script to your `package.json` and update the `build` script:
25
+
-`tsc-alias` resolves TypeScript aliases.
26
+
-`rimraf` removes files and directories.
27
+
28
+
### Step 2: Update `package.json`
29
+
30
+
Then, add a new `resolve:aliases` script to your `package.json` and update the existing `build` script:
18
31
19
32
```json title="package.json"
20
33
{
@@ -26,7 +39,11 @@ Then, add a new `resolve:aliases` script to your `package.json` and update the `
26
39
}
27
40
```
28
41
29
-
You can now use TypeScript aliases in your Medusa application. For example, add the following in `tsconfig.json`:
42
+
### Step 3: Update `tsconfig.json`
43
+
44
+
Next, configure the TypeScript aliases you want to use in your `tsconfig.json` file by adding a `paths` property under `compilerOptions`.
45
+
46
+
For example, to import anything under the `src` directory using type aliases, add the following in `tsconfig.json`:
30
47
31
48
```json title="tsconfig.json"
32
49
{
@@ -39,8 +56,110 @@ You can now use TypeScript aliases in your Medusa application. For example, add
39
56
}
40
57
```
41
58
42
-
Now, you can import modules, for example, using TypeScript aliases:
59
+
### Step 4: Use TypeScript Aliases
60
+
61
+
Then, you can use the `@` alias in your application code.
62
+
63
+
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
72
+
73
+
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.
74
+
75
+
### Step 1: Update `src/admin/tsconfig.json`
76
+
77
+
Update `src/admin/tsconfig.json` to include `baseUrl` and `paths` configuration:
78
+
79
+
```json title="src/admin/tsconfig.json"
80
+
{
81
+
"compilerOptions": {
82
+
"baseUrl": ".",
83
+
"paths": {
84
+
"@/*": ["./*"]
85
+
}
86
+
87
+
// other options...
88
+
}
89
+
}
90
+
```
91
+
92
+
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.
93
+
94
+
### Step 2: Update `medusa-config.ts`
95
+
96
+
Next, update the `vite` configuration in `medusa-config.ts` to include the `resolve.alias` configuration:
97
+
98
+
```ts title="medusa-config.ts"
99
+
importpathfrom'path'
100
+
101
+
module.exports=defineConfig({
102
+
// ...
103
+
admin: {
104
+
vite: () => ({
105
+
resolve: {
106
+
alias: {
107
+
"@": path.resolve(__dirname, "./src/admin"),
108
+
},
109
+
},
110
+
}),
111
+
},
112
+
})
113
+
```
114
+
115
+
<Notetitle="Tip">
116
+
117
+
Learn more about the `vite` configuration in the [Medusa configuration](../medusa-config/page.mdx) chapter.
118
+
119
+
</Note>
120
+
121
+
### Step 3: Use TypeScript Aliases in Admin Customizations
122
+
123
+
You can now use the `@` alias in your admin customizations, just like you do in your main application code.
124
+
125
+
For example, if you have a component in `src/admin/components/Container.tsx`, you can import it in a widget like this:
126
+
127
+
```ts
128
+
importContainerfrom"@/components/Container"
129
+
```
130
+
131
+
### Match TSConfig and Vite Alias Configuration
132
+
133
+
Make sure that the `@` alias points to the same path as in your `src/admin/tsconfig.json`.
134
+
135
+
For example, if you set the `@/*` alias to point to `./components/*`:
0 commit comments