#No route matches URL "/socket.io"

1 messages · Page 1 of 1 (latest)

misty flame
#

No routes matched location "/socket.io/?X_LOCAL_SECURITY_COOKIE=&EIO=3&transport=polling&t=1737577319139-2515"
ErrorResponseImpl {
status: 404,
statusText: 'Not Found',
internal: true,
data: 'Error: No route matches URL "/socket.io/"',
error: Error: No route matches URL "/socket.io/"
at getInternalRouterError

Without adding any extra node packages this randomly happend. I've read multiple posts about 404's and couldn't seem to find any help.

Anyone knows the issue im having? I'll provide the package.json below

#

Providing my root.tsx below

    Links,
    Meta,
    Outlet,
    Scripts,
    ScrollRestoration,
    useLoaderData,
    useRouteLoaderData,
} from "@remix-run/react";
import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
import { useChangeLanguage } from "remix-i18next/react";

import "./tailwind.css";
import i18next from "./services/i18n.server";
import { useTranslation } from "react-i18next";

export async function loader({ request }: LoaderFunctionArgs) {
    let locale = await i18next.getLocale(request);
    return locale;
}
export let handle = {
    i18n: "common",
};
export const links: LinksFunction = () => [
    { rel: "preconnect", href: "https://fonts.googleapis.com" },
    {
        rel: "preconnect",
        href: "https://fonts.gstatic.com",
        crossOrigin: "anonymous",
    },
    {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
    },
];

export function Layout({ children }: { children: React.ReactNode }) {
    let locale = useRouteLoaderData<typeof loader>("root");

    let { i18n } = useTranslation();
    useChangeLanguage(locale!);
    return (
        <html lang={locale} dir={i18n.dir()}>
            <head>
                <meta charSet="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <Meta />
                <Links />
            </head>
            <body>
                <div className="flex flex-col container  min-h-screen px-4 md:p-0 mx-auto">
                    <div className="flex-1 pt-36">{children}</div>
                </div>
                <ScrollRestoration />
                <Scripts />
            </body>
        </html>
    );
}

export default function App() {
    return <Outlet />;
}