react-router icon indicating copy to clipboard operation
react-router copied to clipboard

[Bug]: URL polyfill required for React Router Native createMemoryRouter in v6.8

Open stereoplegic opened this issue 2 years ago • 5 comments

What version of React Router are you using?

6.8.0

Steps to Reproduce

createMemoryRouter became usable in non-browser environments as of v6.7.0 (fixing #9796), and worked fine in React Native apps; however, upon upgrading to v6.8.0 its use of URL.search now requires react-native-url-polyfill for <Link /> components to be functional.

As with the issue prior to v6.6.3, I'd imagine this is actually coming from packages/router and/or packages/react-router, esp. since both createMemoryRouter and Link are just re-exported from packages/react-router.

Expected Behavior

Error-free routing when clicking on a <Link to="/some/path" /> component.

Actual Behavior

Yellowbox warning, no route traversal when clicking <Link /> component.

WARN Possible Unhandled Promise Rejection (id: 0): Error: URL.search is not implemented

As mentioned in the "Steps to Reproduce," a workaround is to use react-native-url-polyfill:

// App.native.jsx
import "react-native-url-polyfill/auto"

// or conditional import with react-native Platform
Platform.OS !== "web" && import("react-native-url-polyfill/auto")

Obviously not ideal, but gets me moving for now.

stereoplegic avatar Feb 06 '23 21:02 stereoplegic

This issue has been automatically marked stale because we haven't received a response from the original author in a while 🙈. This automation helps keep the issue tracker clean from issues that are not actionable. Please reach out if you have more information for us or you think this issue shouldn't be closed! 🙂 If you don't do so within 7 days, this issue will be automatically closed.

github-actions[bot] avatar Apr 17 '23 20:04 github-actions[bot]

This issue has been automatically closed because we didn't hear anything from the original author after the previous notice.

github-actions[bot] avatar Apr 24 '23 21:04 github-actions[bot]

@stereoplegic Do you have a stack trace handy by any chance? I am assuming this is coming from this line but it would be helpful if we could confirm that.

We do currently polyfill URLSearchParams in react-router-native so maybe we just need to add a spec-compliant URL polyfill as well.

brophdawg11 avatar May 01 '23 15:05 brophdawg11

Unfortunately, I do not. Hoping to get back to some RR Native work this week. I'll try the latest without react-native-url-polyfill when I get a chance and let you know.

stereoplegic avatar May 01 '23 15:05 stereoplegic

🙌 Ok, thank you! If you are able to reproduce, you might even try fixing it at the source by adding the polyfill alongside our URLSearchParams polyfill and see if that does indeed resolve the issue:

https://github.com/remix-run/react-router/blob/main/packages/react-router-native/index.tsx#L15

If it does, then we can look into making that change for RRN.

brophdawg11 avatar May 01 '23 18:05 brophdawg11