Bug: Uncaught TypeError: Cannot read properties of null (reading 'useContext') when importing react-router-dom

[BiancaScoro]

React version:

Steps To Reproduce

1. Create a basic React app by using npx create-react-app name of app
2. import Link or BrowserRouter from 'react-router-dom' and you will get the error and a blank screen.

The current behavior

Giving me an error in the console.

The expected behavior

Use react-router-dom and have the code appear in the browser.

[yasirw212]

I just tried it out starting a react-app from scratch only importing the BrowserRouter and Link and was not given an error when running it on my browser. Can you send a picture of the error you are receiving in browser or your code if possible?

Based off the information given this far and similar experiences I've had the problem more then likely is occuring in your package.json and the dependencies you have installed.

[BiancaScoro]

I'm not sure if this additional error is also affecting it... "[DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. (Use node --trace-deprecation ... to show where the warning was created) (node:6348) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option." This is a screenshot of the error in the console the error doesn't show in the browser, its just white.

[yasirw212]

Potential Solutions

• upgrading webpack-dev-server to 4.7.3

• https://github.com/facebook/create-react-app/pull/11862/files/2dff88610f9ad215349424d1769b88e0a0d2fa1d

• Deleting node_modules folder and running npm install to include new updates in dependencies that may be causing the error

[BiancaScoro]

I deleted the package.json and now I cannot get it back. I tried npm install.

[BiancaScoro]

I recovered it.

[BiancaScoro]

I think the react-router-dom issue is something different. I still have the error.

[BiancaScoro]

The error is showing in the browser now

[BiancaScoro]

This is what the App.js looks like

[yasirw212]

I deleted the package.json and now I cannot get it back. I tried npm install.

You weren't supposed to delete the package.json only the node_modules folder that is built when you run npm install based off the dependencies inside the package.json. Did you reinstall the dependecies you previously had or did you recover the package.json as it was?

[BiancaScoro]

Yes, I did.

[BiancaScoro]

It says I have react-router-dom but it doesn't work.

[atalayio]

Can you try this?

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

or like this?

<Link
to={item.command}
>
{item.icon}
{item.name}
</Link>

"to" prop, would be okay.

[BiancaScoro]

Whenever I do that, I get the error in the console.

[BiancaScoro]

I just discovered I am able to import from react-router-dom if I make an application using npm create vite rather than using npx create-react-app. I only get the error when I use npx create-react-app for some reason.

[Mohammad-Hossein-Ostad]

Hello @BiancaScoro,

npx create-react-app works pretty fine. Im not sure if you import and wrap { BrowserRouter } into src/index.js.

[BiancaScoro]

Yes, I do.

[BiancaScoro]

It is the npx create-react-app for me, I am not sure why.

[Mohammad-Hossein-Ostad]

Could you share the src/index.js source code?

[BiancaScoro]

[wangsanshao]

HI，Has the problem been solved？

[leoimewore]

Is this issue solved ?

[Nathan-Roberts123]

Is this issue solved??

[BiancaScoro]

Yes it is.

[pwbriggs]

Yes it is.

As per your comment, @BiancaScoro, would you mind marking this issue as closed?

Thanks! 😄

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!