【Vite React TypeScript】で絶対パスでimportする方法

2024年4月11日2024年9月25日

当ページのリンクには広告が含まれています。

Narazu

importする時、層が深すぎて../../../../../多すぎる。

上記のような可読性の低いコードは、エラーが起きやすく原因も分かりにくいです。

絶対パスでimportする方法

このメモを実行すれば上記の設定ができるようになります。

このメモの解消点

例えば以下のようなimport文がある場合

import axios from '../../api/lib/apiClient';

↓のようにimportできるようになります。

import axios from '@/api/lib/apiClient';

２つの設定ファイル

tsconfig.json
vite.config.ts

そんなに難しくないので、この記事を参考に解消しちゃってください。

Vite React TypeScriptの環境設定

Vite react TSの環境設定の方法は以下の記事を参考にしてください。

railsを使用しなくてもVite reactの部分だけを抜き取れば環境構築できると思います。

tsconfig.jsonの設定

tsconfig.jsonにcompilerOptionsがある場合、以下のように追加して終わりです。

{
  "compilerOptions": {
    // ......省略

    /* 以下追加 */
    "baseUrl": ".",
    "paths": {
      "@/*": [ "./src/*" ]
    }
    /* ここまで */
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

ない場合は以下に進んでください。

tsconfig.jsonにcomilerOptionsがない場合

vite reactのversionの違いからか、tsconfig.jsonにcomilerOptionが記述されていない場合があります。

その場合はtsconfig.app.jsonにあるのでそこに追記します。

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    // 以下追加
    "baseUrl": ".",
    "paths": {
      "@/*": [ "./src/*" ]
    }
  },
  "include": ["src"]
}

tsconfig.jsonにもcompilerOptionsを追加します。

以下を参考にしてみてください。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [ "./src/*" ]
    }
  },
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

vite.config.tsの設定

server: trueとなっていると思いますが、以下のように修正します。
既存のままだとエラーで画面が表示されない場合があるのでその場合は以下のように修正してみてください

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  server: {
    host: '0.0.0.0', //追加
    port: 5173,   //追加
  },
})