The configuration file for custom paging slider in react.js is nowhere to be found

I am trying to implement a custom paging slider based on the tutorial at . I followed the instructions and installed the necessary packages. However, when I attempt to run the code, I encounter the following error:

./src/Carousel.js Module not found: Can't resolve './config.js' in '/Users/mcoe/Documents/Code/my-app1/src'

Here is the code snippet:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Style from "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import Slider from 'react-slick';
import { baseUrl } from "./config.js";

export default class SimpleSlider extends React.Component {
  render() {
    const settings = {
      customPaging: function(i) {
        return (
          <a>
            <img src={`${baseUrl}"Random1${i + 1}.png`} />
          </a>
        );
      },
      dots: true,
      dotsClass: "slick-dots slick-thumb",
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2>Custom Paging</h2>
        <Slider {...settings}>
          <div>
           <img src={baseUrl + "Random1.png"} />
          </div>
          <div>
            <img src={baseUrl + "Random1.png"} />
          </div>
          <div>
            <img src={baseUrl + "Random1.png"} />
          </div>
          <div>
            <img src={baseUrl + "Random1.png"} />
          </div>
        </Slider>
      </div>
    );
  }
}

Answer №1

Seems like the component is requesting a base URL from a configuration file. The baseUrl should point to the path where your images are located. You can use a relative path, for example if the images are stored in my-app1/public/images/, you can create a config.js file in the src directory with the following content:

//config.js
export const baseUrl = 'images/';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for Showing Websocket Response On Web Browser Using Node.js

Just starting out with NodeJS and here's my code snippet: const webSocket= require('ws'); const express = require('express'); const app=express(); Var url = "wss://stream.binance.com:9443/BTCUSDT@trade`" const ws = new webS ...

How to modify an array object within a React Redux reducer

I'm trying to find a simple solution for updating the status of a post in my reducer, but I can't seem to figure it out. Here is my current reducer function: const posts = (state = null, action) => { switch(action.type){ case "PUBLISH_P ...

Using CSS, replicate the language menu found on GitHub

Is there a way to replicate GitHub's repositories language list using CSS alone? For instance, something similar to the image shown here: https://i.sstatic.net/Kd4iC.png I initially tried creating a list of div elements but I'm struggling to fi ...

TypeScript Implementation of ES6 Arrow Functions

Just diving into Typescript, I'm struggling to figure out the solution. I tried researching and looked into destructuring, but still unable to make it work. import React from "react"; import { StyleSheet, Text, View } from "react-native"; const st ...

Creating a form in PHP with the power of JavaScript, AJAX, and jQuery

I have successfully created a registration form using HTML, processed the data with PHP, and utilized javascript, ajax, and jquery. However, I am facing an issue where I want to display a notification stating whether the operation was "inserted/failed" on ...

Is there a way to transfer innerHTML to an onClick function in Typescript?

My goal is to pass the content of the Square element as innerHTML to the onClick function. I've attempted passing just i, but it always ends up being 100. Is there a way to only pass i when it matches the value going into the Square, or can the innerH ...

Troubleshooting JavaScript setInterval Problems

I'm struggling to create a stopwatch that takes input in minutes, converts it to seconds, and then decrements the seconds. I am using the 'setInterval' method for this purpose, but unfortunately, it's not working. Here is what my JavaSc ...

"Error: Failed to establish WebSocket connection" - Visual Studio Code and React Framework

Every time I start a new react project and run it on localhost:3000 using npm from either my Mac terminal or VSC terminal, I always encounter this error in my console. As a beginner in React development, I'm hoping someone can assist me in resolving t ...

Locate a specific tag within an XML document using user input and then showcase the content that is encapsulated by it utilizing Node

Could someone kindly advise on how to locate a tag name within an XML dom based on user input and then iterate through and display all content within it? For example, if the user enters 'unit', the program should display everything within the uni ...

Adjust the image size to fit the page according to its height

Having a dilemma here. I have this square image (2048x2048) that I want to set as a background. The tricky part is, I want it to display borders when the page stretches into widescreen mode, but also resize while maintaining its square shape when the page ...

Troubleshooting issues with CSS fixed and absolute positioning in Chrome

Something strange is happening on my website with the static header bar. It works perfectly everywhere except for one page and only in Chrome. The div with class "top-bar" is set to position: fixed. <header> <div class="top-bar"> & ...

Refresh a specific portion of an HTML template following a successful AJAX request

I am facing a challenge in implementing a new feature and I'm unsure of the best approach to take. In my project, I utilize Django for backend logic and templating, as well as the Google Closure JavaScript library for frontend development. Here is th ...

What is the process of directing to another HTML page within the same Express controller script?

I am looking to switch the initial page (login page) to a second page (admin dashboard) from within the same controller in Express after a specific action has been taken. Here is the relevant code snippet from my controller file nimda.js: function handle ...

Passing information from a PHP array using a JavaScript forEach loop to the URL of an AJAX request

I have a MySQL query in PHP that returns an array of order IDs, and I want to iterate through these IDs using JavaScript. The goal is to use the IDs in an AJAX call to update the dates of these orders in the database. MySQL query: <?php // SQL ...

Use jQuery to select and emphasize the following menu option

Hey there! I'm currently working on adding a new feature to my website. I want the menu items to highlight in succession when clicked. For example, if I click on people, I want it to highlight and then move on to highlight the next item in the menu, w ...

Autofill with JavaScript - Dynamic Form Population

Looking to create a form-based HTML page. The objective is to have the second input box automatically populate based on the user's input in the first input box. I've gone through various guides and tried to implement this script, but it doesn&ap ...

Different ways to display a component in ReactJS without altering the URL

For example, I am working on a blog web application that currently displays blog posts as thumbnails. When you click on a thumbnail, it takes you to the full blog post by changing the URL from /blog to /blog/{blog_id}. I am looking for a way to achieve th ...

Script to pop up cancel alert box

There's a dilemma with this code - if you click CANCEL the first time the box pops up, it continues to run. I'm unsure of how to make it redirect to the underlying page when clicked on cancel for the first time. var numero= prompt ("Enter a nu ...

Utilizing a JavaScript-sent URL within a PHP data grid: A step-by-step guide

I am working on a JavaScript function that fetches the URL of an API needed for a data grid. This API displays the students assigned to a particular teacher. The data grid must dynamically change based on the user (the teacher initiating the session), and ...

Enter data into a specific text field (similar to entering data in Selenium RC) using Selenium WebDriver

Looking for a solution: I need to input text into a focused text area that does not have a static xpath. To achieve this, I am currently using Actions actions = new Actions(driver); actions.sendKeys(textarea).perform(); However, this method is pasting th ...