Image is not defined

[michaelroevievictoria]

Hi, I try to use your component by using your basic usage

render() {

                        let data = [

                            {
                                "des": "1",
                                "imgSrc": "https://i.imgur.com/7nbAJ0C.jpg"
                            },
                            {
                                "des": "2",
                                "imgSrc": "https://i.imgur.com/pgCzueK.jpg"
                            }
                            {
                                "des": "3",
                                "imgSrc": "https://i.imgur.com/d5aiXJP.jpg"
                            },
                            {
                                "des": "4",
                                "imgSrc": "https://i.imgur.com/L75otV6.jpg"
                            },
                            {
                                "des": "5",
                                "imgSrc": "https://i.imgur.com/qkPMr9D.jpg"
                            }
                        ];

                        return  <CarouselSlider slideItems = {data} />;   

                    }

I got an Error

ReferenceError: Image is not defined /www/node_modules/react-carousel-slider/es/index.js:39:1

I hope you help me with my problem

[Carr1005]

Could you reproduce the problem on codesandbox?

[oaksupanat]

I experience this error as well, Not sure @michaelroevievictoria, did you implement React based on prerender concept or not? But what I found is my prerender process throws the following error,

The solution for me is, I only render the react-carousel-slider (CarouselSlider) when the DOM is completely MOUNTED in the client side browser. So I implemented the logic for it by setting a dummy state to be "true" in componentDidMount() and in render() method, I added the logic check to check if my dummy state is true ( it means the component is completely mount in the real browser window ), as something just like this,

{
  this.state.xxx &&
  (
    <CarouselSlider
       slideItems={officeImageSrc}
       accEle={accEleSetting}
    />
  )
}

@Carr1005 I think this error happens in the prerender process (if normal React should be fine I think) The Image is not defined error is in the following function, may be it has to be called in componentDidMount() method, and only in other methods which cannot be called outside real browser. Because new Image API is browser API, we have to limit the usage of this API within browser scope, not in the server-side scope.

_this.dragEvent = {
    startPoint: 0,
    dragging: false,
    deltaX: 0,
    thrershold: 0,
    disableDragImage: function () {
      var transparent = new Image();
      transparent.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
      return transparent;
    }()
};

[Carr1005]

@OakSupanat, thanks for the explanation and solution! It's a pity that the utilization of Image API is not related to the core functionality but it causes the problem and forces you guys need to do the workaround. I am really not sure if this is possible to improve now because its related to arguments of other native API, I mean e.dataTransfer.setDragImage. I think it needs more study. I'll try to figure out this with future refactoring, and I would really appreciate if you have any good idea to contribute!