Error: Failed to fetch RSC payload. Falling back to browser navigation

Question

I made a search form that redirects the user to the page that shows the results of his search. When I click the search button, this error occurs Failed to fetch RSC payload. Falling back to browser navigation. TypeError: Failed to fetch at fetchServerResponse (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/router-reducer/fetch-server-response.js:51:27) at InnerLayoutRouter (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:282:64) at renderWithHooks (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10697:18) at mountIndeterminateComponent (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:15735:13) at beginWork$1 (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:17310:16) at beginWork (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25675:14) at performUnitOfWork (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24526:12) at workLoopConcurrent (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24512:5) at renderRootConcurrent (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24468:9) at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23339:38) at workLoop (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261:34) at flushWork (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230:14) at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:534:21) Here is the component code that renders the form.

"use client";

import {useState, useEffect} from "react";
import {useRouter} from "next/navigation";

import SearchSvg from "@/svgs/search";

import styles from "./search.module.scss";

export default function SearchForm() {
    const router = useRouter();
    const [value, setValue] = useState<string>("");
    const [search, setSearch] = useState<string>("");

    function onChange(event: React.ChangeEvent<HTMLInputElement>) {
        setValue(event.target.value);
    }

    function redirectToSearchResults() {
        router.push(`/cauta/${search}`);
    }

    useEffect(() => {
        setSearch(encodeURIComponent(value));
    }, [value]);

    return (
        <form className={styles.searchForm}>
            <input
                type="search"
                value={value}
                onChange={onChange}
                className={styles.searchInput}
                placeholder="Caută..."
            />
            <button
                className={styles.searchButton}
                onClick={redirectToSearchResults}
            >
                <SearchSvg />
            </button>
        </form>
    );
}

I tried to encode the value that is passed, but still not working. What could be the problem?

perhabs somthing related to the form submit default behavior try to add event.preventDefault() to redirectToSearchResults function just like this : function redirectToSearchResults(event: React.MouseEvent) { event.preventDefault(); ... } if not work try to use setSearch(encodeURIComponent(encodeURIComponent(value))); — Christa, Aug 28 '23 at 01:03
happy to help... then i leave a answer to marke the thread solved — Christa, Aug 28 '23 at 23:51

score 1 · Accepted Answer · answered Aug 28 '23 at 23:51

1

Issue related to the form submit default behavior try to add event.preventDefault() to redirectToSearchResults function just like this :

function redirectToSearchResults(event: React.MouseEvent<HTMLButtonElement>) {
    event.preventDefault();
    router.push(`/cauta/${search}`);
}

answered Aug 28 '23 at 23:51

Christa

398
7

event.preventDefault(); did the job. Thanks! – Ioan Aug 29 '23 at 14:50

Error: Failed to fetch RSC payload. Falling back to browser navigation

1 Answers1