Uncaught SyntaxError: Unexpected token '<'

[victorydavidson]

Summary

my website is working fine on local host but not when deployed to vercel, i keep seeing a blank page this is the error on my console log main.5dc48de0.js:1 Uncaught SyntaxError: Unexpected token ‘<’ please i need help
this is the link to one of the sites i am experiencing this issue:
https://ecommerce-six-eta-17.vercel.app/

i pushed my work to github and imported it in vercel to deploy it. and after the deploy process i ended up with a blank white page. I am having this issue with only my react websites. my next.js site worked fine and my static site using index.html, style.css and app.js.

[amyegan]

Hi @victorydavidson!

Uncaught SyntaxError: Unexpected token ‘<’ usually means that a function or an API call returned an HTML error page instead of the expected data.

Wrapping function code in try…catch statements can help you identify the source of the problem and handle errors so they don’t break the whole page.

[victorydavidson]

hello, i tried doing that but i am still getting the same error message, this is what my app.jsx looks like; import { BrowserRouter as Router, Routes, Route } from “react-router-dom”;
import Navbar from “./components/Navbar”;
import Product from “./pages/Product”;
import Home from “./pages/Home”;
import ProductList from “./pages/ProductList”;
import Register from “./pages/Register”;
import Login from “./pages/Login”;
import Cart from “./pages/Cart”;

const App = () => {
try {
return (



<Route path=“/” element={} />
<Route path=“/product” element={} />
<Route path=“/product-list” element={} />
<Route path=“/register” element={} />
<Route path=“/login” element={} />
<Route path=“/cart” element={} />


);
} catch (error) {
console.error(“Error rendering App:”, error);
return

Error occurred: {error.message}

;
}
};

export default App;

my console log this is the error; Uncaught SyntaxError: Unexpected token ‘<’ (at main.548ca1ef.js:1:1)

the network tab; Request URL:
https://ecommerce-six-eta-17.vercel.app/ecommerce/static/js/main.548ca1ef.js
Request Method:
GET
Status Code:
304 Not Modified
Remote Address:
76.76.21.142:443
Referrer Policy:
strict-origin-when-cross-origin

[victorydavidson]

hello i have figured out what was causing the error
when i ran npm build in the build folder the index.html was importing the script as

all i did was remove the blog from the front ;

and when deploying it i chose the build as root folder

[amyegan]

I’m so happy to hear you got it working! Thank you for coming back to share the solution