I am in the process of converting my React project from react-scripts to Vite. When I run the web app in the browser, it works properly. However, when I run it on my LG TV, I only get a blank screen. I believe there’s an issue linking index.html to index.jsx, as I’ve been able to get console.logs from the html file but not the jsx. Additionally, I am getting the following errors in the console when I debug the app on the TV:
Obviously the files its referring to are the ones generated when making the build, so that really shouldn’t mean I’m doing anything wrong with the files.
I went through a lot of the common causes for these errors, but none of them have been helpful. index.html is pointing towards my index.jsx file and I am creating the div root that is referenced in index.jsx. If I change any of these, I get more errors and my app will no longer build in the browser, so these are clearly not the issue.
For what it’s worth, I am able to render the .jsx just fine on my Samsung TV, albeit I am having a different issue with the apis.
Any help would be greatly appreciated, thank you!!
Below are the relevant files, but please let me know if there’s any other files that might be relevant and would be helpful to look at.
index.html (from root directory)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./images/icon.svg" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<script type="text/javascript" src="$WEBAPIS/webapis/webapis.js"></script>
<link rel="apple-touch-icon" href="./logo512.png" />
<link rel="manifest" href="./manifest.json" />
<title>-</title>
<script defer="defer" src="./static/js/main.7511b55b.js"></script>
<link href="./static/css/main.b8db6394.css" rel="stylesheet" />
</head>
<script src="webOSTVjs-1.2.13/webOSTV.js" charset="utf-8"></script>
<script src="webOSTVjs-1.2.13/webOSTV-dev.js" charset="utf-8"></script>
<script type="text/javascript">
webOS.service.request("luna://com.palm.systemservice", {
method: "clock/getTime",
parameters: {},
onSuccess: function (e) {
console.log("HELLO DONNIE")
console.log("UTC:", e.utc);
},
onFailure: function (e) {
console.log("Failed to getTime");
},
});
</script>
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>
index.html (from LgWebOs)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./images/icon.svg" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<script type="text/javascript" src="$WEBAPIS/webapis/webapis.js"></script>
<link rel="apple-touch-icon" href="./logo512.png" />
<link rel="manifest" href="./manifest.json" />
<title>-</title>
<script defer="defer" src="./static/js/main.7511b55b.js"></script>
<link href="./static/css/main.b8db6394.css" rel="stylesheet" />
<script type="module" crossorigin src="/assets/index-CVWdDl2f.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B84rTO3s.css">
</head>
<script src="webOSTVjs-1.2.13/webOSTV.js" charset="utf-8"></script>
<script src="webOSTVjs-1.2.13/webOSTV-dev.js" charset="utf-8"></script>
<script type="text/javascript">
webOS.service.request("luna://com.palm.systemservice", {
method: "clock/getTime",
parameters: {},
onSuccess: function (e) {
console.log("HELLO DONNIE")
console.log("UTC:", e.utc);
},
onFailure: function (e) {
console.log("Failed to getTime");
},
});
</script>
<body>
<div id="root"></div>
</body>
</html>
index.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles/global.scss";
import reportWebVitals from "./reportWebVitals";
import * as Sentry from "@sentry/react";
console.log("INDEX.JSX") // NEVER GETS RUN
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<App />
);
reportWebVitals();