Laravel × Reactでの開発においてcomponentをimportする際に、相対パスを書く手間が省くために
エイリアスを設定することがあるかと思います。
その際に、コンパイルは通るのにVScode上で以下のメッセージが出て真っ赤になってしまいはまったので備忘録を残します。
モジュール XXX またはそれに対応する型宣言が見つかりません。ts(2307)
//or
`TS2307: Cannot find module XXX or its corresponding type declarations.`環境
- Laravel
- Vite
- React
- TypeScript
vite-tsconfig-paths
まずvite-tsconfig-pathsというプラグインをインストールしました。
これを使えばvite.config.ts に alias の設定を書く必要がなくなるらしいのですが、私の環境ではなぜかaliasの設定を省略するとエラーが…
しかし、このプラグインがないとVSCodeのエラーとパスエイリアスの設定の両方を解決できなかったのでそのまま活用….
npm i -D vite-tsconfig-pathshttps://github.com/aleclarson/vite-tsconfig-paths
vite.config.ts
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths"; //vite-tsconfig-paths
export default defineConfig({
server: {
hmr: {
host: "localhost",
},
},
plugins: [
laravel({
input: ["resources/css/app.css", "resources/ts/index.tsx"],
refresh: true,
}),
react(),
tsconfigPaths(), //vite-tsconfig-paths
],
resolve: {
alias: {
"@": "resources/ts",
},
},
});
ここでaliasを登録するとコンパイルは通るが、VSCode上ではアラートがでる。
なのでtsconfig.jsonでbaseUrlとpathsを設定する必要があります。
tsconfig.json
tsconfig.jsonで以下を設定します。
"baseUrl": "." ,
"paths": {
"@/*": ["resources/ts/*"]
}これでなんとかVSCodeのエラーがなくなりました！！
関連記事
