Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

onecollectiveDev's avatar

Proper typing for app.ts[x] file. Inertia, react, and typescript.

I am trying to clean up my 'working' app.tsx file. I just added ESlint and now I'm forcing myself to type things properly but ran into a few questions.

The core questions here are

  1. Should my app.tsx file be a .ts or a .tsx? My thought was tsx because it creates a react component, but it seems to blur the line/I do not know enough about Inertia.
  2. What to do with Axios? I have seen mixed things about this but am getting the type error "window" is not defined. Also, Axios is not defied sense it is being loaded by Laravel (I think...).
  3. "Promises must be awaited" for the createInertiaApp function.
  4. ScritMode error "cannot find name StrictMode." I think I should add a check to disable Strict mode for react unless it is in development mode, so that is on the list of todos, but the type error is the focus today.
  5. createRoot(el).render(<App {...props} />); - "'App' refers to a value, but is being used as a type here. Did you mean 'typeof App'?"

Trying to understand this whole process better but have been struggling to find resources related to react inertia.js.

import { createInertiaApp } from "@inertiajs/react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "../css/app.css";

// set up axios to auto get the csrf token
import axios from "axios";
window.axios = axios;
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

const appName = import.meta.env.VITE_APP_NAME || "Laravel";

createInertiaApp({
	title: (title) => `${title} - ${appName}`,
	resolve: (name: string) => {
		// handles requesting page in controller with both folder/file.tsx and folder.file.tsx
		if (name?.includes(".")) {
			name = name.replace(".", "/");
		}
		const pages = import.meta.glob("./Pages/**/*.tsx", { eager: true });
		return pages[`./Pages/${name}.tsx`];
	},

	setup({ el, App, props }) {
		if (import.meta.env.DEV) {
			createRoot(el).render(
				<StrictMode>
					<App {...props} />
				</StrictMode>,
			);
		} else {
			createRoot(el).render(<App {...props} />);
		}
	},
});
0 likes
0 replies

Please or to participate in this conversation.