Cause and solution for "An import path can only end with a '.tsx'" error when building a Vite project using GitHub Actions

Problem

The following error occurred during the build phase of 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.

The actual src/main.tsx looked like this:

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

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

Locally, npm run dev works without any problems, but on GitHub Actions, npm run build fails.

Cause

In a Vite + TypeScript environment,
it is correct to omit the import extension (.ts / .tsx).

If allowImportingTsExtensions is set to false in the TypeScript configuration,
imports with extensions such as .tsx will result in a build error.

Solution

1. Open the relevant file.

src/main.tsx

1. Correct the import statements.

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

1. Test locally.

npm run build

If the error disappears, the project is OK.

④ Rerun GitHub Actions

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

Actions will be automatically rerun, and
test → build → deploy should complete successfully in that order.

Summary

Omitting the extension and changing it to import App from './App' resolved the issue.