TanStack•3mo ago•

10 replies

brilliant-lime

Rendering different <html> tag in different layouts

react

Hello, I'm trying to structure my routes in such away, where

__root.tsx

__root.tsx

is basically only an

<Outlet/>

<Outlet/>

and I'm having two different layouts

_home.tx

_home.tx

and

app.tsx

app.tsx

which should manage their own

<html>

<html>

element. They need to e.g. set

lang

lang

attribute and apply proper theming with completely different logic of retrieving the data (one based on URL/fixed values, other from logged in user's data).

However, I'm getting an error

Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag.

Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag.

which orginates from

OnRendered

OnRendered

inside of Router - https://github.com/TanStack/router/blob/98dc05073dcf7490d38f9158833f3df22c005e96/packages/react-router/src/Match.tsx#L155

If I'm reading the comment next to component correctly I probably shouldn't render

html

html

tag outside of

__root

__root

? Is there any way to structure it differently to achieve the same results?

Minimal reproduction (with start for easier setup, but I don't think it changes anything there):

https://github.com/pawelblaszczyk5/different-root-per-layout-reproduction

GitHub

GitHub - pawelblaszczyk5/different-root-per-layout-reproduction

Contribute to pawelblaszczyk5/different-root-per-layout-reproduction development by creating an account on GitHub.

GitHub

router/packages/react-router/src/Match.tsx at 98dc05073dcf7490d38f9...

A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more). - TanStack/router

router/packages/react-router/src/Match.tsx at 98dc05073dcf7490d38f9...

TanStack•3mo ago•

10 replies

brilliant-lime

Rendering different <html> tag in different layouts

react

Hello, I'm trying to structure my routes in such away, where

__root.tsx

__root.tsx

is basically only an

<Outlet/>

<Outlet/>

and I'm having two different layouts

_home.tx

_home.tx

and

app.tsx

app.tsx

which should manage their own

<html>

<html>

element. They need to e.g. set

lang

lang

attribute and apply proper theming with completely different logic of retrieving the data (one based on URL/fixed values, other from logged in user's data).

However, I'm getting an error

Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag.

Cannot render a sync or defer <script> outside the main document without knowing its order. Try adding async="" or moving it into the root <head> tag.

which orginates from

OnRendered

OnRendered

html

html

tag outside of

__root

__root

GitHub

GitHub - pawelblaszczyk5/different-root-per-layout-reproduction

Contribute to pawelblaszczyk5/different-root-per-layout-reproduction development by creating an account on GitHub.

GitHub

router/packages/react-router/src/Match.tsx at 98dc05073dcf7490d38f9...

A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more). - TanStack/router

Rendering different <html> tag in different layouts

Rendering different <html> tag in different layouts

Similar Threads

Similar Threads

Similar Threads