react-router weird occurrence that shouldn't have been breaking my inline scripts in my component

[Z3NTL3]

Reproduction

<Navbar>
            { loading ? <Loading/> : 
              <>
                <div className="mt-20"></div>  
                {children}
              </>
            }
          </Navbar>

with this snippet in root.tsx my route's Component with inline script renders without a problem, however when put like:

{ loading ? <Loading/> :   
              <Navbar>
                <div className="mt-20"></div> 
                {children}
              </Navbar>
            }

it breaks the inline script in my component, which does not make sense

Source

Files

• https://github.com/Z3NTL3/ersoy-frontend-blog/blob/main/app/root.tsx#L70

• https://github.com/Z3NTL3/ersoy-frontend-blog/blob/main/app/components/ui/navbar.tsx

• https://github.com/Z3NTL3/ersoy-frontend-blog/blob/main/app/routes.ts

Dont see what is wrong

System Info

✦ ❯ npx envinfo --system --npmPackages '{vite,react-router,@react-router/*}' --binaries --browsers

  System:
    OS: Linux 6.11 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
    Memory: 7.91 GB / 15.04 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.17.1 - ~/.nvm/versions/node/v22.17.1/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.17.1/bin/npm
  Browsers:
    Brave Browser: 138.1.80.113
    Chrome: 138.0.7204.92
    Chromium: 138.0.7204.157
  npmPackages:
    @react-router/dev: ^7.7.1 => 7.7.1 
    @react-router/express: ^7.7.1 => 7.7.1 
    @react-router/node: ^7.7.1 => 7.7.1 
    @react-router/serve: ^7.7.1 => 7.7.1 
    react-router: ^7.7.1 => 7.7.1 
    vite: ^6.3.3 => 6.3.5 

Used Package Manager

npm

Expected Behavior

It should not affect the inline script of my component whether when I use the latter code snippet, it makes no sense that it breaks up the inline script

Actual Behavior

Both way the inline script should execute and work

[timdorr]

This isn't a bug with React Router.

Regardless, you can't insert new script tags by just rendering a React element. You have to insert them into the DOM in an effect: https://rangen.medium.com/dynamically-load-google-scripts-with-react-and-the-useeffect-hook-3700b908e50f

[Z3NTL3]

wdym

React ref tells else

To add inline or external scripts to your document, render the built-in browser <script> component. You can render <script> from any component and React will in certain cases place the corresponding DOM element in the document head and de-duplicate identical scripts

more specifically:

You can render <script> from any component and React will in certain cases place the corresponding DOM element in the document head and de-duplicate identical scripts

Don't get me wrong I just wanna make sense out of it and your answer doesn't add up into it, I'm citating directly from React's reference and according to that it should work effortlessly

[brophdawg11]

It's also worth nothing for future bugs that we do require a reproduction so we can see exactly what the issue is. A small code snippet doesn't give enough context to really identify the issue you're having.