Compilation issue with version 2.1.1

[19peytonsmith]

Hey! I am using your carousel in my personal project and tried to incorporate the changes you made in the latest release and as I was trying to compile my project I get a runtime error:

I've also attached the compilation messages associated to show what I'm dealing with.

For context, this works on your previous version (1.5.0) but is now broken with your latest version

zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/components/Arrows/Arrows.tsx' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/components/Arrows/Arrows.tsx'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/components/Carousel/Carousel.tsx' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/components/Carousel/Carousel.tsx'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/components/Indicators/Indicators.tsx' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/components/Indicators/Indicators.tsx'   
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/components/Status/Status.tsx' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/components/Status/Status.tsx'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/hooks/useSwipe.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/hooks/useSwipe.ts'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/utils/getCarouselIndex.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/utils/getCarouselIndex.ts'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/utils/getCarouselStyle.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/utils/getCarouselStyle.ts'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/utils/setCarouselStyle.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/utils/setCarouselStyle.ts'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | Search for the keywords to learn more about each warning.
zillowguessr-frontend-1  | To ignore, add // eslint-disable-next-line to the line before.
zillowguessr-frontend-1  |
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | WARNING in ./node_modules/react-responsive-3d-carousel/lib/esm/index.js
zillowguessr-frontend-1  | Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):    
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/components/Arrows/Arrows.tsx' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/components/Arrows/Arrows.tsx'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | WARNING in ./node_modules/react-responsive-3d-carousel/lib/esm/index.js
zillowguessr-frontend-1  | Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):    
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/components/Carousel/Carousel.tsx' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/components/Carousel/Carousel.tsx'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | WARNING in ./node_modules/react-responsive-3d-carousel/lib/esm/index.js
zillowguessr-frontend-1  | Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):    
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/components/Indicators/Indicators.tsx' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/components/Indicators/Indicators.tsx'   
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | WARNING in ./node_modules/react-responsive-3d-carousel/lib/esm/index.js
zillowguessr-frontend-1  | Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):    
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/components/Status/Status.tsx' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/components/Status/Status.tsx'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | WARNING in ./node_modules/react-responsive-3d-carousel/lib/esm/index.js
zillowguessr-frontend-1  | Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):    
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/hooks/useSwipe.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/hooks/useSwipe.ts'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | WARNING in ./node_modules/react-responsive-3d-carousel/lib/esm/index.js
zillowguessr-frontend-1  | Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):    
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/utils/getCarouselIndex.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/utils/getCarouselIndex.ts'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | WARNING in ./node_modules/react-responsive-3d-carousel/lib/esm/index.js
zillowguessr-frontend-1  | Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):    
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/utils/getCarouselStyle.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/utils/getCarouselStyle.ts'
zillowguessr-frontend-1  |
zillowguessr-frontend-1  | WARNING in ./node_modules/react-responsive-3d-carousel/lib/esm/index.js
zillowguessr-frontend-1  | Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):    
zillowguessr-frontend-1  | Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/utils/setCarouselStyle.ts' file: Error: ENOENT: no such file or directory, open '/app/node_modules/react-responsive-3d-carousel/src/utils/setCarouselStyle.ts'

[Byongho96]

Could you check if the carousel items are being passed down using the items array? In version 1, carousel items were directly passed as children, but starting from version 2, they need to be passed using the items prop.

Please refer to the code below.

import React from 'react'
import { Carousel } from 'react-responsive-3d-carousel'
import 'react-responsive-3d-carousel/dist/styles.css'

const items = [
  <img src="image1.jpg" alt="image1" />,
  <video src="video1.mp4" autoPlay />,
  <div>Custom Content 1</div>,
]

function App() {
  return (
    <div className="App">
      <Carousel
        items={items}
        startIndex={0}
        onChange={(currentIndex) => console.log(currentIndex)}
      />
    </div>
  )
}

export default App

[19peytonsmith]

I just changed it to use the items prop and I am still getting the same error, here's my code:

// src/PropertyCarousel.js
import React, { useState, useEffect } from 'react';
import { Carousel } from 'react-responsive-3d-carousel';

const PropertyCarousel = ({ urls, startIndex }) => {
    const [selectedImage, setSelectedImage] = useState(null);
    const [curIndex, setCurIndex] = useState(startIndex)
    const handleClickCenteredItem = (index) => {
        // TODO: Want to find a library that I can use to make this image full screen to view entirely. 
        // react-photo-view might be useful
        setSelectedImage(urls[index]);
      };
    const items = urls.map((url, index) => (
        <div key={index}>
            <img src={url} alt={index} />
        </div>
    ));
    useEffect(() => {
        setCurIndex(startIndex);
    }, [startIndex]);
    return (
        <div>
            <Carousel
            isShadow={true}
            autoPlay={false}
            showIndicators={false}
            showStatus={true}
            isStatusShadow={false}
            statusColor={'black'}
            showArrows={true}
            arrowsDefaultColor={'lightgray'}
            isArrowsShadow={false}
            spread={'wide'}
            startIndex={curIndex}
            onClickCenteredItem={handleClickCenteredItem}
            items={items}/>
        </div>
    );
};

export default PropertyCarousel;

I even tried to use your sample example and I'm still getting the same errors :(

[Byongho96]

Thanks for attaching the code! However the code you shared works well when I try it.

I suspect that the library version you are currently using might not have been properly updated. Looking at the error message you referenced earlier, the files mentioned in the error doesn’t exist in version 2 of the library. Failed to parse source map from '/app/node_modules/react-responsive-3d-carousel/src/utils/setCarouselStyle.ts'

First, check the version in your package.json file:

// package.json
{
  ...
  "dependencies": { 
    "react-responsive-3d-carousel": "^2.1.1"  // check the version
  }, 
}

If the library is correctly installed ( npm install ), the version in the node_modules folder should match as well:

// node_modules/react-responsive-3d-carousel/package.json
{
  "name": "react-responsive-3d-carousel",
  "version": "2.1.1"
}

[Byongho96]

As the library has been updated, there have been significant changes to the props API for the components. For example, props like isShadow and statusColor have been removed or renamed.
For detailed information, please refer to the documentation.

Additionally, if you want the images passed as items to perfectly fill the carousel, I recommend not wrapping them with a <div>:

const items = urls.map((url, index) => ( 
    <img key={index} src={url} alt={index} /> 
));