Laravel 9 + Inertia.js + React + TypeScript

Create New Project

$ composer create-project laravel/laravel demo "9.0.0"

Resources

• Inertia Installation
• Typescript with Laravel
• Laravel and Inertia with React and TypeScript
• Github Demo — If you want to check final code you can go here

Server Side

Follow Inertia official docs to setup server-side.

Client Side

$ npm install react react-dom @types/react @types/react-dom
 $ npm i @inertiajs/inertia @inertiajs/inertia-react
 $ npm i -D ts-loader typescript
 $ npx tsc --init --jsx react

• Modify resources/js/*.js to *.tsx

import './bootstrap';
 import React from 'react';
 import { render } from 'react-dom';
 import { createInertiaApp } from '@inertiajs/inertia-react';
 import { InertiaProgress } from '@inertiajs/progress';
 ​
 InertiaProgress.init();
 ​
 createInertiaApp({
   resolve: (name) => import(`./Page/${name}`),
   setup({ el, App, props }) {
     render(<App {...props} />, el)
   }
 });

• Modify webpack.mix.js

mix.ts('resources/js/app.tsx', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       //
   ])
   .webpackConfig({
     output: {
       chunkFilename: 'js/[name].js?id=[chunkhash]'
     }
   });

• To support code split modify tsconfig.json

{
   // ...
   "module": "esnext",
   "moduleResolution": "node", 
 }