We Keep Coding

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

Gatsby's StaticImage not rendering in Storybook

I'm trying to write a storybook for my component with Gatsby's StaticImage but this ends up in nothing at all rendered and an error disguised as warning in the console:
Please ensure that "gatsby-plugin-image" is included in the plugins array in gatsby-config.js, and that your version of gatsby is at least 2.24.78
(anonymous) # static-image.server.tsx:52
I wonder if there's a way to render component using StaticImage outside of Gatsby?
Component is trivial:
import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';
export const Card = ({ title }) => {
return (
<div>
<div>{title}</div>
<StaticImage src="../../assets/images/background.png" alt="" width={300} height={100}/>
</div>
);
};
I'm using Gatsby v3 & Storybook v6.3

Based on the Gatsby Documentation, it isn't presently supported yet.
Note: Writing stories for components that use StaticImage from gatsby-plugin-image is currently not supported. Contributions to making this possible are welcome.

Material UI styles not working in component (warning: several instances of `#material-ui/styles`)

I've created a stand-alone React component that uses the Material UI (4.8.3) library and published this to a private NPM package in order that it can be used in a range of apps.
The stand-alone component project works fine (I'm using Storybook to test the component), but when I publish and then import the component into a new React project (created using create-react-app) I get the warning:
It looks like there are several instances of `#material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.
The component renders on the page as seen below, but without any theming applied:
When it is clicked, any theming on the main React App is removed (note the dark blue bar in the background behind the menu has lost its color):
I'm using the Material UI withStyles functionality to theme my component, which I guess is the problem as my main React app is also using this, but this is the recommended way to apply to style. Does it feel like I need to somehow inherit an instance of the theme from the main host App?
My component project was created using create-react-library and so is using Rollup (0.64.1) and babel (6.26.3).
Here is the component:
import React, {Component} from 'react'
import { withStyles } from '#material-ui/core/styles'
const styles = theme => ({
root: {
fontSize: '14px',
}
})
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class MyComponent extends Component {
render() {
const { classes } = this.props
return (
<div className={classes.root}>Hello world</div>
)
}
}
export default withStyles(styles)(MyComponent)
Which is published to an NPM package and then imported into the main app using:
import React, { Component } from 'react'
import { MyComponent } from '#xxx/mycomponent'
const styles = theme => ({
root: {
display: "flex",
flexGrow: 1
}
});
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// Class
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class App extends Component {
//
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
render() {
//
const { classes } = this.props;
return (
<div className={classes.root}>
<MyComponent />
</div>
);
}
}
export default withRouter(withStyles(styles)(App))

I had the same issue, but I do not use StoryBook. This is the first link in Google, so I post my case here, as it might help.
This is the link on how to fix the alert, but it does not work for me. npm dedupe does nothing and I am unable to change config since I am using create-react-app.
So I did following:
Removed #material-ui/styles dependency from package.json
Ran npm i
Changed all import styles from '#material-ui/styles' to import styles from '#material-ui/core/styles'

I have an almost identical setup and ran into this exact issue when importing the components into a different project. I should mention that we're using webpack to build the app that's consuming the component. It was suggested to me to try the following in my webpackconfig:
module.exports = {
...
resolve: {
alias: {
"#material-ui/styles": require.resolve("#material-ui/styles")
}
}
}
This worked great for my case.
For reference: https://webpack.js.org/configuration/resolve/

You should link #material-ui/styles in your story book
so first need to npm link #material-ui/styles in your story book and than in your apps

Please try to install the below package. This helped resolve my issue.
npm i #mui/material

Next.js with Typescript: Invalid hook call. Hooks can only be called inside of the body of a function component

On a brand new project using next.js with typescript I am getting the following error, within a functional react component.
Invalid hook call. Hooks can only be called inside of the body of a function component
In the reference of the error, it is actually showing the functional component that state is being used in:
I have reviewed the recommendations at https://reactjs.org/warnings/invalid-hook-call-warning.html
I don't think I am breaking the rules of hooks as I am:
Call[ing] them at the top level in the body of a function component.
I don't think I have two versions of React, I am using yarn and I have resolutions added to only use one version of React (https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)
I don't really know what else I can do to trouble shoot this, so I have published the minimal repo to reproduce the issue: https://github.com/coler-j/shopify_playground
Component:
import React, { useState, useCallback } from 'react'
import {
Layout,
Page,
Card,
Button,
FormLayout,
TextField
} from '#shopify/polaris'
export default function App() {
const [first, setFirst] = useState('')
const handleFirstChange = useCallback(value => setFirst(value), [])
return (
<Page title="Polaris">
<Layout>
<Layout.AnnotatedSection title="Form" description="A sample form using Polaris components.">
<Card sectioned>
<FormLayout>
<FormLayout.Group>
<TextField value={first} label="First name" placeholder="Tom" onChange={handleFirstChange} />
</FormLayout.Group>
<Button primary>Submit</Button>
</FormLayout>
</Card>
</Layout.AnnotatedSection>
</Layout>
</Page>
)
}

I've ran into a similar problem after pushing my Next.js project (which was 100% working) to Github and then – almost immediately – cloning it back to the same computer (running Windows 10).
While the error dialog was complaining of 'Invalid hook call', the error watefar in my terminal actually complaints about invalid directory casing. I've tried to switch to a few UNIX based terminals, but to no avail.
I deleted the node_modules and .next directories and tried the fresh install from a PowerShell. The issue was gone…
I think what initially caused the issue was that I used a default Windows command line for the first yarn install (it starts a little bit quicker than the Windows Terminal and I was impatient) and it somehow did messed the casing. But I'm not sure.
Using a Docker container is definitely a more robust and futureproof solution…

Uncaught TypeError: (0 , _reactRouter.withRouter) is not a function when navigating to route programmatically in react-router 2.4.0

I am using react-router 2.4.0 and want to link to another route programmatically (what I did before using <Link>).
It's explained nicely in this SO post where they say in 2.4.x you should use the decorator pattern with withRouter, so I am using the following code:
import {withRouter} from 'react-router' // further imports omitted
class CreateJobItemFormRaw extends React.Component {
...
}
const CreateJobItemForm = withRouter(CreateJobItemFormRaw)
export default CreateJobItemForm
Then in other files, I use
import CreateJobItemForm from './CreateJobItemForm'
However, with this approach my app doesn't render at all any more and the console outputs:
CreateJobItemForm.js:76 Uncaught TypeError: (0 , _reactRouter.withRouter) is not a function
Can anyone help me solve this?

I trust that you are in fact using react-router 2.4.0, but in my case it was worth double-checking that my package.json did in fact enforce that version. I modified my package.json as such:
"dependencies": {
"react-router": "^2.4.0",
...
}
Hope this helps.

In my case, I upgraded to react-router v6 and discovered that withRouter was removed and hooks should be used instead.
Upgrade documentation here:
https://reactrouter.com/en/main/upgrading/v5
Along with the upgrade to v5.1, you should replace any usage of withRouter with hooks.
Here is a detailed guide to hooks:
https://reacttraining.com/blog/react-router-v5-1/

In a comment to another answer you linked to this question and said that you're trying to navigate using react-router 2.4+. Try and put the PropType specifications in the file and see if that gives you any warnings. For Example:
// PropTypes
Example.propTypes = {
router: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
}).isRequired
};

import { withRouter } from 'react-router-dom'
react-router v4.x