I’m building an application with Laravel + React. I use Inertia.js to combine the two. The project was generated through Vite.js, which is also used.
I now have built a table, which is responsive so I can make changes to it and these changes should be saved to the database when I click save. This works, however, I keep getting the error this.resolveComponent is not a function whenever the table should be re-rendered. It seems that I cannot re-render components for some reason and I tried everything I can think of.
app.jsx
<code>import './bootstrap';
import '../css/app.css';
import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
setup({ el, App, props }) {
const root = createRoot(el);
root.render(<App {...props} />);
},
progress: {
color: '#4B5563',
},
});
</code>
<code>import './bootstrap';
import '../css/app.css';
import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
setup({ el, App, props }) {
const root = createRoot(el);
root.render(<App {...props} />);
},
progress: {
color: '#4B5563',
},
});
</code>
import './bootstrap';
import '../css/app.css';
import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
setup({ el, App, props }) {
const root = createRoot(el);
root.render(<App {...props} />);
},
progress: {
color: '#4B5563',
},
});
Can you guys give me any advice? I cannot seem to fix this and there is not much online about this issue either.
Alright, I don’t know what I did wrong, but I decided to create a clean Laravel/React/InertiaJS (+ Laravel Breeze for the auth stuff) stack using Vite and then moved all my code over to the new project. I suppose something was wrong with my project, as of now it works perfectly.
If anyone ever wants to try the same solution, here are the commands I used to build a new project (these instructions were generated using ChatGPT):
- Install Laravel:
Ensure you have Composer installed, then create a new Laravel project.<code>composer create-project --prefer-dist laravel/laravel myshopcd myshop</code><code>composer create-project --prefer-dist laravel/laravel myshop cd myshop </code>composer create-project --prefer-dist laravel/laravel myshop cd myshop
2. Install Laravel Breeze
-
Install Laravel Breeze:
Laravel Breeze provides a minimal implementation of all of Laravel’s authentication features using Blade. Since we want to use React with InertiaJS, we need the React preset.<code>composer require laravel/breeze --devphp artisan breeze:install react</code><code>composer require laravel/breeze --dev php artisan breeze:install react </code>composer require laravel/breeze --dev php artisan breeze:install react -
Install & Build Frontend Assets:
<code>npm install && npm run dev</code><code>npm install && npm run dev </code>npm install && npm run dev
3. Install Laravel InertiaJS
-
Install InertiaJS Server-side:
<code>composer require inertiajs/inertia-laravel</code><code>composer require inertiajs/inertia-laravel </code>composer require inertiajs/inertia-laravel -
Install Inertia Middleware:
After installation, register the middleware in your
AppHttpKernel.phpfile:<code>'web' => [// Other middleware...AppHttpMiddlewareHandleInertiaRequests::class,],</code><code>'web' => [ // Other middleware... AppHttpMiddlewareHandleInertiaRequests::class, ], </code>'web' => [ // Other middleware... AppHttpMiddlewareHandleInertiaRequests::class, ],
4. Setup Vite with React and InertiaJS
-
Install Client-side Dependencies with Vite:
<code>npm install @inertiajs/react @vitejs/plugin-react vite axios</code><code>npm install @inertiajs/react @vitejs/plugin-react vite axios </code>npm install @inertiajs/react @vitejs/plugin-react vite axios -
Configure Vite:
Replace contents of yourvite.config.jswith:<code>import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import path from 'path';export default defineConfig({plugins: [react()],resolve: {alias: {'@': path.resolve(__dirname, 'resources/js'),},},server: {watch: {usePolling: true,},},});</code><code>import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import path from 'path'; export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, 'resources/js'), }, }, server: { watch: { usePolling: true, }, }, }); </code>import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import path from 'path'; export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, 'resources/js'), }, }, server: { watch: { usePolling: true, }, }, });
5. Setup Inertia React Components
-
Update Resources JS Structure:
Create folders for your React components if they don’t already exist:<code>mkdir -p resources/js/Pages resources/js/Componentstouch resources/js/Pages/Dashboard.jsx resources/js/Pages/Login.jsx</code><code>mkdir -p resources/js/Pages resources/js/Components touch resources/js/Pages/Dashboard.jsx resources/js/Pages/Login.jsx </code>mkdir -p resources/js/Pages resources/js/Components touch resources/js/Pages/Dashboard.jsx resources/js/Pages/Login.jsx -
Create an
app.jsxentry point:
Inresources/js, createapp.jsx:<code>import React from 'react';import { render } from 'react-dom';import { createInertiaApp } from '@inertiajs/react';import { InertiaProgress } from '@inertiajs/progress';import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';createInertiaApp({resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`,import.meta.glob('./Pages/**/*.jsx')),setup({ el, App, props }) {render(<App {...props} />, el);},});InertiaProgress.init();</code><code>import React from 'react'; import { render } from 'react-dom'; import { createInertiaApp } from '@inertiajs/react'; import { InertiaProgress } from '@inertiajs/progress'; import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; createInertiaApp({ resolve: (name) => resolvePageComponent( `./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx') ), setup({ el, App, props }) { render(<App {...props} />, el); }, }); InertiaProgress.init(); </code>import React from 'react'; import { render } from 'react-dom'; import { createInertiaApp } from '@inertiajs/react'; import { InertiaProgress } from '@inertiajs/progress'; import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; createInertiaApp({ resolve: (name) => resolvePageComponent( `./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx') ), setup({ el, App, props }) { render(<App {...props} />, el); }, }); InertiaProgress.init();
6. Update Laravel Blade View
- Add Main Inertia View:
Updateresources/views/app.blade.phpor create it:<code><!DOCTYPE html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title inertia>{{ config('app.name', 'Laravel') }}</title>@viteReactRefresh@vite('resources/js/app.jsx')@inertiaHead</head><body class="font-sans antialiased">@inertia</body></html></code><code><!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title inertia>{{ config('app.name', 'Laravel') }}</title> @viteReactRefresh @vite('resources/js/app.jsx') @inertiaHead </head> <body class="font-sans antialiased"> @inertia </body> </html> </code><!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title inertia>{{ config('app.name', 'Laravel') }}</title> @viteReactRefresh @vite('resources/js/app.jsx') @inertiaHead </head> <body class="font-sans antialiased"> @inertia </body> </html>
7. Run Migrations and Build Project
-
Run Migrations:
<code>php artisan migrate</code><code>php artisan migrate </code>php artisan migrate -
Run the Development Server:
<code>php artisan servenpm run dev</code><code>php artisan serve npm run dev </code>php artisan serve npm run dev
8. Setup Inertia Links in Laravel Breeze
- Update Auth Components:
Ensure that your Breeze auth components use Inertia for navigation. You can wrap form submissions in auseFormhook from Inertia, for instance. For example, in yourLogin.jsx:<code>import React from 'react';import { useForm } from '@inertiajs/react';export default function Login() {const { data, setData, post } = useForm({email: '',password: '',remember: false,});const submit = (e) => {e.preventDefault();post(route('login'));};return (<form onSubmit={submit}>{/* Your form fields */}</form>);}</code><code>import React from 'react'; import { useForm } from '@inertiajs/react'; export default function Login() { const { data, setData, post } = useForm({ email: '', password: '', remember: false, }); const submit = (e) => { e.preventDefault(); post(route('login')); }; return ( <form onSubmit={submit}> {/* Your form fields */} </form> ); } </code>import React from 'react'; import { useForm } from '@inertiajs/react'; export default function Login() { const { data, setData, post } = useForm({ email: '', password: '', remember: false, }); const submit = (e) => { e.preventDefault(); post(route('login')); }; return ( <form onSubmit={submit}> {/* Your form fields */} </form> ); }