【解決】GitHub ActionsのViteビルドで「An import path can only end with a '.tsx'」が出る原因と対処法

Posted at 2025-10-09

問題

CI/CD（GitHub Actions）のビルドフェーズで次のエラーが発生。

Error: src/main.tsx(4,17): error TS5097:
An import path can only end with a '.tsx' extension when 'allowImportingTsExtensions' is enabled.

実際の src/main.tsx はこんな感じでした

import App from './App.tsx'; // 
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

ローカルでは npm run dev で問題なく動くのに、
GitHub Actions上では npm run build で止まるという状態。

Vite + TypeScript 環境では、
importの拡張子（.ts / .tsx）を省略して書くのが正しいルールです。

TypeScriptの設定で allowImportingTsExtensions が false の場合、
.tsx のような拡張子付きimportはビルド時にエラーになります。

① 該当ファイルを開く

src/main.tsx

② import文を修正

- import App from './App.tsx';
+ import App from './App';

③ ローカルで動作確認

npm run build

これでエラーが消えればOKです。

④ GitHub Actionsを再実行

git add src/main.tsx
git commit -m "Fix import path extension issue for Vite build"
git push

Actionsが自動で再実行され、
test → build → deploy の順に正常完了するはずです。

拡張子を省略して import App from './App' に修正することで解決しました。