
How do you write your module imports?

In the case of relative paths, as the hierarchy deepens, it becomes less intuitive, with paths like `../../../../SomeComponent` stacking up, making it visually challenging. This is because relative paths are based on the file being imported.

On the other hand, there's a method called absolute paths, which start from a higher level in the hierarchy. Writing paths like `@/src/components/Layout/SomeComponent` with `@/` always starting from the same folder provides excellent clarity in hierarchy compared to relative paths.

This is a guide on how to import components using absolute paths instead of relative paths.

## Requirements

- React
- TypeScript
- Vite

ファイルディレクトリ

```text
/
  src/
    components/
    index.tsx

```

## Configuration Steps

### 1. Add the following to tsconfig.json

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

### 2. Add the following to vite.config.ts

```tsx
export default defineConfig({
  plugins: [
    ...
  ],
  resolve: {
    alias: {
      "@/src": "/src"
    },
  },
});
```

With these configurations, you have completed the setup.

## Example

For example, consider the following directory structure:

```text
src
|-- components/
|   |-- Button/
|       |-- Button.tsx
|
|-- pages/
    |-- UserProfile/
        |-- UserProfile.tsx
```

To import `Button.tsx`, you can write the import statement as follows:

```tsx
import Button from "@/src/components/Button/Button";
```


Use Absolute Import in React, TypeScript in 2 Steps

Tags