ARTICLE AD BOX
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:
