[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live)

[Help](/c/help/9)

# Uncaught SyntaxError: Unexpected token '<'

671 views · 1 like · 5 posts


Victorydavidson (@victorydavidson) · 2024-07-16

### 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.


Amy Egan (@amyegan) · 2024-07-16

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) can help you identify the source of the problem and handle errors so they don't break the whole page.


Victorydavidson (@victorydavidson) · 2024-07-17

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 (
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/product" element={<Product />} />
          <Route path="/product-list" element={<ProductList />} />
          <Route path="/register" element={<Register />} />
          <Route path="/login" element={<Login />} />
          <Route path="/cart" element={<Cart />} />
        </Routes>
      </Router>
    );
  } catch (error) {
    console.error("Error rendering App:", error);
    return <div>Error occurred: {error.message}</div>;
  }
};

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 (@victorydavidson) · 2024-07-17 · ♥ 1

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 <script defer="defer" src="/blog/static/js/main.3575a662.js"></script>

all i did was remove the blog from the front ; <script defer="defer" src="/static/js/main.3575a662.js"></script>

and when deploying it i chose the build as root folder


Amy Egan (@amyegan) · 2024-07-17

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