[Bug]: Uncaught ReferenceError: __name is not defined in Injected Theme Script

[aeejaz]

What happened?

When loading a page in our Next.js application, a critical JavaScript error occurs, visible in the browser's developer console. The error is: Uncaught ReferenceError: __name is not defined.

This error originates from the inline script that next-themes injects into the of the document to prevent the "flash of incorrect theme" (FOIT). The problematic script contains a function call to __name, which is a helper function likely injected by Next.js's SWC compiler for debugging purposes. However, in the final build, the function call is present but the function's definition is missing, causing the script to fail and break client-side rendering.

A snippet of the problematic generated code looks like this:

<script>
    (
        () => {
            // ... function logic for setting the theme
            function k2(theme) { 
                /* ... */ 
            }
            __name(k2, "k2"); // <-- ERROR IS THROWN HERE
            
            // ... logic to call the function
        }
    )()
</script>

This issue breaks the theme initialization and can potentially impact other client-side scripts from running correctly.

I expected the page to load without any client-side JavaScript errors. The theme-switching script should execute silently and correctly apply the stored or system-preferred theme to the element before the page hydrates, ensuring a smooth user experience with no theme flashing.

Version

0.4.6

What browsers are you seeing the problem on?

Microsoft Edge, Chrome

[fbuireu]

Happening for me as well in Chrome with the following config:

          <ThemeProvider
            attribute='data-theme'
            defaultTheme='system'
            storageKey='theme'
            enableSystem
            disableTransitionOnChange
          >

Following the stack trace pointed to:

 <script>
            ( (a2, b4, c2, d3, e2, f2, g3, h3) => {
                let i2 = document.documentElement
                  , j4 = ["light", "dark"];
                function k4(b5) {
                    var c3;
                    (Array.isArray(a2) ? a2 : [a2]).forEach( (a3) => {
                        let c4 = a3 === "class"
                          , d4 = c4 && f2 ? e2.map( (a4) => f2[a4] || a4) : e2;
                        c4 ? (i2.classList.remove(...d4),
                        i2.classList.add(f2 && f2[b5] ? f2[b5] : b5)) : i2.setAttribute(a3, b5);
                    }
                    ),
                    c3 = b5,
                    h3 && j4.includes(c3) && (i2.style.colorScheme = c3);
                }
                __name(k4, "k4");
                if (d3)
                    k4(d3);
                else
                    try {
                        let a3 = localStorage.getItem(b4) || c2
                          , d4 = g3 && a3 === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : a3;
                        k4(d4);
                    } catch {}
            }
            )("data-theme", "theme", "system", null, ["light", "dark"], null, true, true)
        </script>

[victorpavlenko]

@fbuireu @aeejaz @jack828 @xvvvyz
The reason for me is https://opennext.js.org/cloudflare/howtos/keep_names

[fbuireu]

@fbuireu @aeejaz @jack828 @xvvvyz The reason for me is https://opennext.js.org/cloudflare/howtos/keep_names

Thanks @victorpavlenko, keep_names worked indeed.