I am trying to use an iframe in my React app to display a local HTML file. When I try to run my app (npm run start) it instead seems like the iframe is loading index.html recursively. It works fine when the source is an external URL.
Update: It works when deployed to Github Pages Update 2: Nevermind it randomly broke on Github Pages just now Update 3: here's the package.json
{
"name": "wikiread-react",
"version": "0.1.0",
"homepage": "https://stationktkr.github.com/wikiread-react",
"private": true,
"dependencies": {
"@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^13.5.0",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"bootstrap": "^5.3.8",
"gh-pages": "^6.3.0",
"react-bootstrap": "^2.10.10",
"react-iframe": "^1.8.5",
"react-tabs": "^6.1.0"
}
}
App.js:
import './App.css';
function App() {
return (
<main>
<iframe title="test" src="altpages/test.html" width='500px' height='500px'></iframe>
</main>
);
}
export default App;
test.html:
<!DOCTYPE html>
<html>
<body>
<h1>Test 1</h1>
</body>
</html>
This is my file structure:
]
Here's what I get if I load "altpages/test.html" directly in the browser (what I would expect):

Opposed to what I see when I run "npm run start" from the terminal (in the wikiread-react folder):

Using the inspector, you can see that it is a series of nested iframes:
