React Router Future Flag Warnings when rendering components with createRemixStub in @remix-run/testing #10216
Replies: 8 comments 19 replies
-
|
Yup, a bunch of behaviour is changing. You can update your code and opt in on the flags as you see fit https://reactrouter.com/en/6.28.0/upgrading/future#v7_skipactionerrorrevalidation |
Beta Was this translation helpful? Give feedback.
-
|
I am seeing only remix v3 future flags on createRemixStub's future config. Wondering if there is a way to enable the react-router v7 future flags with RemixStub. |
Beta Was this translation helpful? Give feedback.
-
|
These settings worked for me: index.jsx (BrowserRoute): |
Beta Was this translation helpful? Give feedback.
-
|
can you post the code instead of a pictures?thanks |
Beta Was this translation helpful? Give feedback.
-
|
future: { |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, I'm confused. This seems to imply use of React Router directly rather than via Remix. How would this work in the context of a Remix app, specifically when using |
Beta Was this translation helpful? Give feedback.
-
React Router ConfigurationThe following code demonstrates how to configure a <Router
future={{
v7_startTransition: true,
v7_relativeSplatPath: true,
}}
>
</Router>
You can try this on your App.tsx component. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much. |
Beta Was this translation helpful? Give feedback.
-
|
You're Welcome! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks you, fixed the problem! |
Beta Was this translation helpful? Give feedback.
-
|
Here is the documentation about this In short, add the following in your code, depending on what you use <BrowserRouter
future={{
v7_startTransition: true,
}}
/>Or, if you use Router Provider, <RouterProvider
future={{
v7_startTransition: true,
}}
/>You will also need to add the following to your createBrowserRouter(routes, {
future: {
v7_fetcherPersist: true,
v7_normalizeFormMethod: true,
v7_partialHydration: true,
v7_relativeSplatPath: true,
v7_skipActionErrorRevalidation: true,
v7_startTransition: true,
}
});These are all the v7 flags. You may not need all of them depending on your app, but I've added them all just to be safe. |
Beta Was this translation helpful? Give feedback.
-
Huh, it seems like they moved the page. But doing the steps in my comment should still work. I'll update it soon when my PC is on again. |
Beta Was this translation helpful? Give feedback.
-
|
Weird issue, deprecated warning about the deprecating property. Maybe there should be a automatic tests of broken link in these libraries. |
Beta Was this translation helpful? Give feedback.
-
|
I have updated the link to the docs, now it is https://reactrouter.com/upgrading/v6 |
Beta Was this translation helpful? Give feedback.
-
|
@helloyanis this seems to imply use of React Router directly. Can you clarify how this would be used in the context of Remix, specifically with |
Beta Was this translation helpful? Give feedback.
-
|
It's not used with a Remix app, but since this is the first result online when you search for the error message, I thought I'd share it anyways. The issue is related to the React Router in the 1st place so many people coming here might not be using remix. |
Beta Was this translation helpful? Give feedback.
-
|
I've been experiencing this too, especially during jest unit tests. The router used during unit tests get all the same future feature flags (mentioned above), but complains a lot in the jest environment. I'm just not seeing how to suppress them. Any pointers? |
Beta Was this translation helpful? Give feedback.
-
|
I have a similar issue with this after upgrading to the latest version. |
Beta Was this translation helpful? Give feedback.
-
|
for now I fixed it by doing this in my jest setup: import failOnConsole from 'jest-fail-on-console'
failOnConsole({
silenceMessage(message) {
return (/React Router Future Flag Warning/.test(message));
},
}); |
Beta Was this translation helpful? Give feedback.
-
|
I am also facing this error. I used RouterProvider, and the future prop has the type: However, I have more than one warning. In This fixed my warning Node : It is not directly related to remix. |
Beta Was this translation helpful? Give feedback.
-
|
@Junaid300 Is this for a Remix app? If so, why would you be using RouterProvider? Can you maybe share the complete file or more detail? I'm not clear on how this would be integrated in a Remix testing context. Thanks for any inights! |
Beta Was this translation helpful? Give feedback.
-
|
@andersr , This isn't related to remix. I shared it, i thought it would be helpful. I think it is not helpful It has configuration like |
Beta Was this translation helpful? Give feedback.
-
|
createRemixStub don't have any option for It is confusing how they manage to convert https://github.com/remix-run/remix/blob/main/packages/remix-testing/create-remix-stub.tsx#L91-L145 |
Beta Was this translation helpful? Give feedback.
-
|
@Junaid300 thanks for the clarification. Yes, adding those flags appears to have no impact, as the React Router flags continue to appear in the console when running tests. |
Beta Was this translation helpful? Give feedback.
-
|
And looking at the code snippet you shared, it's obvious why, since no corresponding React Router future flags are being set when the React Router memory router is being instantiated. |
Beta Was this translation helpful? Give feedback.
-
|
FYI this output is also appearing when running Remix's own |
Beta Was this translation helpful? Give feedback.
-
I'm integrating
createRemixStubinto a new project and am seeing a bunch of feature flag warnings when running tests that I can't figure out how to silence. Has anyone else encountered this?I'm using
"@remix-run/react": "^2.7.1"and"@remix-run/testing": "^2.14.0"Beta Was this translation helpful? Give feedback.
All reactions