InertiaJS - React is not defined

Question

I followed the server-side and client-side instructions on the InertiaJS website for setting it up in an existing Laravel project.

This is my app.jsx file:

import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
    return pages[`./Pages/${name}.jsx`]
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />)
  },
})

I have the following in resources/js/Pages/HelloWorld.jsx:

import React from 'react'
import { Head } from '@inertiajs/react'

export default function HelloWorld () {
  return (
    <div>
      <Head title="Hello World" />
      <h1>Hello World</h1>
    </div>
  )
}

And the following in routes/web.php:

Route::get('/hello', function () {
    return \Inertia\Inertia::render('HelloWorld');
});

When I run the server and visit /hello I get a blank page with an error in the console saying React is not defined.

I have tried npm install react and npm install react-dom with no success. I have tried clearing cache, deleting node_modules and running npm install again. It continues to just say that React is not defined.

What could be the issue?

user12394698 · Accepted Answer · 2023-05-25 01:04:54Z

2

You need to install@vitejs/plugin-react

https://laravel.com/docs/10.x/vite#react

answered May 25, 2023 at 1:04

user12394698

361 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

InertiaJS - React is not defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related