Setup Inertia JS with Typescript

[felipeva]

Hi guys, I hope you're doing great today!

I've been searching for an example of how to setup inertia-react with Typescript. I tried with some examples I found doing some research, but I failed.

This was the more complete example I found: https://dev.to/zubairmohsin33/laravel-and-inertia-with-react-and-typescript-18g

But I got a TS warning that said to add a required prop called InitialComponent, but I actually don't know what to put there.

[rafalkrawiec]

HI, check this entrypoint file example here, that I use in my project:

import {Inertia}         from "@inertiajs/inertia";
import {InertiaApp}      from "@inertiajs/inertia-react";
import {InertiaProgress} from "@inertiajs/progress";
import React             from "react";
import ReactDOM          from "react-dom";
import LoadingScreen     from "resources/js/App/Web/Components/LoadingScreen";
import AppLayout         from "resources/js/App/Web/Layouts/AppLayout";
import ErrorLayout       from "resources/js/App/Web/Layouts/ErrorLayout";

InertiaProgress.init({
  showSpinner: true,
});

const app  = document.getElementById("app") as HTMLElement;
const init = JSON.parse(app.dataset.page as string);

const resolver = (name: string) => import(`../../Pages/${name}`).then((module) => {
  const page = module.default;

  if (name === "Web/Error") {
    page.layout = (page: any) => <ErrorLayout children={page}/>;

    return page;
  }

  if (page.layout === undefined) {
    page.layout = (page: any) => <AppLayout children={page}/>;
  }

  return page;
});

ReactDOM.render(<InertiaApp initialPage={init} resolveComponent={resolver} initialComponent={LoadingScreen}/>, app);

Of course you would need to change paths and components to match your project, but here is all that I've found usable in typical Inertia app, so you have a default layout handling here as well as error pages.

The initial component is basically any component you want to render before Inertia finishes rendering the page. It might be some kind of loader or just an empty component, depending on your needs. I use something as simple as this:

import React from "react";


const LoadingScreen = () => (
  <div>Loading...</div>
);

export default LoadingScreen;

This component is only shown when you first visit the page and inertia has to start up. In my case the pages are loading so fast that it's actually never visible unless I break something and Inertia won't start :)

For reference here is my tsconfig.json file:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "jsx": "react",
        "strict": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "noImplicitThis": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "baseUrl": ".",
        "paths": {
            "*": [
                "*"
            ]
        }
    },
    "include": [
        "resources/assets",
        "resources/js"
    ],
    "exclude": [
        "node_modules"
    ]
}

Hope it was helpful.

[felipeva]

Hey @rafalkrawiec I really appreciate your help! I was able to make it works with your example! Thank you!!

[gozonjoedaimar]

Hey guys, I'm having an issue on the setup. I'm getting this error on vscode.

Type '() => JSX.Element' is not assignable to type 'ReactNode'.ts(2322)

on this line

initialComponent={LoadingScreen}

[gozonjoedaimar]

I got rid of the error by doing this

initialComponent={<LoadingScreen />}

and able to compile it successfully by running mix

mix.ts('resources/js/app.tsx', 'public/js')
    .react()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .version();

but I'm having this issue on the frontend

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a 
class/function (for composite components) but got: <LoadingScreen />. 
Did you accidentally export a JSX literal instead of a component?

[gozonjoedaimar]

I was able to fix my issue. Please see this issue#1343.

[gozonjoedaimar]

Here's what worked for me

import React from 'react';
import { createRoot } from 'react-dom/client';
import { App } from '@inertiajs/inertia-react';
import { InertiaProgress } from '@inertiajs/progress';

InertiaProgress.init();

const app  = document.getElementById("app") as HTMLElement;
const init = JSON.parse(app.dataset.page as string);

const resolver = (name: string) => import(`./Pages/${name}`).then((module) => {
  const page = module.default;

  // if (name === "Web/Error") {
  //   page.layout = (page: any) => <ErrorLayout children={page}/>;

  //   return page;
  // }

  // if (page.layout === undefined) {
  //   page.layout = (page: any) => <AppLayout children={page}/>;
  // }

  return page;
});

const titleCallback = (title: string) => title + " - " + "App name";

let root = createRoot(app);

root.render(<App titleCallback={titleCallback} initialPage={init} resolveComponent={resolver} initialComponent={require('./LoadingScreen').default} />);