Skip to content

Uncaught TypeError: Cannot read properties of undefined (reading 'layout') #2653

@kelvinyrb

Description

@kelvinyrb

@inertiajs/react Version

2.2.9

Backend stack (optional)

No response

Describe the problem

React App throwing TypeError on renderApp on @inertiajs/react 2.2.9
App working on @inertiajs/react 2.2.8
Related to inertiaui/modal#164

Error

@inertiaui_modal-react.js?v=4a1d2817:367 Uncaught TypeError: Cannot read properties of undefined (reading 'layout')
    at @inertiaui_modal-rea…s?v=4a1d2817:367:21
    at children (@inertiaui_modal-rea…js?v=4a1d2817:368:5)
    at App (chunk-V7XXYNBF.js?v=4a1d2817:3499:7)
    at react-stack-bottom-frame (react-dom_client.js?v=4a1d2817:17424:20)
    at renderWithHooks (react-dom_client.js?v=4a1d2817:4206:24)
    at updateFunctionComponent (react-dom_client.js?v=4a1d2817:6619:21)
    at beginWork (react-dom_client.js?v=4a1d2817:7654:20)
    at runWithFiberInDEV (react-dom_client.js?v=4a1d2817:1485:72)
    at performUnitOfWork (react-dom_client.js?v=4a1d2817:10868:98)
    at workLoopSync (react-dom_client.js?v=4a1d2817:10728:43)
<Inertia>		
setup	@	main.tsx:75
Promise.then		
(anonymous)	@	main.tsx:58

> main.tsx:75
createRoot(el).render(renderApp(App, props));

Looking at the minified JS file - this line is throwing an error

> @inertiaui_modal-react.js?v=4a1d2817
return typeof r.layout == "function" ? r.layout(s) : Array.isArray(r.layout) ? r.layout.concat(s).reverse().reduce((m, d) => (0, import_react.createElement)(d, l, m)) : s;

Looking at the diff v2.2.8 and 2.2.9 - createElement function has been updated in packages/react/src/App.ts
v2.2.8...v2.2.9#diff-a5728baa2733b3057aa7ef98a18808229f4ef22cb0a79b2fec7247bcc5e517acR126
v2.2.8

      renderChildren({
        Component: current.component,
        key: current.key,
        props: current.page.props,
      }),

v2.2.9

      renderChildren({
        component: current.component,
        key: current.key,
        props: current.page.props,
      }),

Observation

  • In local dev environment, if the component parameter in renderChildren function is capitalised to Component on v2.2.9 - no error is thrown and application runs

Steps to reproduce

  1. npm install @inertiajs/core@2.2.9 @inertiajs/react@2.2.9
  2. Start vite server to run React application

Metadata

Metadata

Assignees

No one assigned

    Labels

    reactRelated to the react adapter

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions