I'm trying to use the react-pro-sidebar package
https://github.com/azouaoui-med/react-pro-sidebar
However I keep on getting the invalid hook call error
Uncaught 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
For some context, I'm using react with react-router for navigation between pages. I wanted to create a sidebar and populate the menu items with react-router links, but that wasn't working out. Below is what I have:
import React from 'react'
import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
const fun = <ProSidebar>
<Menu iconShape="square">
<MenuItem>Dashboard</MenuItem>
<SubMenu title="Components">
<MenuItem>Component 1</MenuItem>
<MenuItem>Component 2</MenuItem>
</SubMenu>
</Menu>
</ProSidebar>;
const SideBarDashboard = () => {
return (
<div>
{fun}
</div>
)
}
export default SideBarDashboard;
And an alternative approach that didn't work out either:
const fun = () => { <ProSidebar>
<Menu iconShape="square">
<MenuItem>Dashboard</MenuItem>
<SubMenu title="Components">
<MenuItem>Component 1</MenuItem>
<MenuItem>Component 2</MenuItem>
</SubMenu>
</Menu>
</ProSidebar>; }
const SideBarDashboard = () => {
return (
<div>{fun}</div>
)
}
And here is my package.json file:
{
"name": "contact-router",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
As a 'solved my own answer', my problem was that I installed the package into the wrong folder so it was never included in my package.json
Related
I'm getting invalid hook error on useNavigate hook:
Warning: 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
Code:
import React from "react";
import styles from "./Home.module.css";
import { useNavigate } from "react-router-dom";
import Card from "../../components/shared/Card/Card";
import Button from "../../components/shared/Button/Button";
const Home = () => {
const signInLinkStyle = {
color: '#0077ff',
fontWeight: 'bold',
textDecoration: 'none',
marginLeft: '10px'
}
const navigate = useNavigate();
const startRegister = () => {
navigate("/authenticate");
}
return (
<>
<div className={styles.cardWrapper}>
<Card title='Welcome to Codershouse!' icon='logo'>
<p className={styles.text}>
We’re working hard to get Codershouse ready for everyone! While we
wrap up the finishing youches, we’re adding people gradually to make
sure nothing breaks :)
</p>
<div>
<Button onClick={ startRegister } text="Let's Go"/>
</div>
<div className={styles.signinWrapper}>
<span className={styles.hasInvite}>Have an invite text?</span>
</div>
</Card>
</div>
</>
);
};
export default Home;
Package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Full error image:
I'm a beginner who just started with react formik and i get error message on the console each time i try to make use of formik
Warning: Invalid hook call. Hooks can only be called inside of a functional component. This could happen for one of the following reasons.
You might have mismatching versions of React and the renderer (such as React DOM).
You might be breaking the rules of hooks.
You might have more than one copy of React on the same app.
I've checked my version of react and it's up to date, Here's my package-lock.json.
"name": "formik-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Here's my code...
import React from "react";
import { useFormik } from "formik";
function YoutubeForm() {
const formik = useFormik({
initialValues: {
name: "",
email: "",
channel: "",
},
});
return (
<div>
<form>
<label htmlFor="name">Name</label>
<input
type={"text"}
id="name"
name="name "
onChange={formik.handleChange}
value={formik.values.name}
/>
<label htmlFor="email">E-mail</label>
<input
type={"email"}
id="email"
name="email"
onChange={formik.handleChange}
value={formik.values.email}
/>
<label htmlFor="channel">Channel</label>
<input
type={"text"}
id="channel"
name="channel"
onChange={formik.handleChange}
value={formik.values.channel}
/>
<button>Send</button>
</form>
</div>
);
}
export default YoutubeForm;
Just curios Have you imported formik from package manager? Cause the code works just fine for me when I am trying to emulate the error. did not notice any formik dependancy in your json.
An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling
I want help to identify this error in production.
The same code is running well in localhost
here is my code
import React, { useRef, useEffect, useState } from 'react';
import 'mapbox-gl/dist/mapbox-gl.css'
import Map, { Marker, MapRef } from "react-map-gl";
import { useDataContext } from './DataContext';
export default function MapView() {
let refs;
// Setting up the state for the map
const [viewport, setViewport] = useState({
latitude: lat,
longitude: lon,
zoom: 10,
bearing: 0,
pitch: 0,
width: "100%",
height: "100%",
attributionControl: false
});
//....more code
return (
<>
<Map
ref={(e) => refs = e}
mapboxAccessToken={process.env.REACT_APP_MAPBOX_KEY}
initialViewState={viewport}
onViewportChange={(viewport) => setViewport(viewport)}
mapStyle={colorThem === 'light' ? 'mapbox://styles/mapbox/dark-v10' : 'mapbox://styles/mapbox/streets-v10'} >
<Marker latitude={lat} longitude={lon}>
<i className="pl-2 fa-solid fa-location-dot fa-bounce text-red-500 text-xl"></i>
</Marker>
</Map>
</>
);
}
The same code is running well in localhost but when I am deploying this on Heroku error only in Mapbox, another feature working properly.
package.json
{
// ....
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"mapbox-gl": "^2.7.0",
"moment": "^2.29.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-map-gl": "^7.0.7",
"react-moment": "^1.1.1",
"react-scripts": "5.0.0",
"recharts": "^2.1.9",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
//.....
}
see below IMG
error
I solved this problem which is come in production.😊
from ref https://docs.mapbox.com/mapbox-gl-js/guides/install/#:~:text=OR-,defaults%2C%20not%20ie%2011,-This%20can%20be
just changed my package.json browserslist.production field.
this
//....
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
// ...
},
to this
//....
"browserslist": {
"production": [
"defaults",
"not ie 11"
],
// ...
},
I am working on an react js application, I had added reactbootstrap & primereact library for the styling.
the reactbootstrap library is working fine But primereact styling is not getting applied , I have followed all the steps present in getting started section, can anyone suggest me what is missing.
I am adding the Files for the refrence.
I used the below command to add files in node modules
npm install primereact --save
npm install primeicons --save
App.js File
import logo from './logo.svg';
import './App.css';
import Header from './MyComponents/Header'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import {Todos} from './MyComponents/Todos'
import {TodoElements} from './MyComponents/TodoElements'
import {Footer} from './MyComponents/Footer'
function App() {
<script src="https://unpkg.com/primereact/primereact.all.min.js"></script>
return (
<><Header title='Code With Shiva' searchBar={true}/>
<Todos/>
<TodoElements/>
<Footer/>
</>
);
}
export default App;
Todos.js where I am adding primereact styled button
import React from 'react';
import { Button } from 'primereact/button';
export const Todos = () => {
return (
<div>
<Button label="Success" className="p-button-success" />
</div>
)
}
Adding package.json for refrence
{
"name": "todos-list",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"primeicons": "^5.0.0",
"primereact": "^7.1.0",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react-bootstrap": "^2.1.1",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"react-transition-group": "^4.4.2",
"style-loader": "^3.3.1",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Adding final result image
All PrimeReact components require a theme so just add...
import "primereact/resources/themes/lara-light-indigo/theme.css";
I make a simple component hello world in react js this
import React from 'react';
function App() {
return (
<div >
hello4
</div>
);
}
export default App;
I export in index file like this
import App from './App'
module.exports = {
App
}
Now I export this component is index.js to use in another project
so in another project I used above project as a dependency like this
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"pubnsi": "git+https://git#github.com/naveennsit/pubs.git",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
but when I used this component in my another project like this it gives me syntax error
import React from 'react';
import './App.css';
import App from "pubnsi/src/App";
function App1() {
return (
<div className="App">
hello
<App/>
</div>
);
}
export default App1;
I tried to replicate this bug in codesandbox
https://codesandbox.io/s/nifty-glitter-bj6sz?file=/package.json
but not getting error in codesandbox.
package.json file
{
"name": "consukmer",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"pubnsi": "git+https://git#github.com/naveennsit/pubs.git",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
To use a Github repository as a dependency, you will have to add it like this:
"pubnsi": "naveennsit/pubs"
instead of like this:
"pubnsi": "git+https://git#github.com/naveennsit/pubs.git",