Script execution issue in React 19 requires understanding of React internals.
The issue involves `<script>` tags not executing when embedded in React components, despite following documentation. The problem persists across React versions 19.1.0 to 19.2.0-canary. Fixing this likely requires understanding React's DOM handling internals, particularly around script execution, but the exact scope and solution are not immediately clear.
Embedding a <script> tag according to the documentation does not execute the contents of the script. It seems straightforward, but am I missing something?
React version: 19.1
<script> tag anywhere in a component.Example:
package.json
{
"main": "/index.js",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build"
},
"dependencies": {
"react": "19.1.0",
"react-dom": "19.1.0",
"react-scripts": "5.0.1",
"html-format": "1.1.7"
},
}
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/index.js
import { StrictMode, useEffect } from "react";
import { createRoot } from "react-dom/client";
function useScript(content) {
useEffect(() => {
const script = document.createElement("script");
script.innerHTML = content;
document.bo
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!