Sep 25, 2023
0
Level 1
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object,In SSR
I have a big problem with SSR in Laravel, Inertia, and React. The problem because I have only in SSR mode and I don't have this problem in the dev & CSR modes.
I use Laravel-inertia-react-vite
Home.jsx:
import MasterLayout from "@/Layouts/MasterLayout";
import CourseCard from "@/Components/CourseCard";
export default function Home({courses}){
return(
<>
<MasterLayout >
<CourseCard courses={courses.slice(0,2)}/>
</MasterLayout />
</>
)
now in CourseCard.jsx:
export default function CourseCard({courses}) {
return (
<>
<div>
{courses.map(({ id, title, slug, poster, description, status, price, type, time, has_favorited }) => (
{/*others code*/}
</div>
</div>
</div>
</div>
</div>
))}
</div>
</>
);
}
course data:
(4) [{…}, {…}, {…}, {…}]
0
:
{id: 5, user_id: 1, type: 'payment', title: 'React.js', category: 'javascript', …}
1
:
{id: 3, user_id: 1, type: 'payment', title: 'python', category: 'python', …}
2
:
{id: 2, user_id: 1, type: 'vip', title: 'PHP', category: 'php', …}
3
:
{id: 1, user_id: 1, type: 'payment', title: 'php Advanced', category: 'python', …}
length
:
4
[[Prototype]]
:
Array(0)
I have this error
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
at CourseCard (file:///D:/Projects/**/**/bootstrap/ssr/assets/CourseCard-0f7e9619.js:8:23)
at div
at div
at div
at div
at div
at section
at div
at main
at MasterLayout (file:///D:/Projects/**/**/bootstrap/ssr/assets/MasterLayout-94d1044e.js:191:25)
at Home (file:///D:/Projects/**/**/bootstrap/ssr/assets/Home-0d9441f1.js:203:17)
at M (file:///D:/Projects/**/**/node_modules/@inertiajs/react/dist/index.esm.js:1:489)
at div
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
at renderElement (D:\Projects\**\***\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6047:9)
inertia.php
<?php
return [
/*
|--------------------------------------------------------------------------
| Server Side Rendering
|--------------------------------------------------------------------------
|
| These options configures if and how Inertia uses Server Side Rendering
| to pre-render the initial visits made to your application's pages.
|
| You can specify a custom SSR bundle path, or omit it to let Inertia
| try and automatically detect it for you.
|
| Do note that enabling these options will NOT automatically make SSR work,
| as a separate rendering service needs to be available. To learn more,
| please visit https://inertiajs.com/server-side-rendering
|
*/
'ssr' => [
'enabled' => true,
'url' => 'http://127.0.0.1:13714',
// 'bundle' => base_path('bootstrap/ssr/ssr.mjs'),
],
/*
|--------------------------------------------------------------------------
| Testing
|--------------------------------------------------------------------------
|
| The values described here are used to locate Inertia components on the
| filesystem. For instance, when using `assertInertia`, the assertion
| attempts to locate the component as a file relative to any of the
| paths AND with any of the extensions specified here.
|
*/
'testing' => [
'ensure_pages_exist' => true,
'page_paths' => [
resource_path('js/Pages'),
],
'page_extensions' => [
'js',
'jsx',
'svelte',
'ts',
'tsx',
'vue',
],
],
];
and ssr,jsx:
import ReactDOMServer from 'react-dom/server';
import { createInertiaApp } from '@inertiajs/react';
import createServer from '@inertiajs/react/server';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import route from '../../vendor/tightenco/ziggy/dist/index.m';
createServer((page) =>
createInertiaApp({
page,
render: ReactDOMServer.renderToString,
resolve: (name) => resolvePageComponent(`./Pages/${name}.jsx`, import.meta.glob('./Pages/**/*.jsx')),
setup: ({ App, props }) => {
global.route = (name, params, absolute) =>
route(name, params, absolute, {
...page.props.ziggy,
location: new URL(page.props.ziggy.location),
});
return <App {...props} />;
},
})
);
I try anything but I don't know how to solve that. I think the problem with my data is that when I send empty data SSR that works.
and I have this error just in SSR mode, in CSR or dev I do not have any problem.
Please or to participate in this conversation.