Question about layout head and side effect in library #74741

ivanblinov2k17 · 2025-01-10T11:52:15Z

ivanblinov2k17
Jan 10, 2025

Summary

Hi,
I'm a developer for component ui library and we are facing quite strange problem
After our latest release theming mechanism stopped working.
Project structure:
default next project

app/layout:

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang="en">
            <head>
                <link 
                    href="some.css"
                />
                ....

app/page

'use client';
import {Component} from 'our-lib/component'
import {setThemes} from 'our-lib/themes'
import { useEffect } from 'react'; 

export default function Home() {
    useEffect(() => {
        setTheme('some.css')

node_modules/our-lib/component

import something from 'our-lib/themes'
...

node_modules/our-lib/themes

function init(){
  if (window) {
    parseHead()
    ...
  }
  ...
}

init()

testing is done in dev version

In short, in our themes module we have side effect function init(), which parses head of current document (if code is run on the client side) for some links, and then uses it
We know, that in general it's maybe a bad idea to use side effects and we look into refactoring, but that's not the point

In previous release, first the head links were attached to DOM, and then our init function was called
Now, the order is reversed, and init is called before attaching links to DOM
Callstack for init() function is completely identical for both current and previous release
There is only one async operation in callstack, when webpack loads the module with mode == 'eager'

We haven't made any significant changes in theme module, nor in component module. But there were some structural changes, reorganizing some imports, etc. in other modules

I'm asking for some general insights on the lifecycle of how the layout is rendered, when the markup is hydrated and loaded/compared with server layout, maybe some ideas on what could lead to this issue. Thanks in advance

Additional information

No response

Example

No response

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Question about layout head and side effect in library #74741

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Question about layout head and side effect in library #74741

ivanblinov2k17 Jan 10, 2025

Summary

Additional information

Example

Replies: 0 comments

ivanblinov2k17
Jan 10, 2025