We Keep Coding

React withRouter and params accessing in class components router v6

Recently i started new project and upgraded for it libraries to newest including react. I encountered first problem when accessing passed params from dynamic route inside class component. In the past in order to do it, one would need to wrap exported class component in withRouter function returned from router. In the documentation they say that this functionality has been removed in v6 and if you need it, it can be recreated manually docs link.
I created with-router.jsx file and pasted their code:
import {
useLocation,
useNavigate,
useParams,
} from "react-router-dom";
function withRouter(Component) {
function ComponentWithRouterProp(props) {
let location = useLocation();
let navigate = useNavigate();
let params = useParams();
return (
<Component
{...props}
router={{ location, navigate, params }}
/>
);
}
return ComponentWithRouterProp;
}
next i added it to my class component:
import React, { Component } from 'react';
import withRouter from './with-router';
class Product extends Component {
render() {
return (
<div className="product">...</div>
);
}
}
export default withRouter(Product);
and it does not work, there is following error:
Compiled with problems:
WARNING in ./src/components/product.jsx 67:15-25
export 'default' (imported as 'withRouter') was not found in './with-router' (module has no exports)
so it does not seem like their own code is working, maybe someone has an idea how to make it work? another thing is to consider future implications, functionality deleted without replacement and if you need it - recreate it? why remove if you have to manually add it anyway, does not make sense with react recently.
"react": "^18.2.0"
"react-dom": "^18.2.0"
"react-router-dom": "^6.4.4"
"webpack": "^5.74.0"
"webpack-cli": "^4.10.0"
"webpack-dev-server": "^4.11.1"

As the error points out, it seems you neglected to export your custom withRouter HOC.
Compiled with problems: WARNING in ./src/components/product.jsx
67:15-25 export 'default'* (imported as 'withRouter') was not found in
'./with-router' (module has no exports*)
* Emphasis is mine
Assuming you've shared the complete with-router.jsx file contents, it's missing a default export.
import {
useLocation,
useNavigate,
useParams,
} from "react-router-dom";
function withRouter(Component) {
function ComponentWithRouterProp(props) {
const location = useLocation();
const navigate = useNavigate();
const params = useParams();
return (
<Component
{...props}
router={{ location, navigate, params }}
/>
);
}
return ComponentWithRouterProp;
}
export default withRouter; // <-- add default export!
so it does not seem like their own code is working, maybe someone has
an idea how to make it work?
The RRD code is well maintained and tested, I've not run across many blatant issues/bugs with their React hooks.
another thing is to consider future implications, functionality
deleted without replacement and if you need it - recreate it? why
remove if you have to manually add it anyway, does not make sense with
react recently.
I think it does make sense with the direction React is going.
React has made it clear that Function components and React hooks are the future of React (for now) and that Class components are, for all intents and purposes, deprecated, though they are kept around for compatibility reasons. The functionality you describe as being "deleted", i.e. removed, was replaced... by the new React hooks, and the FAQ doc you referenced is made available as a compatibility bridge if you are using current RRDv6 components with older React code. Creating this HOC is trivial, if you need it, but if the main objective is to create React function components that use React hooks then there's no need or desire for RRD to export a withRouter HOC of their own that encourages "deprecated" React component coding patterns.
A good general rule here would be to use your new withRouter component on your older class components, and for any new components you create implement them as React Function components and use the React hooks. If you want you can rewrite/convert older class components to function components, but this is basically a "only if you really need/want to" and not a "don't just convert for the sake of converting" type of thing.

Can I use _app.js to share data globally in my app?

I'm building a small chat app that will use sockets.
Thus I need to use both Context API and a global socket variable. This is my first project using Next.js and I'm not sure how the data flows here.
Beforehand, I used to pass props to the component with React router, however I came to realize that it's not possible with Next.js.
so, my question is whether I'm sharing the socket object correctly.
if that is not the case I would highly appreciate it if you can share with me a code snippet of the right implementation of Sockets utilizing Next.js
My _app.js file:
import { createContext } from 'react';
import '../styles/globals.css'
import UserRoom from '../context/state';
import { useState } from 'react';
function MyApp({ Component, pageProps }) {
const [userName, setUserName] = useState('');
const [userRoom, setUserRoom] = useState('');
const socket = io.connect('http://localhost:4000', { transports : ['websocket'] });
return(
<UserRoom.Provider value={{userName, userRoom, setUserName, setUserRoom}}>
<Component {...pageProps} />
</UserRoom.Provider>
)
}
export default MyApp

The answer is Yes you can, you can share all global states inside _app file, but it will affect to all the components, including the server-side component and the client side, if something depends on the client it will throw an error because window is undefined.
and for the information, this is how next js Data-fetching props flow all work :
Data Fetching > _app > components inside pages
read more here

Invalid Hook Call use-neo4j

I recently started building a react app.
I wanted to configure a neo4j database attached to the application. I decided to use the use-neo4j hook. I followed the basic step of creating the driver instance like this:
import React from "react";
import ReactDOM from "react-dom";
import "./css/index.css";
import App from "./js/App";
import Nav from "./js/Nav";
import { Neo4jProvider, createDriver } from "use-neo4j";
const driver = createDriver("neo4j", "localhost", 7687, "lode", "neo4j");
ReactDOM.render(
<React.StrictMode>
<Neo4jProvider driver={driver}>
<Nav />
<App />
</Neo4jProvider>
</React.StrictMode>,
document.getElementById("root")
);
But I ended up having the Invalid Hook Call error.
Except if I remove the Neo4jProvider tags
Seen in this image here
I tried everything I can to fix it, I'm pretty new at React.
I would love someone to help me if they can.

Just like the error says, you can only call hooks inside the body of a functional component. So I would probably create a component that initiates the driver and returns the component that uses it -
import { Neo4jProvider, createDriver } from "use-neo4j";
const NeoProvider = ({ children }) => {
const driver = createDriver("neo4j", "localhost", 7687, "lode", "neo4j");
return (
<Neo4jProvider driver={driver}>
{children}
</Neo4jProvider>
);
}
And then import that at your top level and use that instead of the Neo4jProvider you're importing from the package.

Fixed the issue, I had multiple Reactjs running

Can I use face-recogition npm package in react?

I'm learning react and I'm trying to implement an npm package called face-recognition in my react project.
But it looks like that their documentation is for nodejs. I've looked into the source code of the package which seems that it doesn't export any module so I just imported it. But still, my console is giving me the error ModuleNotFoundError
Inshort: Can I use this face-recognition library in my react.js?
Here is my live code in codesandbox
Below is the raw code of the same file.
import React from "react";
import "face-recognition";
import image1 from "./assets/fFace.jpg";
import image2 from "./assets/mFace.jpg";
const Home = () => {
const imageOne = image1;
const win = new fr.ImageWindow();
// display image
win.setImage(imageOne);
const detector = fr.FaceDetector(imageOne);
// detect all faces
const faceRectangles = detector.locateFaces(imageOne);
return (
<>
<h1>Face Recognition</h1>
{faceRectangles}
</>
);
};
export default Home;

From the npm page
This package is pretty much obsolete. I recommend you to switch to face-api.js, which covers the same functionality as face-recognition.js in a nodejs as well as browser environment.

What is the best way to create component library for both React and Preact?

I'm currently working on a project which involved both React and Preact. I came across to this where I need to use same component for React and Preact.
Is it a good idea to put the component into npm library package. What are the possible way to create component library for both React and Preact? Looking forward to hear your ideas and discussions.
The code might look like as the following:
React Project: Home.js
import React from 'react'
import Fancy from 'fancy-component/react' // My <Fancy /> component library
class Home extends React.Component {
render() {
return (
<div>
{/* Other parts of the code run here*/}
<Fancy text='🦄' />
</div>
)
}
}
export default Home
Preact Project: AnswerPage.js
import { h, Component } from 'preact'
import Fancy from 'fancy-component/preact' // My <Fancy /> component library
class AnswerPage extends Component {
render() {
return (
// Other Preact codes run here again
<Fancy text='🚀 again' />
)
}
}
export default AnswerPage
Component library: fancy-component
const Fancy = ({ text = '' }) => (
<div>
<span>{`This is so Fancy ✨ ${text}`}</span>
</div>
)
export default Fancy

We did this very thing recently, and because we could not find much information regarding this online it involved quite a bit of trial and error. This is what we ended up with:
Folder Structure:
/apps
/mobile
/desktop
/shared
/components
With preact 10, preact-compat is built in so you don't have to worry having separate components - just use React as normal for the components in your shared folder and preact will automatically alias the imports correctly.
As far as aliasing goes, we added this into our preact.config.js so that we can import the components like #components/Date from the app directory
config.resolve.alias['#components'] = path.resolve(__dirname, '../../shared/components')
For the React app, the only way that I could make that work was to add the aliasing in the babel.config.js like so:
['module-resolver', {
alias: {
'#components': '../../shared/components'
}
}]
I hope that this helps someone else that might be stuck on this!