Level 102
Did you forget to import react?
import React from 'react'
Dec 27, 2021
10
Level 7
vite - inertia - react
I followed this guide: https://dev.to/kodeas/using-vite-with-inertia-laravel-vue-tailwind-2h5k
The difference: I need to react
Everything seems fine except for this section:
import { InertiaProgress } from '@inertiajs/progress'
...
InertiaProgress.init()
createInertiaApp({
resolve: name => {
const page = require(`./Pages/${name}`).default
if(page.layout === undefined && name.startsWith('SuperAdmin/Company/')){
page.layout = page => (<AdminLayout>
<LayoutCompany>{page}</LayoutCompany>
</AdminLayout>)
}
...
return page;
},
setup({ el, App, props }) {
render(<App {...props} />, el)
},
})
I get the following error
> resources/js/app.js:15:35: error: Unexpected "<"
15 │ page.layout = page => (<AdminLayout>
╵
What can help?
Level 7
@Sinnbeck Of course I brought that too
I have reduced the code I copied here to a minimum
Level 102
According to the docs it just takes the import of the layout
page.layout = page => AdminLayout
In the AdminLayout component you can do the nesting
Level 7
@Sinnbeck Until I changed to vite everything worked fine, I do not think that is the problem
Level 102
Well I am using react with vite myself and its working fine. I am using an older version of inertia though. This is how my resolveComponent looks. This might be needed for the rest to work :)
resolveComponent={async (name) => {
const pages = import.meta.glob('./Pages/**/*.jsx');
return (await pages[`./Pages/${name}.jsx`]()).default;
}}
Level 102
Here is my best guess as to how yours should look
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.jsx');
const page = (await pages[`./Pages/${name}.jsx`]()).default;
if(page.layout === undefined && name.startsWith('SuperAdmin/Company/')){
page.layout = page => (<AdminLayout>
<LayoutCompany>{page}</LayoutCompany>
</AdminLayout>)
}
...
return page;
},
Level 102
This is the guide I followed: https://sebastiandedeyne.com/vite-with-laravel/inertia/
Level 7
I found the right answer
I have worked so far with mix
And the file extensions are js
vite requires jsx extensions
Please or to participate in this conversation.