search

eidellev / inertiajs-adonisjs

278 stars 17 forks source link

const root = document.getElementById('app') return null #120

Open q8tywolf opened 1 year ago

q8tywolf commented 1 year ago

Hello

I have a weird issue routes Route.get('/test', async ({ inertia }) => { Logger.debug('hit /test') return inertia.render('Test', { someData: 'hello' }, { title: "welcome to test " }) }) app.tsx import { InertiaApp } from '@inertiajs/inertia-react' import React from 'react' import ReactDOM from 'react-dom' import '../css/app.css'

// initial page object with props from server const root = document.getElementById('app')

console.log(root) const page = JSON.parse(root?.dataset.page as string)

// dynamically load specified page component from "resources/js/Pages/." dir async function resolver(pageName) { const module = await import(./Pages/${pageName}) return module.default }

function App() { return <InertiaApp initialPage={page} resolveComponent={resolver} initialComponent={''} /> }

ReactDOM.render(, root)

image image

q8tywolf commented 1 year ago

fixed when I put scripts below @interia

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="/favicon.ico">

  @entryPointStyles('app')

  <title>{{ title }}</title>
</head>
<body>
  @inertia()
    @entryPointScripts('app')
</body>
</html>