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";
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 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
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",
This is screenshot of error:
I have 2 tests, the first one is working alright: sum.js :
function sum(a, b) {
return a + b;
}
module.exports = sum;
sum.test.js
const sum = require('./sum');
test('adds 2 + 5 to equal 7', () => {
expect(sum(2, 5)).toBe(7);
});
it works okay, prints message in console.
the second one (I dont sure) is set by default by create-react-app
App.test.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
App.js :
import React, { Component } from 'react';
import {HashRouter} from "react-router-dom";
import Routes from './routes';
import Alerts from './app/components/alerts';
import Navbar from '../src/app/navbar/navbar'
import Auth from './app/settings/auth';
import Register from './app/entities/user/modify-modal';
import './index.scss';
class App extends Component {
componentWillMount(){
}
render() {
return (
<HashRouter>
<>
<Auth></Auth>
<Navbar></Navbar>
<Alerts></Alerts>
<Register/>
<div className={"content-root"}>
<Routes/>
</div>
</>
</HashRouter>
);
}
}
export default App;
package.json
{
"name": "x5_r_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/cli": "^7.2.3",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/preset-env": "^7.4.1",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#fortawesome/fontawesome-free": "^5.7.1",
"#fortawesome/fontawesome-svg-core": "^1.2.12",
"#fortawesome/free-solid-svg-icons": "^5.6.3",
"#fortawesome/react-fontawesome": "^0.1.3",
"axios": "^0.18.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"bootstrap": "^4.2.1",
"jest": "^24.5.0",
"jest-cli": "^24.5.0",
"jsdom": "^14.0.0",
"moment": "^2.23.0",
"node-sass": "^4.11.0",
"react": "^16.7.0",
"react-addons-test-utils": "^15.6.2",
"react-bootstrap": "^1.0.0-beta.5",
"react-bootstrap-typeahead": "^3.2.4",
"react-datetime": "^2.16.3",
"react-debounce-input": "^3.2.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.2",
"react-select": "^2.3.0",
"reactstrap": "^7.0.2",
"rxjs": "^6.3.3",
"scss": "^0.2.4",
"test": "^0.6.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.4.0",
"babel-core": "^6.26.3",
"babel-jest": "^24.5.0"
}
}
package-lock.json is 20000 rows of code, so I dont know, what part of it is needed for explanation of my problem, all guides that I've read about this problem were useless for me, so I am asking here.
The issue is that the app was bootstrapped with create-react-app, but then the latest version of Jest was also installed and the npm test script within package.json was changed to launch jest directly.
The test failed since Jest was not configured to transpile the JSX syntax.
Tests that use syntax like JSX have to be transpiled before they can be run by Jest.
create-react-app includes react-scripts which handles all of that configuration automatically.
If an app is bootstrapped with create-react-app then Jest does not need to be installed and configured manually.
If an app is not bootstrapped with create-react-app, or if the app is ejected from create-react-app, then Jest needs to be installed and configured to transpile the test code.
I have some weird error everytime when I'm trying to use some component from 'react-bootstrap'. Here is some small example where I'm importing "HelpBlock" component.
import PropTypes from 'prop-types';
import React from 'react';
import HelpBlock from 'react-bootstrap';
class RegisterFormDetails extends React.Component {
...
<HelpBlock>{validationErrorMessage}</HelpBlock>
}
</div>
</div>
);
};
export default RegisterFormDetails;
but then I'm getting this error
Attempted import error: 'react-bootstrap' does not contain a default export (imported as 'HelpBlock').
my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"bootstrap": "^4.3.1",
"lodash": "^4.17.11",
"prop-types": "^15.7.2",
"react": "^16.8.3",
"react-bootstrap": "^0.32.1",
"react-bootstrap-sweetalert": "^4.4.1",
"react-dom": "^16.8.3",
"react-scripts": "^2.1.5",
"react-select": "^2.4.1"
}
}
somebody can help me ? I have rechecked the react-bootstrap folder in node_modules and contains the component which I'm trying to import
You can import individual components like:
import HelpBlock from 'react-bootstrap/HelpBlock ';
The first one is importing component directly, The above is a default import. Default imports are exported with export default .... There can be only a single default export. Since 'react-bootstrap' does not contain a default export , you have to import directly.
or import { HelpBlock } from 'react-bootstrap';
Here, only HelpBlock will be imported. Hope it helps.
This article will help you to understand es6 modules.