React failed to compile

1

image
image992Ă—350 8.27 KB

heres home page

import React from "react";
import "./Home.css"
import { useState } from "react";
import { BsArrowRight } from "react-icons/bs";
import Fade from "react-reveal/Fade";
import Product from "./Product";




function Home() {
  const images = [
    "/assets/silver-closed.png"
  ];

  const [product, setProduct] = React.useState(0);

  

  return (
    <div className="fuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuck">
      <div>
      <div>
        <div className="the">
          <Fade left delay={1050}>
            <div className="carousel-wrapper">
              <span id="item-1"></span>
              <span id="item-2">
                <a href="#sectionid1"></a>
              </span>
              <span id="item-3">
                <a href="#sectionid1"></a>
              </span>
              <div className="carousel-item item-1">
                <a className="arrow arrow-prev" href="#item-3"></a>
                <a className="arrow arrow-next" href="#item-2"></a>
              </div>

              <div className="carousel-item item-2">
                <a className="arrow arrow-prev" href="#item-1"></a>
                <a className="arrow arrow-next" href="#item-3"></a>
              </div>

              <div className="carousel-item item-3">
                <a className="arrow arrow-prev" href="#item-2"></a>
                <a className="arrow arrow-next" href="#item-1"></a>
              </div>
            </div>
          </Fade>

          <Fade top delay={2050}>
            <p id="main-price">$24.99 </p>
            <p id="main-discounted">$40.99</p>
            <div id="buynow1">
              <a href="/">Buy now</a>
            </div>
          </Fade>
        </div>

        <div className="second-section">
          <img
            data-aos="fade-down"
            id="backgroundedsilver"
            src="/assets/silver-backgrounded.png"
            alt=""
          />

          <p id="description">
            With our <b>miracolous product</b> you will live the premium feel of
            it and it will <b>charge your phone fast</b>, it's{"fucked up"}
            <b>sleek and minimalistic</b> design will look really nice on your
            car.
          </p>

          <p id="formore">
            {" "}
            <a href="./productpage">
              For more information <BsArrowRight />
            </a>
          </p>
        </div>

        <div id="sectionid1" datatype="section1data" className="section1">
          <h1 id="headh1">Wireless Phone Charger</h1>

          
            
                  <div id="fuckyou">

                  <div className="helo">
                      {images.map((img, i) => (
                        <img key={i} onClick={() => setProduct(i)} src={img} alt="product" />
                      ))}
                </div>
                {product === 0 ? (
                  <div className="product-details">
                  <Product
                    title="Gold-charger"
                    price={24.99}
                    rating={5}
                    image="/assets/gold-closed.png"
                    discount={40.99}
                  />
                </div>
                ) : (
                  <div className="product-details">
              <Product
                title="Silver-charger"
                price={24.99}
                rating={5}
                image="/assets/silver-closed.png"
                discount={40.99}
              />
            </div>
                )}

                  </div>

            
        </div>

        <div className="transparent">
          <p>transparent</p>
        </div>
      </div>

      <div className="extender">
        <footer>
          <h1 id="II">Ä°mportant Ä°nformation</h1>
          <p id="pp">Privacy Policy</p>
          <p id="tof">Terms of Service</p>
          <p id="sp">Shipping Policy</p>
          <p id="rp">Refund Policy</p>
          <h1 id="MS">Menu Shortcuts</h1>
          <p id="copyright">Copyright ®</p>
        </footer>
      </div>
    </div>
    </div>
  );
}

export default Home;

heres css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap');

*{
  color: red !important;
}

html body{
  overflow-x: hidden !important;
  overflow: hidden;
  overflow-y: scroll;
  
}

.carousel-wrapper{
    height:500px;
    position:relative;
    width:900px;
    margin:0 auto;
    max-width: 100%;
    z-index: 3;
  }
  .carousel-item{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding:25px 50px;
    opacity:0;
    transition: all 0.5s ease-in-out;
    margin-bottom: 19%;
  }
  .arrow{
    border: solid white;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 14px;
  }
  
  .arrow-prev{
    left:-30px;
    position:absolute;
    top:50%;
    transform:translateY(-50%) rotate(135deg);
  }
   
  .arrow-next{
      right:-30px;
    position:absolute;
    top:50%;
    transform:translateY(-50%) rotate(-45deg);
    }
  
  .light{
    color:white;
  }
  
 
  
  /*Select every element*/
  [id^="item"] {
      display: none;
    }
  
  .item-1 {
      z-index: 2;
      opacity: 1;
    background:url('/assets/gold-closed.png');
    background-size: 90%;
    background-repeat: no-repeat;
    align-items: center;
    background-position: center;
    justify-content: center;
    transition-duration: 500ms;
    }

    .item-1:hover{
      background-image: url(/assets/gold-open.png);
    }

  .item-2{
    background:url('/assets/silver-closed.png');
    background-size: 90%;
    background-repeat: no-repeat;
    align-items: center;
    background-position: center;
    justify-content: center;
    transition-duration: 500ms;
  }

  .item-2:hover{
    background-image: url(/assets/silver-open.png);
  }

  
  
  *:target ~ .item-1 {
      opacity: 0;
    }
  
  #item-1:target ~ .item-1 {
      opacity: 1;
    }
  
  #item-2:target ~ .item-2, #item-3:target ~ .item-1 {
      z-index: 3;
      opacity: 1;
    }

    .section1{
      background-color: white;
      height: 116vh;
      width: 100%;
      max-width: 100%;
      position: absolute;
      z-index: 1;
      top: 100%;
    }

    #silverr{
      visibility: hidden;
    }

    

    #goldd{
      visibility: visible;
    }

    @media only screen and (max-width: 720px) {
      body {
        overflow-x: hidden;
      }

     .p1 img{
       width: 200px;
     }

      #the{
        height: 100vh;
      }

      #backgroundedsilver{
          max-width: 100%;
        top: 10%;
        width: 100vw;
        object-fit: fill;
        align-self: center;
        position: absolute;

      }

      #withdiscount{
        font-size: 20px;
        font-weight: bold;
        position: absolute;
        top: 67%;
        z-index: 5;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      #withoutdiscount{
        font-size: 20px;
        color: gray;
        font-family: crimson;
        text-decoration-line: line-through;
        position: absolute;
        z-index: 4;
        top: 67%;
        left: 70%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      .carousel-wrapper{
        width: 70vw;
        position: absolute;
        top: 15%;
        left: 15%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      #headh1{
        font-size: 4vh;
        font-weight: 300;
        writing-mode: horizontal-tb;
        font-family: Karla;
        position: absolute;
        top: 57%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 7;
      }

      #color-gold{
      width: 70vw;
      }

      .arrow{
        padding: 12px;
      }

      #stars{
        z-index: 600;
        width: 100px;
        position: absolute;
        top: 63%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      #commentnum{
        color: black;
        font-family: montserrat;
        position: absolute;
        top: 63%;
        left: 68%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 2.5vh;
      }

      .pro-img{
        width: 70vw;
        position: absolute;
        top: 27%;
        left: 52%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      .thumb-img{
        position: absolute;
        top: 74%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      

      #secondh1{
        text-align: center;
      }

      #step-1{
        width: 200px;
        position: absolute;
        top: 25%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        
      }
      #step-2{
       width: 200px;
       position: absolute;
        top: 58%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }
     #step-3{
       width: 200px;
       position: absolute;
        top: 78%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }

     #description{
       z-index: 5000;
       position: absolute;
       width: 300px;
       font-size: 26px;
       top: 73%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }

     #formore{
       position: absolute;
       top: 93%;
        left: 50%;
        width: 300px;
        color: goldenrod;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 400000000;
        font-size: 26px;
     }

     #formore a{
       text-decoration: none;
       color: goldenrod;
       font-size: 26px;
       position: relative;
       top: 5px;
       margin-left: 10px;
     }

     #buynow1{
       position: absolute;
       top: 85%;
        left: 22%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: white;
        font-family: montserrat;
        
        text-align: center;        
        width: 50vw;
        padding-top: 15px;
        height: 40px;
        border: 1px solid white;
        text-decoration: none;
     }

     #buynow1 a{
       text-decoration: none;
       color: white;
     }

     #main-price{
       color: white;
       font-family: montserrat;
       position: absolute;
      font-size: 3vh;
      top: 78%;
        left: 38%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }

     #main-discounted{
      font-size: 3vh;
      color: gray;
      font-family: crimson;
      text-decoration-line: line-through;
      position: absolute;
      z-index: 4;
      top: 78%;
      left: 60%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
     }

     .comments{
      background-color: white;
      height: 110vh;
      width: 100%;
      position: absolute;
      z-index: 1;
      top: 316%;
     }

     #writeacom{
       width: 170px;
       padding-top: 15px;
       padding-bottom: 15px; 
       text-decoration: none;
       background-color: #545454;
       color: white;
       position: absolute;
      top: 14%;
      left: 70%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
      border-radius: 10px;
      font-family: montserrat;
     }

     #commenth1{
       margin-left: 5%;
       font-family: montserrat;
     }

     #starrate{
       font-family: montserrat;
       font-size: 4vh;
       margin-top: 10%;
       margin-left: 5%;
       color: white;
       text-align: center;
       width: 20%;
       height: 10%;
       background-color: #ffcc66;
       border-radius: 10px;
     }
     #starrate p{
      padding-top: 20px;
    }

    #commentp{
      font-family: montserrat;
      color: gray;
      margin-left: 5vw;
      margin-top: 2vh;
    }

    footer{
      background-color: #eeab24;
      color: white;
      width: 100%;
      height: 500%;
      position: absolute;
      top: 900%;
      margin: 0;
      left: 0%;
      z-index: 600000000000;
      text-align: center;
      font-family: montserrat;
      overflow: hidden;
    }

    #II{
      font-family: montserrat;
      font-size: 8vw;
      position: absolute;
        top: 10%;
        left: 45%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 200px;
    }

    #pp{
      font-family: montserrat;
      font-size: 7vw;
      position: absolute;
        top: 20%;
        left: 27%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #tof{
      font-family: montserrat;
      font-size: 7vw;
      position: absolute;
        top: 30%;
        left: 28%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #rp{
      font-family: montserrat;
      font-size: 7vw;
      position: absolute;
        top: 40%;
        left: 25%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #sp{
      font-family: montserrat;
      font-size: 7vw;
      position: absolute;
        top: 50%;
        left: 27%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #MS{
      font-family: montserrat;
      font-size: 8vw;
      position: absolute;
        top: 65%;
        left: 35%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #footertxt1{
      padding-top: 20px;
    }

    #copyright{
      padding-top: 1000px;
      color: white;
    }

    .transparent{
      background-color: transparent;
      height: 10vh;
      opacity: 6;
      z-index: 59;
      color: white;
      position: absolute;
      top: 346%;
      width: 100%;
      max-width: 100%;
    }

    .transparent p{
      visibility: hidden;
    }

    .the{
      z-index: 6000000000000;
    }

    .extender{
      position: absolute;
      top: 30vh;
      height: 30vh;
      width: 100%;
    }

    

    .product__rating img{
      width: 20px;
    }

    .product__rating{
      position: absolute;
      top: 49%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    

    .product__price{
      position: absolute;
      top: 64%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-family: montserrat;
        font-size: 120%;
    }

    .helo img{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      width: 10%;
      margin-bottom: 2rem;
    }

    .product-details{
      color: yellow;
      font-size: 65vh;
      width: 10px;
      background-color: black;
    }

    

    .fuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuck {
      height: 10000000000000000000vh;
      background-color: red;
      z-index: 65000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000;
    }

    .product__discount{
      position: absolute;
      top: 64%;
        left: 67%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-family: montserrat;
        font-size: 120%;
        color: gray;
        text-decoration: line-through;
    }

    .product__title{
      visibility: hidden;
    }

    .buynow{
      border: none;
      background-color: black;
      color: white;
      width: 46vh;
      height: 50px;
      font-family: montserrat;
      font-size: 5vw;
      position: absolute;
      top: 82%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .addtobasket{
      border: 2px solid black;
      background-color: white;
      width: 46vh;
      height: 50px;
      font-family: montserrat;
      font-size: 5vw;
      position: absolute;
      top: 90%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 300;
    }
    }

      
    
    @media only screen and (min-width: 768px) {
      body {
        overflow-x: hidden;
      }

      #backgroundedsilver{
          max-width: 100%;
        
        width: 100vw;
        object-fit: fill;
        align-self: center;
        position: absolute;

      }

      #withdiscount{
        font-size: 20px;
        font-weight: bold;
        position: absolute;
        top: 70%;
        z-index: 5;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      #withoutdiscount{
        font-size: 20px;
        color: gray;
        font-family: crimson;
        text-decoration-line: line-through;
        position: absolute;
        z-index: 4;
        top: 70%;
        left: 70%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      .carousel-wrapper{
        width: 70vw;
        position: absolute;
        top: 55%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      #headh1{
        font-size: 4vh;
        font-weight: 300;
        writing-mode: horizontal-tb;
        font-family: Karla;
        position: absolute;
        top: 57%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 7;
      }

      #color-gold{
      width: 70vw;
      }

      .arrow{
        padding: 12px;
      }

      .pro-img{
        width: 80vw;
        position: absolute;
        top: 37%;
        left: 52%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      .thumb-img{
        position: absolute;
        top: 78%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 3;
      }

      

      #secondh1{
        text-align: center;
      }

      #step-1{
        width: 200px;
        position: absolute;
        top: 25%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        
      }
      #step-2{
       width: 200px;
       position: absolute;
        top: 58%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }
     #step-3{
       width: 200px;
       position: absolute;
        top: 78%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
     }

    }

   


    #headh1{
      justify-content: center;
      text-align: center;
      position: absolute;
      top: 55%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    
    

     .second-section{
      background-color: white;
      height: 120vh;
      width: 100%;
      position: absolute;
      z-index: 1;
      top: 216%;
     }

     #choosecolor{
       position: absolute;
       top: 70%;
        left: 20%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 500;
        font-weight: bolder;
        font-family: montserrat;
        font-size: 4vh;
     }
     

     .carousel-wrapper{
      width: 70vw;
      position: absolute;
      top: 10%;
      left: 14%;

      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 3;
    }

    .arrow{
      border: solid white;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 8px;
    }
2

im starting to hate reactjs it gives error all the time pls help.

./src/Home.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/Home.css)
Error: Can't resolve '/assets/gold-closed.png' in 'C:\Users\efe\Desktop\SelfieLight\selfie-light\src'
3

Hello there,

In order for us to assist, I think you will need to provide a lot more information.

  • What are you using?
  • Where are you seeing this error?
  • What are you trying to do?

Ideally, a link to your project hosted on something like CodeSandbox, Repl.it, or Glitch would aide us in understanding your stack and issue.

So, please provide more information - as much as is necessary.

Thanks

4

This is not surprising, because you have insane levels of complexity in the thing you’re trying to do. This isn’t a React issue: it’s that you are just adding tools and dependencies willy-nilly. This will happen regardless of what library, framework or programming language you are using.

Start. Very. Simple. And. Build. Up. The. Complexity. In. A. Controlled. Manner.

It is really easy to not plan, just try to build everything at once, and just try to plug every gap with libraries. However, that will make the thing you are doing almost impossible to understand. It’s what most people do when inexperienced, it is a learning process.

As far as I can see, you don’t quite get some significant basics of the React library (or I think of specific build tools, which is something completely different). To take one of your earlier examples: why are you including jQuery and trying to use it to modify CSS classes? You need to understand the basics, this is really important, you can’t just plug knowledge gaps by installing more and more stuff.

As a concrete example that I think is to do with what you’ve posted here (which I’m guessing at, because you don’t really provide any context):

Does the application work fully and properly (as you expect it to) without icon libraries and asset plugins for the build tools? Those things should not be at all necessary for the application to work. You can use text or placeholders until you’ve made sure everything actually important works, you don’t need to install anything

1 Like
5

I have merged your threads.

Please do not create duplicate threads for the same question, thank you.

6

do you have an answer for that error.

7

It would really help to have a live version of this code.

I might be wrong, but the way you have the paths to the images might not work. Are they in the public folder? Maybe try importing the images, add them to the array, and use them as such for the src on the images.

8

@oguzhanefe32,
Just place your assets folder inside the src folder and use this

background: url('./assets/gold-closed.png');

it will solve your current issue, but I found, you’ll face another issue, because you’re not using quote mark to other part of the css for background-image . Also fix that, it will work.

Remember, this is just a plain solution to use your images as per your given error. When, you’ll start to love react, you’ll find more solutions to the current error for other reasons to use those solutions.