import Slider from "react-slick";
i have imported react slick also installed it.
import React, { useEffect, useRef,useState } from 'react';
import Slider from "react-slick";
import '../Styles/Work.css' ;
const Work = () => {
return (
<div style={{height:"100vh"}} ref={ref} className='work-container' id="work">
<h1 ref={title} className='work-title'>
MY WORKS
{/* {inView && navigate('/#about')} */}
</h1>
</div>
)
}
export default Work
packagelock file
"react-scripts": "5.0.0",
"react-slick": "^0.28.1",
"react-slick-carousel": "^0.14.9",
it's displays in my package-lock too. what's the issue here?? i am using react with typescript
You have to install the types for 'react-slick' #types/react-slick . Make sure its on your package.json as well as r#types/react
16.8.2
#types/react-dom
As you use typescript, you have to install it's type by following:
npm install --save #types/react-slick
Related
Struggling to wrap my head around this issue. I am using the built in CSS modules for my components in Nextjs. When i lazy load my component that has a CSS module, I get the error CSS Modules cannot be imported from within node_modules..
If I replace ${asset.name} with the value button, i.e dynamic(() => import(#preamp/assets/Button)), nextjs will compile.
The code will execute correctly if i dont use CSS modules. It will lazy load dynamic components in. Only when i add the file to the project.
If i hardcode the import path it compiles. I only have this issue when I use a template literal string.
Any help is highly appreciated.
import React from 'react';
import dynamic from 'next/dynamic';
const asset = { name: 'Button' };
const NewComponent = dynamic(() => import(`~/assets/${asset.name}`), {
ssr: false,
});
export default function index() {
return (
<div className="grid-container">
<div className="grid-x grid-margin-x">
<div className="cell medium-6 large-6">
<NewComponent />
</div>
<div className="cell medium-6 large-6">12/6/8 cells</div>
</div>
</div>
);
}
Button.js
import React from 'react';
import styles from './Test.module.css';
export default function Index() {
return <div className={styles['btn-primary']}>Test Div</div>;
}
EDIT:
If I move the Test.module.css into a different folder, it will compile. I havent seen any documentation or reasoning why the CSS modules has to live in a particular area.
button.js updated
import React from 'react';
import styles from '~/test/Test.module.css'; // <-- Moved into a different folder
export default function Index() {
return <div className={styles['btn-primary']}>Test Div</div>;
}
Project specs:
"dependencies": {
"classnames": "^2.3.1",
"eslint-plugin-prettier": "^3.4.1",
"eslint-plugin-react": "^7.27.0",
"next": "^12.0.3",
"next-transpile-modules": "^9.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass": "^1.43.4"
},
Using node v14.17.3
Just wanted to post my answer. If you are going to use dynamic imports, then import paths themselves cannot be dynamic. I've added more information here.
https://github.com/vercel/next.js/issues/31271
when I tried to use matrial UI textfield I got the invalid hook call error. how to fix it ?
import './Login.css';
import TextField from "#material-ui/core/TextField";
const Login = () => {
return(
<div className="login">
<div className="loginContainer">
//***** <TextField /> *****//
</div>
</div>
);
}
export default Login;
When I remove the TextField Component it works fine. when I add it it says
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
I have the react and react-dom same versions
"react": "^17.0.2",
"react-dom": "^17.0.2"
but still I got the error, can anyone give me the reason why it is so ?
I have react and react-dom versions 17.0.2 in package.json before
Then I changed it to
{
"#material-ui/core": "latest",
"react": "latest",
"react-dom": "latest"
}
and then I executed the "npm install" It installed the latest versions of all the dependencies mentioned above. This fixed the issue.
I keep getting this error despite having tried to install react-bootstrap, reactstrap, adding the scripts and imports from react-bootstrap documentation.
I have tried : npm i react-bootstrap --save
And: npm install react-bootstrap bootstrap
I have created a similar project with this same component and it works perfectly fine, I don't understand why it won't work in this project.
This is the component file:
import React from 'react';
import './Header.css'
import Navbar from 'react-bootstrap/Navbar'
import {Container} from "reactstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavLink } from 'react-router-dom';
const Navigation = () =>{
return(
<div className="header">
<Navbar bg="dark" variant="dark" expand="lg">
<Container>
<Navbar.Brand href="#home"><NavLink to="/">Home</NavLink></Navbar.Brand>
<Navbar.Brand href="#about"><NavLink to="/catallaxy">Catallaxy</NavLink></Navbar.Brand>
<Navbar.Brand href="#home"><NavLink to="/events">Events</NavLink></Navbar.Brand>
<Navbar.Brand href="#about"><NavLink to="/about">About Us</NavLink></Navbar.Brand>
<Navbar.Brand href="#contact"><NavLink to="/contact">Gallery</NavLink></Navbar.Brand>
</Container>
</Navbar>
</div>
)
}
export default Navigation;
I wanted to put this as a comment, as it is a simple and quick solution, but code cannot be formatted there.
import React from 'react';
import './Header.css'
import {Container, Navbar } from "reactstrap"; //this line here is the solution.
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavLink } from 'react-router-dom';
and your package.json should have reactstrap like this.
"dependencies": {
"classnames": "2.2.6",
"moment": "2.26.0",
"node-sass": "4.14.1",
"nouislider": "14.5.0",
"react": "16.13.1",
"react-bootstrap-switch": "15.5.3",
"react-datetime": "2.16.3",
"react-dom": "16.13.1",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"react-scripts": "3.4.1",
"reactstrap": "8.4.1". <------- here
}
this is what usually works. here is a reference link of a working navbar - https://github.com/Jay-study-nildana/RandomStuffReactJSApp/blob/master/src/components/Navbars/IndexNavbar.js
react-bootstrap and reactstrap are almost same things and they provide same components.
Just use one of them and import both Navbar and Container.
import {Container, Navbar} from "react-bootstrap"
I was facing same issue
Solution:
import { Container, Navbar } from "react-bootstrap";
Note: Make sure you already installed the below package:
npm i --save react-bootstrap
Result:
npm i --save react-bootstrap
I am facing error in installing this package
I'm new to React JS and I'm trying to add font-awesome into my project. I have installed Node.js and npm. I have also included the following packages:
$ npm i --save #fortawesome/fontawesome-svg-core
$ npm i --save #fortawesome/free-solid-svg-icons
$ npm i --save #fortawesome/react-fontawesome
Now, what should I do in index.js to be able to access all fonts and icons from these packages? I have checked multiple sources and information differs from site to site. Could you please explain how it's done and what should be written after "import" at the top of the file.
Also you can import all free font awesome icons with fas and fab prefixes in this way.
At first you need to install these packages.
npm i -S #fortawesome/fontawesome-svg-core #fortawesome/free-brands-svg-icons #fortawesome/free-solid-svg-icons #fortawesome/react-fontawesome
And then add fas and fab prefixes from FA lib to your root file
import { library } from "#fortawesome/fontawesome-svg-core";
import { fas } from "#fortawesome/free-solid-svg-icons";
import { fab } from "#fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
library.add(fas, fab);
const App = () => {
return (
<div>
<!-- Icon of fas prefix -->
<FontAwesomeIcon icon="home" />
<!-- Icon of fab prefix -->
<FontAwesomeIcon icon={['fab', 'google']} />
</div>
);
};
export default App;
First, make sure your package.json has font-awesome. If it does
not use npm i font-awesome to install it.
Second, You need to import the fonts that are in css folder of
font-awesome. Add the line to your index.js file.
import "../node_modules/font-awesome/css/font-awesome.min.css";
That information is inside the docs, here is the extract for imports
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
const element = <FontAwesomeIcon icon={faCoffee} />
ReactDOM.render(element, document.body)
https://github.com/FortAwesome/react-fontawesome#explicit-import
Just stop the node application, install babel-loader finally run npm start. That should solve your problem.
Great Source to the point.
https://www.digitalocean.com/community/tutorials/how-to-use-font-awesome-5-with-react
import React from "react";
import { render } from "react-dom";
// get our fontawesome imports
import { faHome } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
// create our App
const App = () => (
<div>
<FontAwesomeIcon icon={faHome} />
</div>
);
// render to #root
render(<App />, document.getElementById("root"));
import { library } from '#fortawesome/fontawesome-svg-core';
import { faCopy, faQuestionCircle, faQrcode, faGithub } from '#fortawesome/free-solid-svg-icons';
import AddressList from './components/AddressList';
library.add(faCopy, faQuestionCircle, faQrcode, faGithub);
I have this code to import fontawesome icons in App.js in react. I am using the free version.
I get this error:
Failed to compile.
./src/App.js Attempted import error: 'faGithub' is not exported from
'#fortawesome/free-solid-svg-icons'.
Now all I can try to understand is that the free version does not have a github icon perhaps? However on their website.
That is filtering for free and github. I see it there now why am I such a noob?
"#fortawesome/fontawesome-svg-core": "^1.2.6",
"#fortawesome/free-solid-svg-icons": "^5.4.1",
"#fortawesome/react-fontawesome": "^0.1.3",
^ my package.json
Another quick question, where does font awesome even live in the file tree? I can't find it anywhere.
Hey so I just ran into the same issue and it drove me nuts for the past hour or so haha. Basically, they've split all the font awesome icons into their own "packages" or something. I think there are four catagories as seen on their website in the side bar when you click on the 'icons' tab. They are Solid, Regular, Light, and Brands.
For the GitHub icon, it is in the brands package so all you need to do in order to fix it is install the brand package with yarn or npm and import it.
$ yarn add #fortawesome/free-brands-svg-icons
Then in the .js component you want to add your icons
import React, { Component } from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCoffee } from '#fortawesome/free-solid-svg-icons';
import { faGithub } from '#fortawesome/free-brands-svg-icons'
class Main extends Component {
render(){
return(
<div className="main">
<h2> Hello Main! </h2>
<FontAwesomeIcon icon={faCoffee} />
<FontAwesomeIcon icon={faGithub} />
</div>
);
}
};
here I included both the coffee icon and the github icon to show two different icons.
This leads me to believe that the following should work for any of the icons in Font Awesome...
yarn add #fortawesome/free-[ICON PACKAGE]-svg-icons
and then
import { [ICON NAME] } from '#fortawesome/free-[ICON PACKAGE]-svg-icons';
but I'm not entirely sure. Anyway, hope this helped!
Cheers!
UPDATE:
For anyone who might stumble upon this similar issue in the future, I would actually suggest using the react-icons npm package. It contains large a package of popular icon sources (including FontAwesome) and also features only importing what you need. You can check it out at https://react-icons.netlify.com/#/
run this command and import:
npm i --save #fortawesome/free-brands-svg-icons or yarn add --save #fortawesome/free-brands-svg-icons;
import { faGithub } from '#fortawesome/free-brands-svg-icons';
import { faCopy, faQuestionCircle, faQrcode } from '#fortawesome/free-solid-svg-icons';
[NB]: socials icons are named brand icons, so all social icons would be import from free-brands-svg-icons and others would import from free-solid-svg-icons