I have this component I wrote for reviews using swiperjs in a react and nextjs project but I have been getting an error with seems to be coming from this reviews component saying Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'includes')
I can't figure out why but when I comment out all the code in that component, everything seems to work fine. I have also tried upgrading swiper in package.json and also tried downgrading react but the error will not go away. Please help me figure out what I could be doing wrong using the code below
components/Reviews.jsx
import React, { useRef, useState, useEffect } from 'react'
import {ReviewForm} from '../components'
import { FaFacebookSquare, FaGithubSquare, FaTwitterSquare, FaInstagramSquare, FaYoutubeSquare } from 'react-icons/fa'
import {MdOutlineArrowForward} from 'react-icons/md'
import { getReviews } from '../services'
import { Swiper, SwiperSlide } from "swiper/react";
import moment from 'moment'
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
// import required modules
import { Pagination, Navigation } from "swiper";
const Reviews = () => {
const [reviews, setReviews] = useState([]);
useEffect(() => {
getReviews()
.then((newReviews) => setReviews(newReviews))
}, [])
return (
<div className='reviewsBgBlack'>
<div><h4 className="font-normal py-5 tracking-wide lg:text-5xl md:text-3xl text-center text-[#D72A06]">CLIENTS REVIEWS <span className='text-white'>ABOUT <br />THE QUALITY OF OUR WORK</span></h4></div>
<Swiper
slidesPerView={1}
slidesPerGroup={1}
spaceBetween={10}
loop={false}
loopFillGroupWithBlank={true}
pagination={{
clickable: true,
}}
breakpoints={{
640:{
slidesPerView:2,
spaceBetween:10
},
768:{
slidesPerView:3,
spaceBetween:20
},
1024:{
slidesPerView:3,
spaceBetween:30
}
}}
navigation={true}
modules={[Pagination, Navigation]}
className="mySwiper"
>
{reviews.map((review) => (
<div key={review.name}>
<div className="reviewsContainer">
<div className="content">
<SwiperSlide><div className="reviewCard">
<div className="reviewCard-content">
<div className="image">
<img src="/logo.png" alt="" />
</div>
<div className='media-icons'>
<i><a href={`https://www.instagram.com/${review.instagram}`}><FaInstagramSquare /></a></i>
<i><a href={`https://www.twitter.com/${review.twitter}`}><FaTwitterSquare /></a></i>
<i><a href={`https://www.facebook.com/${review.facebook}`}><FaFacebookSquare /></a></i>
</div>
<div className="name-profession">
<span className="name">{review.name}</span>
<span className='profession font-semibold'>{review.profession}</span>
<p className="text-gray-400 mb-2 font-semibold text-xs">{moment(review.createdAt).format('MMM DD, YYYY')}</p>
<span className="profession">{review.testimonial}</span>
</div>
<div className={`button ${review.casestudy ? `visible` : `hidden`}`}>
<button>view case study<span><MdOutlineArrowForward className='mt-1 text-lg ml-2'/></span></button>
</div>
</div>
</div>
</SwiperSlide>
</div>
</div>
</div>
))}
</Swiper>
<ReviewForm />
</div>
)
}
export default Reviews
console error
next-dev.js?3515:20 The above error occurred in the <Swiper> component:
at eval (webpack-internal:///./node_modules/swiper/react/swiper.js:43:98)
at div
at Reviews (webpack-internal:///./sections/Reviews.jsx:38:62)
at div
at div
at Home (webpack-internal:///./pages/index.jsx:29:23)
at Layout (webpack-internal:///./components/Layout.jsx:11:26)
at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/#react-aria/ssr/dist/module.js:23:64)
at MyApp (webpack-internal:///./pages/_app.tsx:24:27)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/#next/react-dev-overlay/dist/client.js:8:20742)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/#next/react-dev-overlay/dist/client.js:8:23635)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:215:26)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:406:27)
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
in NEXT-JS maybe
reactStrictMode: false
will solve your problem
Looks like there is a bug in version 8.4
https://github.com/nolimits4web/swiper/issues/6063
Related
I am doing a React App and trying to make a image slider.
I am working in replit.com and in the React App the JS won't work. When I made it in a simple Repl (HTML, CSS and Vanilla.js only) works perfectly.
When I try to do a query select and console log the ul with the className="carousel-track" prop out I get null so it breaks it all.
Carousel component:
import React from 'react';
import Slide from "./Slide";
import Dot from "./Dot"
import "../css/carousel.scss";
// import "../js/carousel.js"
export default function Carousel(props) {
const { players } = props;
const allSlides = players.map(player => {
return <Slide
key={player.key}
name={player.name}
team={player.team}
img={player.img}
/>
});
const allDots = players.map(player => {
return <Dot key={players.indexOf(player)}/>
})
return (
<div className="carousel">
<button className="carousel-btn btn-left">
<i className="fa-solid fa-paper-plane"></i>
</button>
<div className="carousel-track-container">
<ul className="carousel-track">
{allSlides}
</ul>
</div>
<button className="carousel-btn btn-right">
<i className="fa-solid fa-paper-plane"></i>
</button>
<div className="carousel-nav">
{allDots}
</div>
</div>
)
}
And the logic is exactly the same with the one that you can see in the Sources Inspect tab at this link.
If I uncomment that import "../js/carousel" it breaks and nothing is rendered in the page
I'm building a website by react and my local image doesn't display. I use props to pass the properties from Cards.js to CardItem.js then every properties display except image. I don't know what is a problem with my code :(
Here is Cards.js:
import React from 'react'
import CardItem from './CardItem'
import './Cards.css'
function Cards() {
return (
<div className="cards">
<h1>Check out these EPIC Destinations!</h1>
<div className="cards-container">
<div className="cards-wrapper">
<ul className="cards-items">
<CardItem
src='../assets/images/img-9.jpg'
text='Explore the hidden waterfall deep inside the Amazon Jungle'
label='Adventure'
path='/sevices'
/>
</ul>
</div>
</div>
</div>
)
}
export default Cards
CardItem.js:
import React from 'react'
import { Link } from 'react-router-dom'
function CardItem(props) {
return (
<>
<li className="cards-item">
<Link className="cards-item-link" to={props.path}>
<figure className="cards-item-pic-wrap" data-category={props.label}>
<img src={props.src} alt="Travel Img" className="cards-item-img" />
</figure>
<div className="cards-item-info">
<h5 className="cards-item-text">{props.text}</h5>
</div>
</Link>
</li>
</>
)
}
export default CardItem
we want to import the image first
import img from './assets/images/img-9.jpg';
We named image as img use it in your code.
import React from 'react'
import CardItem from './CardItem'
import './Cards.css'
import img from './assets/images/img-9.jpg';
function Cards() {
return (
<div className="cards">
<h1>Check out these EPIC Destinations!</h1>
<div className="cards-container">
<div className="cards-wrapper">
<ul className="cards-items">
<CardItem
src={img}
text='Explore the hidden waterfall deep inside the Amazon Jungle'
label='Adventure'
path='/sevices'
/>
</ul>
</div>
</div>
</div>
)
}
export default Cards
first import image
import img from '../assets/images/img-9.jpg'
then use it
<CardItem src={img} .../>
I hope this helps you, resources https://create-react-app.dev/docs/using-the-public-folder/:
for Cards.js file:
...
<CardItem
src='/images/img-9.jpg'
text='Explore the hidden waterfall deep inside the Amazon Jungle'
label='Adventure'
path='/services'
/>
And...
for CardItem.js file:
...
<img
className='cards__item__img'
alt='Travel'
src={process.env.PUBLIC_URL + props.src}
/>
I am trying to add links to my font-awesome react component.
<div>
<FontAwesomeIcon icon={faHome} size="2x" />
<div>
The component above renders the faHome icon.
But when I add anchor tag around it, it does not render. I can still see that the component in inspector tools with <svg> tag also loaded the same way when I didn't have anchor tag in the first example.
<div>
<a href="https://www.youtube.com/c/jamesqquick">
<FontAwesomeIcon icon={faHome} size="2x" />
</a>
</div>
it is working perfectly. Please check the below code:
import React from "react";
import "./styles.css";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faHome } from "#fortawesome/free-solid-svg-icons";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div>
<a href="https://www.youtube.com/">
<FontAwesomeIcon icon={faHome} size="2x" />
</a>
</div>
</div>
);
}
Here is the Code Sandbox
Here is output
I have create the app using create-react-app. Then I installed the react-table package(using command npm install --save react-table). When I started my application I am getting Module not found: Can't resolve 'react-table/react-table.css' this error.
Any suggestion how to resolve this. Thanks in advance !
You should install react-table version-6.
$ npm install react-table-6
and then import these,
import ReactTable from "react-table-6";
import "react-table-6/react-table.css"
Sadly react-table v7 doesn't support react-table.css file.
If you want to reuse react-table.css, I recommend using v6.
Here goes my example:
https://codesandbox.io/s/react-table-custom-pagination-1onbd
We can easily create custom css for react-table and there is a lot of examples online.
The current version of react-table is 7.
React table 6th version supports the cs,
You should install react-table version-6.
$ npm install react-table-6
next import it in file
import ReactTable from "react-table-6";
import "react-table-6/react-table.css"
**Sample Code**
import React, {useState, useEffect,Component } from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import $ from 'jquery';
import './Markettable.css';
import 'datatables.net';
import 'datatables.net-dt/css/jquery.dataTables.css';
import axios from 'axios';
import ReactTable from "react-table-6";
import "react-table-6/react-table.css" ;
export default class Markettable extends Component {
constructor(props){
super(props)
this.state = {
market: [],
loading:true
}
}
async getMarketPrice(){
const res = await axios.get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&sparkline=false&price_change_percentage=1h%2C24h%2C7d`)
console.log(res.data)
this.setState({loading:false, market: res.data})
}
componentDidMount(){
this.getMarketPrice()
}
render() {
const columns = [{
Header: 'ID',
accessor: 'name',
sortable: true,
}
,{
Header: 'Name',
accessor: 'precentage' ,
},
{
Header: 'Website',
accessor: 'market_cap',
}
]
return (
<>
<div className= "container-fluid">
<div className="header">
<h2 className= "page-header text-center text-uppercase">
<b> Marketing Prices </b>
</h2>
<ul className="breadcrumb ">
<li><a href="#" style={{color: 'black'}}>Home</a></li>
<li className="active" style={{color: ' #660000'}}>Marketing Price</li>
</ul>
</div>
<div className ="row">
<div className = "col-12">
<div className="card">
<div className="card-action">
<div className="marketprice">
<div className="row">
<div className ="col-12">
<div className ="card">
<div className="card-body">
<h2> <b> <u> MARKETING PRICE TABLE </u> </b> </h2>
</div>
<br/>
<div className="card-body--">
<ReactTable className ="text-center"
data={this.state.market}
columns={columns}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}
}
import ReactTable from "react-table-6";
This one should be "react-table-v6"
import "react-table-v6/react-table.css"
I am using react reveal and doing an image slide up transition but the image is not showing, I have given the code below as well as the output image. I have added a picture which shows whats happening. the link in the picture was supposed to be an image but it's showing just Link
import React from 'react';
import { Link } from 'react-router-dom';
import Reveal from 'react-reveal';
import 'animate.css/animate.css';
const generateBlocks = ({blocks}) =>{
if(blocks){
return blocks.map((item)=>{
const styles = {
background:`url('/images/blocks/${item.image}') no-repeat `
}
return(
<Reveal key={item.id} effect="animated fadeInUp"
className={`item ${item.type}`}>
<div className="veil"></div>
<div
className="image"
style={styles} >
</div>
<div className="title">
<Link to={item.link}>{item.title}</Link>
</div>
</Reveal>
)
})
}
}
const Blocks = (props) =>{
return(
<div className ="home_blocks">
{generateBlocks(props)}
</div>
)
}
export default Blocks;][1]
Heve you tried to import the right component from Reveal:
import Reveal from 'react-reveal/Reveal';
Have a look into the Documentation: https://www.react-reveal.com/examples/common/custom/