X-Inertia-Version error

[ldavidsp]

Version:

• @inertiajs/react version: 2.0.3

Version error:

Steps to reproduce:

 useEffect(() => {
    router.get(route('products.index'), data, {
      preserveState: true,
      preserveScroll: true,
      replace: true,
    });
  }, [data]);

[unyieldinggrace]

@ldavidsp I have this exact problem! How did you resolve it?

[ldavidsp]

Hello @unyieldinggrace , I have solved it using useDebouncedCallback, I have applied this to the filters. I was using useForm(), but I changed to useState().

import { useDebouncedCallback } from 'use-debounce';


const [filters, setFilters] = useState({
    name: name,
    page: 1,
  });

  const debouncedSearch = useDebouncedCallback(newFilters => {
    router.get(
      route('brands.index'),
      { ...newFilters, page: 1 },
      { preserveState: true, replace: true },
    );
  }, 300);

  useEffect(() => {
    debouncedSearch(filters);
  }, [filters, debouncedSearch]);

render

<input
   name={'name'} 
   value={filters.name} 
   type={'text'} 
   onChange={event => {
       setFilters({
            ...filters,
            name: event.target.value,
            page: 1,
       });
}} />

[unyieldinggrace]

Thanks for the info. I think I had the same error but for a different reason. I was trying to do a call to router.get() during the first render of a component (long story, basically trying to be able to load the front-end before the first call to the server so that we can hopefully run the front-end on mobile via ionic/capacitor).

After digging through the inertia source code, here's what I learned.

We can't call router.get() until after a useEffect runs in the parent element of of our page component (that's where the router gets initialised). Since useEffect runs after a component is rendered and the parent element is rendered after the child element, it's impossible to call router.get() during the first render of our page component. This is what causes an error, we are trying to use router before it is initialized.

To get around this, I wrapped the parent element that initialises the router in another parent element (which I call IneritiaInitializeNotifier).

setup ({ el, App, props }) {
  ReactDOM.createRoot(el).render(
    <Provider store={Store}>
      <ErrorBoundary>
        <AppWrapper>
          <InertiaInitializeNotifier>
            <App {...props} />
          </InertiaInitializeNotifier>
        </AppWrapper>
      </ErrorBoundary>
    </Provider>
  );
}

There is a useEffect in the InertiaInitializeNotifier element that sets a global variable to indicate that inertia is finished initialising and it's now safe to use router.get().

import { ReactNode, useEffect } from 'react';

export default function InertiaInitializeNotifier ({ children }: { children: ReactNode }) {
  useEffect(() => {
    window.INERTIA_INITIALIZED = true;
  }, []);

  return children;
}

The page checks that global before calling the router, so that router.get() is only triggered on a subsequent render, not the first render.

export default function Bootstrap () {
  if (window.INERTIA_INITIALIZED) {
    router.get(...);
  }

  return (
    <div className={`flex flex-col mx-auto h-screen items-center justify-center`}>
      <div><LoadingSpinner /></div>
    </div>
  );
}

Hopefully that helps someone!