Laravel + React(TS)(Vite)環境での話だけど、React(TS)(Vite)のみの環境でも同じだと思う。
参考
目的
画像ファイルをimportすると下記エラーが出ることを解決して、画像を表示したい。
TS2307: Cannot find module '../../photographs/1/IMG_7784.webp' or its corresponding type declarations.
結論
tsconfig.jsonに1行追加すれば解決する。
ディレクトリ構造
photographs
└ 1
└ img.webp
tsx
└ entry
└ ImageTest.tsx
ImageTest.tsxの内容
import React from 'react';
import ReactDOM, { Container } from 'react-dom/client';
import temp from '../../photographs/1/IMG_7784.webp';
ReactDOM.createRoot(document.getElementById('root') as Container).render(
<React.StrictMode>
<div>ImageTest.tsx</div>
<img src={temp}/>
</React.StrictMode>,
);
試したこと
上記参考のページに下記が記載されていた。
TypeScript はデフォルトでは静的アセットのインポートを有効なモジュールとして認識しません。これを修正するには、vite/clientを追加します。
とのことなので、tsconfig.jsonを編集して下記のようになった。
{
"compilerOptions": {
"target": "ES2022",
"useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* 下記の行を追加 */
"types": ["vite/client"],
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
"noImplicitReturns": true,
"noImplicitOverride": true
},
"include": [
"resources/tsx/*.tsx",
"resources/tsx/**/*.tsx",
],
}
結果
画像は表示された。
ビルドをするとassetsフォルダ内に画像ファイルが追加されていることは確認できた。