React-snap - pageerror at /: SyntaxError: Unexpected token '?'

Question

I have been trying to add react-snap to my vite react app but I constantly get this error message.

> react-snap

  pageerror at /: SyntaxError: Unexpected token '?'

✅  crawled 1 out of 1 (/)
ERROR: Invalid namespace

And it seems that the terminal get stuck from loading the remaining error message. No error reference gets displayed whatsoever. I read some stackoverflow questions and answers related to react-snap but nothing really dropped one with is esact issue.

I have gone through my package.json and it looks quite alright in my opinion.

package.json

{
  ...,
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "postbuild": "react-snap",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "compile:sass": "sass --watch src/styles/scss:src/styles/css"
  },
  "reactSnap": {
    "source": "dist"
  },
  "dependencies": {
    "autoprefixer": "^10.4.17",
    "express": "^4.18.2",
    "nodemon": "^3.1.0",
    "postcss-cli": "^11.0.0",
    "prerender-node": "^3.8.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet-async": "^2.0.4",
    "react-router-dom": "^6.22.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
    "dotenv": "^16.4.5",
    "eslint": "^8.56.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "react-snap": "^1.23.0",
    "sass": "^1.71.0",
    "vite": "^5.1.0"
  }
}

Then I checked my route

Routes.jsx

import {
  Route,
  createBrowserRouter,
  createRoutesFromElements,
} from "react-router-dom";
import Applayout from "../components/layout/Applayout";
import { About, Buy, Contact, Home, Service } from "../pages";
import Error from "../components/layout/Error";

export const routes = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<Applayout />} path="/" errorElement={<Error />}>
      <Route index path="/" element={<Home />} />
      <Route path="contact" element={<Contact />} />
      <Route path="about" element={<About />} />
      <Route path="service" element={<Service />} />
      <Route path="buy" element={<Buy />} />
    </Route>
  ),
  {
    basename: "/",
  }
);

App.jsx

import { RouterProvider } from "react-router-dom";
import { routes } from "../routes/Routes";
import { HelmetProvider } from "react-helmet-async";

function App() {
  return (
    <>
      <HelmetProvider>
        <RouterProvider router={routes} />
      </HelmetProvider>
    </>
  );
}

export default App;

main.jsx

import { hydrateRoot, createRoot } from "react-dom/client";
import React from "react";
import App from "./App.jsx";
import "../styles/css/root.css";

const rootElement = document.getElementById("root");
if (rootElement?.hasChildNodes()) {
  hydrateRoot(
    rootElement,
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
} else {
  createRoot(rootElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

vercel.json

{
    "rewrites": [
        {
            "source": "/(.*)",
            "destination": "/"
        }
    ]
}

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

I've tried tried commenting out the index route and building the project but it fails and output the same error.

I need help please :(

I'm expecting the project to build successfully and make crawlling the web project easy.

So far I have tried commenting out various routes in the Routes.jsx file to know where the error is from. I do suspect the index directory but it seems to persist after I comment it out.