[Bug]: react-router-dom@6.28 shows v7_startTransition warning but such future flag is not present

[amankkg]

What version of React Router are you using?

6.28

Steps to Reproduce

1. Configure a Browser Router with v7_startTransition flag on.
2. Run the app.

Expected Behavior

1. No dev console warnings about the flag v7_startTransition
2. If the flag is still supported, not type errors when trying to turn it on

Actual Behavior

1. Irrelevant whether the flag is present or not, the warning is shown
2. When trying to turn the flag on it shows type error

[jdufresne]

I was able to resolve this by placing the future prop on the RouterProvider instead of createBrowserRouter.

const router =  createBrowserRouter(...);
...
return <RouterProvider router={router} future={{ v7_startTransition: true }} />

[PixelSavvy]

I was able to resolve this by placing the future prop on the RouterProvider instead of createBrowserRouter.

const router =  createBrowserRouter(...);
...
return <RouterProvider router={router} future={{ v7_startTransition: true }} />

Hey! Thanks for the answer. I have set as you mentioned, however the warning message still does not hide. Any help would be highly appreciated!

Here is the code sample from my app:

export const AppRouter = () => {
  const router = React.useMemo(() => createAppRouter(), []);

  return (
    <RouterProvider
      router={router}
      future={{
        v7_startTransition: true,
      }}
    />
  );
};

[PixelSavvy]

I was able to resolve this by placing the future prop on the RouterProvider instead of createBrowserRouter.

const router =  createBrowserRouter(...);
...
return <RouterProvider router={router} future={{ v7_startTransition: true }} />

Hey! Thanks for the answer. I have set as you mentioned, however the warning message still does not hide. Any help would be highly appreciated!

Here is the code sample from my app:

export const AppRouter = () => {
  const router = React.useMemo(() => createAppRouter(), []);

  return (
    <RouterProvider
      router={router}
      future={{
        v7_startTransition: true,
      }}
    />
  );
};

UPDATE!

Apparently I had multiple v7 future update warnings. So, I followed the react-router doc on future flags. Had to add couple more flags to createBrowserRouter. Here is the example:

const createBrowserRouter = {routes,  {future: {
        v7_fetcherPersist: true,
        v7_normalizeFormMethod: true,
        v7_partialHydration: true,
        v7_relativeSplatPath: true,
        v7_skipActionErrorRevalidation: true,
      },
    }

This seems to have fixed the warning messages.

[lidegejingHk]

I also encountered this issue and don't know how to resolve the warning in the browser.
`import routers from '@/routes'
import { createRoot } from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const router = createBrowserRouter(routers)

const root = createRoot(document.getElementById('app'))
root.render(<RouterProvider router={router} future={{ v7_startTransition: true }}/>)
`

[saranyamaity2000]

const createBrowserRouter = {routes,  {future: {
        v7_fetcherPersist: true,
        v7_normalizeFormMethod: true,
        v7_partialHydration: true,
        v7_relativeSplatPath: true,
        v7_skipActionErrorRevalidation: true,
      },
    }

This seems to have fixed the warning messages.

in typescript, I am not seeing anything other than v7 transition flag. version issue ?

[passariello]

It's really terrible. It's necessary to mute the warning in any case ....
I use component: lazy(() => import("../../pages" + list[1]['component'])) in my dynamic code and warning never go away :/
I don't want to change my code for your change!

[Eghizio]

This is bad. It shouldn't be outputting such warning at all❗
I'm running 6.28 not 7.x after all...

Had to add such options object to createBrowserRouter(routes, options):

{
    future: {
      v7_fetcherPersist: true,
      v7_normalizeFormMethod: true,
      v7_partialHydration: true,
      v7_relativeSplatPath: true,
      v7_skipActionErrorRevalidation: true,
    },
}

And set v7_startTransition flag in future prop in <RouterProvider />:

<RouterProvider router={router} future={{ v7_startTransition: true }} />

[codersemon]

// create root router
const router = createBrowserRouter([...PublicRouter, ...PrivateRouter], {
  future: {
    v7_relativeSplatPath: true,
    v7_fetcherPersist: true,
    v7_normalizeFormMethod: true,
    v7_partialHydration: true,
    v7_startTransition: true,
    v7_skipActionStatusRevalidation: true,
  },
});

Though this two are not working, still showing warning in conse { v7_startTransition: true,
v7_skipActionStatusRevalidation: true, }

details in official docs https://reactrouter.com/en/6.28.0/upgrading/future

[shaikahmadnawaz]

By adding these future flags in createBrowserRouter and RouterProvider all warnings/errors resolved.

[LucasDaSilva96]

These settings worked for me:

{
future: {
v7_relativeSplatPath: true,
v7_partialHydration: true,
v7_skipActionErrorRevalidation: true,
v7_normalizeFormMethod: true,
v7_fetcherPersist: true,
},
}

<RouterProvider
router={router}
future={{
v7_startTransition: true,
}}
/>

[tamim-dev]

Here is the code sample from my application

<BrowserRouter
            future={{
                v7_relativeSplatPath: true,
                v7_startTransition: true,
            }}
        >
</BrowserRouter>

[skizzo]

Where do I put these code snippets in my Vite app?

[codersemon]

Where do I put these code snippets in my Vite app? @skizzo

you have to write those code where you are defining BrowserRouter or createBrowserRouter

[skizzo]

Sorry for the noob question. I created a project with npx create-remix@latest and currently don't define any routers via those functions.

[RenzoAlessandro]

These settings worked for me:

App.jsx:

index.jsx (BrowserRoute):

[mdr]

I hope this comes across as constructive criticism, but it seems to me a very unfortunate developer experience to have a library that by design requires multiple lines of random flags be inserted in different places just to silence browser console spam. Surely this can be handled in a different way?

[uncaught]

We cannot upgrade to react 18, yet, due to other dependencies and this means we CANNOT get rid of all these warnings other than patching your library.

I would appreciate an option to tell your library: "Yes, I've seen this once, be quiet now."

[uncaught]

Added feature request for an opt-out: #12321

[RobJacobson]

Ditto to @mdr. I'm new to react-router and was working through a tutorial. This was an unfortunate introduction to the project. I was forced to add cruft to the code to enable the feature flags (disabling them doesn't seem to work) just to make debugging easier. Now I'm crossing my fingers and hoping that some beta features that I don't care about (being new) don't cause unwanted side-effects.

[trainoasis]

When we add v7_startTransition: true our e2e tests start failing in some places. Seems like it might be related to LaunchDarkly feature flags, but can't tell for certain. Anyone had a similar problem?