Jun 3, 2024
0
Level 2
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
- 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.
- 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...).
- "Promises must be awaited" for the createInertiaApp function.
- 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.
-
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} />);
}
},
});
Please or to participate in this conversation.