tsconfigファイルのエイリアス問題

npm create cloudflare@latest -- my-react-app --framework=reactで設置したプロジェクトの、@エイリアスが設定されていなかったから、したら少し躓いたからメモ

tsconfigPathsをインストール

npm install -D vite-tsconfig-paths

tsconfig.base.jsonを作成

{  
  "compilerOptions": {  
    "baseUrl": "./",  
    "paths": {  
      "@/*": ["./src/*"],  
      "~/*": ["./public/*"]  
    }  
  },  
  "include": [  
    "**/*.ts",  
    "**/*.tsx",  
    "**/*.css"  
  ]  
}

tsconfig.app.json・tsconfig.node.jsonに

{
	"extends": "./tsconfig.base.json", // ←追加する
	"compilerOptions": {
		...
	}
}

vite.config.tsに以下を追加

export default defineConfig({  
    plugins: [  
	// ここから
        tsconfigPaths(  
            {  
                projects: ["tsconfig.base.json"]
            }  
        ),  
	// ここまで
        react(),  
        cloudflare()  
    ],  
})