We Keep Coding

React Component - Cannot read properties of null (reading 'useState')

I am building a little local dev/testing/documentation environment for some components which are used across different projects and so want to create them as individual npm packages.
Everything was working perfectly until I tried to use useState() in one of the components. Add this created the following errors:
Invalid hook call. Hooks can only be called inside of the body of a function component.
TypeError: Cannot read properties of null (reading 'useState')
I feel this is strange and I can't figure out what is causing it. I also tested with other hooks to see if it was just useState that was the problem but others such as useEffect and useRef also have the same problem.
Project structure is:
/components (the components to develop/test/document
/component-group
/Component
index.js
Component.js
component.scss
package.json
/library (where all the components are developed/tested/documented)
/component1
/component2
/etc (all the components that make up the library)
webpack.config.js
package.json
etc...
Components are imported into the library using a relative path because I don't won't to have to publish them to npm and update the version locally every time a change is made and needs to be tested.
As for the code for the component where useState is causing problems, this is a basic version which still causes problems:
import React, { useState } from 'react';
const TestComponent = () => {
const [testState, setTestState] = useState("testing");
return (
<p>Hello World</p>
)
}
export default TestComponent
If I comment out the useState line then Hello World is displayed, if I uncomment the line then the errors appear.
Any ideas as to what might be wrong would be really appreciated.
Thank you in advance!

Importing external React components to nextJS project

I have a functional component in my own library that I'm importing into a nextJS project, and for some reason it's not recognized as a react functional component.
Example of my library code:
import React, { useState } from 'react';
export function Dialog(){
const [open, setOpen] = useState(false);
return (<>
// some jsx logic
</>)
}
importing it in my nextJS component:
import { Dialog } from '#myNamespace/library';
When I try to use
<Dialog />
I get this error:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.
So I logged out a local react component with the Dialog and found that while the local react component seems to be on the namespace react__WEBPACK_IMPORTED_MODULE_1___default, my imported component just remains a plain function instead of a react component.
Any ideas as to why NextJS isn't importing my function as a react component?
EDIT:
Here's something really interesting: When I remove the hook, nextJS seems to think it is a react component. But when I put the hook in, it doesn't - and throws that error.
SOLUTION
For anyone who's interested - the issue was that my package was npm link into my project. So in that case there's issues with it not packaging up the components correctly.

It is possible that your react and react-dom isn't updated to the standard for hooks try yarn add react#18.6 react-dom#18.6

React router history.push() not working from history.listen()

In my React application I'm using react-router-dom for routing. I have a custom history object that I pass in to my Router (not BrowserRouter) object so I can configure a listen handler on the history object.
import { createBrowserHistory } from 'history';
import auth from './auth';
const history = createBrowserHistory();
history.listen((location) => {
if(location.pathname !== '/login'){
if(!auth.getToken()){
history.push('/login');
}
}
});
export default history
This has worked fine for the past few months, however, after recently updating my node_modules, all of a sudden the push inside the listen function does not cause an update to the DOM (but changes the URL).
I have no idea what is causing this, and I'm using history.push as the sole means of navigating throughout the rest of the app, which is still working, so I don't know why it doesn't work from this file.
Even importing the history object in other .js files that are not a part of my React component tree can call history.push and have it update.
Any help is appreciated!
Edit: My react-router-dom package version is ^4.4.0-alpha.0, and React 16.4.0

Thanks Tholle for the answer:
My problem was fixed by replacing every history.push() with setTimeout(() => history.push(), 0);

Unable to compile react application as it says "Module not found"

I have been trying to execute a very simple react application, but for some reason I'm unable to compile it. When i try to compile it in bash using "npm start", i get the error stating "Failed to compile: ./src/index.js
Module not found: Can't resolve './registerServiceWorker' in '/Users/Pruthvi/Desktop/ReactApplication/my-app/src'"
can anybody help me as I am a new bee to react application!

By default, create-react-app will create a progressive web app, as documented here. The progressive web app relies on registerServiceWorker() in the registerServiceWorker.js file. You have apparently deleted this file, so your project no longer builds.
You have two choices:
Keep your project as a progressive web app, in which case you should simply restore the original state you had after first creating.
Opt out of the progressive web app features.
In order to opt out of the progressive web app features, you need to modify your src/index.js file as follows:
Delete the import of the registerServiceWorker.
Delete the registerServiceWorker() call.
Your src/index.js will then look like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// Deleted -- import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// Deleted -- registerServiceWorker();
Once you've made those modifications to your index.js, you can safely delete the registerServiceWorker.js file (which it appears you've already done based on the error message you've posted).
The documentation gives a more complete description of how to opt out and some of the consequences of having a progressive web app.

If you are new to react and need to build apps fast you can try
create-react-app by facebook
it a command line tool that will help you build better react app fast with zero configuration you can learn more from the link above and its easy to use
also make sure that you use a good editor that can help you catch errors
and to help you and give you good answer the second time please provide your code to understand the problem well .

React Router v4.1.1

I am trying to convert this simple application to support react router https://github.com/jackfranklin/universal-react-example to v4.1.1.
In the package.json all I changed is the following:
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1"
Everything stopped working. Could you please help me build this app working in React Router v4.1.1? There is no proper documentation for react routerv4.1.1 server side rendering. So struck with this new version.
Since React Router v4.1.1 is a major change, answering this question will help a lot of us, in the form of first proper tutorial for
React Router v4.1.1.

React Router v4 is very different from the previous versions, you can't just change the version number and expect everything to work smoothly. Go through the docs and the examples. Change the app step by step.
Useful links:
https://reacttraining.com/react-router/web/guides/server-rendering
http://rants.broonix.ca/upgrading-to-react-router-v4/
Moving from react router 3.x to 4.x

A few things changed when React Router 4!
First, the names of the packages changed. So you have to update your imports from 'react-dom' to 'react-router-dom'. You still need to include 'react' and 'react-router' as well.
Second, there are multiple Browsers now. So you have to import BrowserRouter instead of just Router. (You can also use HashRouter, but I'd say start with BrowserRouter.)
See:
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
Start there and keep going. Good luck!