viteremix.run

React Router Future Flag Warning in Remix Vite app


I'm using Remix with a modern npx create-remix@latest (cloudflare) template. It uses React router under the hood (Remix does), but I don't explicitly use React router anywhere in my code.

Now I get this warning:

⚠️ React Router Future Flag Warning: The revalidation behavior after 4xx/5xx `action` responses is changing in v7. You can use the `v7_skipActionErrorRevalidation` future flag to opt-in early. For more information, see [https://reactrouter.com/v6/upgrading/future#v7_skipactionerrorrevalidation][1].

Clicking on the link gives me suggestions on how to edit the component to fix this, but I don't have such a component in my app.

These are my de(relevant) pendencies:

"@remix-run/cloudflare": "^2.11.1",
"@remix-run/cloudflare-pages": "^2.11.1",
"@remix-run/react": "^2.11.1",
"remix-utils": "^7.6.0",

What do I do to make these warning logs go away / to fix this?


Solution

  • It seems that React-Router-DOM v6.28.0 added some warnings:

    v6.28.0


    Date: 2024-11-06

    What's Changed

    • In preparation for v7 we've added deprecation warnings for any future flags that you have not yet opted into. Please use the flags to better prepare for eventually upgrading to v7.

    These are just "warnings" about future features so in all likelihood you can probably completely ignore them. This is due to the way that Remix.run and React-Router share some common core.

    It appears you can pass the future flags via your vite config.

    For complete details see:

    As per the warning you can apparently opt-in to the router's v7_skipActionErrorRevalidation feature early by enabling it in your config.

    Example:

    import { vitePlugin as remix } from "@remix-run/dev";
    import { defineConfig } from "vite";
    
    export default defineConfig({
      plugins: [
        remix({
          ....,
          future: {
            /* any enabled future flags */
            v7_skipActionErrorRevalidation: true, // <-- early opt-in
          },
          ....,
        }),
      ],
    });