Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React router docs are incorrect #4631

Open
realty-direct opened this issue Jan 23, 2025 · 4 comments
Open

React router docs are incorrect #4631

realty-direct opened this issue Jan 23, 2025 · 4 comments
Labels
status: waiting for author Issue with insufficient information

Comments

@realty-direct
Copy link

realty-direct commented Jan 23, 2025

Steps to reproduce

https://mui.com/toolpad/core/integrations/react-router/#wrap-all-your-pages-in-a-reactrouterappprovider

When using the code snippet from here I get a This expression is not callable error on createBrowserRouter. You should update this.

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: react-router docs

@realty-direct realty-direct added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 23, 2025
@bharatkashyap
Copy link
Member

https://mui.com/toolpad/core/integrations/react-router/#wrap-all-your-pages-in-a-reactrouterappprovider

I see the snippet working correctly in https://codesandbox.io/p/devbox/nervous-chatterjee-l6xjrf?file=%2Fsrc%2Fmain.tsx, can you provide a minimal reproduction of your issue?

@bharatkashyap bharatkashyap added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 24, 2025
@shermanjoshua
Copy link

shermanjoshua commented Jan 24, 2025

I'm not certain that this is 100% the same issue, but in my app that I've been running since 0.10.0, after updating to the new AppProvider in 0.12.0, on build I get the following error:

error during build:
node_modules/@toolpad/core/react-router/ReactRouterAppProvider.js (4:9): "useSearchParams" is not exported by "node_modules/react-router/dist/index.js", imported by "node_modules/@toolpad/core/react-router/ReactRouterAppProvider.js".
file: /Users/********/node_modules/@toolpad/core/react-router/ReactRouterAppProvider.js:4:9

2: 
3: import * as React from 'react';
4: import { useSearchParams, useLocation, useNavigate } from 'react-router';
            ^
5: import { AppProvider } from "../AppProvider/AppProvider.js";
6: import { jsx as _jsx } from "react/jsx-runtime";

From the docs, it looks like you are planning to expose this function (useSearchParams) so I'm wondering if it's just being exposed prematurely?

@apedroferreira
Copy link
Member

apedroferreira commented Jan 24, 2025

I'm not certain that this is 100% the same issue, but in my app that I've been running since 0.10.0, after updating to the new AppProvider in 0.12.0, on build I get the following error:

error during build:
node_modules/@toolpad/core/react-router/ReactRouterAppProvider.js (4:9): "useSearchParams" is not exported by "node_modules/react-router/dist/index.js", imported by "node_modules/@toolpad/core/react-router/ReactRouterAppProvider.js".
file: /Users/********/node_modules/@toolpad/core/react-router/ReactRouterAppProvider.js:4:9

2: 
3: import * as React from 'react';
4: import { useSearchParams, useLocation, useNavigate } from 'react-router';
            ^
5: import { AppProvider } from "../AppProvider/AppProvider.js";
6: import { jsx as _jsx } from "react/jsx-runtime";

From the docs, it looks like you are planning to expose this function (useSearchParams) so I'm wondering if it's just being exposed prematurely?

Hi, useSearchParams is an export from the react-router library that you should be using if you're using React Router.
Do you have a node_modules/react-router folder in your project? It should be exported from there...

The react-router library used to be called react-router-dom very recently, so also let me know if the problem was related to that.

@shermanjoshua
Copy link

shermanjoshua commented Jan 24, 2025

EDIT: Figured it out. I had to manually update react-router. It's got v7 now including useSearchParams

I'm not sure if this was a problem with the way I upgraded or if it's a normal upgrade path issue others might run into, but something to be aware of so you don't get inundated with dummies like me :)


I think I switched everything over correctly, but let me know if I missed something or if it looks incorrect to you. I've got the node_modules directory highlighted for the lib, react-router's package.json open, and the build log off to the right in this image for you.

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: waiting for author Issue with insufficient information
Projects
None yet
Development

No branches or pull requests

4 participants