[Bug]: Images getting blocked in Events

[gbowne1]

Describe the Bug

In the console, while navigated to /events, the images are getting CORS' blocked with a NS_BINDING_ABORTED error, in particular the ones from shutterstock. We need to implement a method for handling CORS for images people post for their event(s). We do have CORS package installed on the server.

Steps to Reproduce

Start the React development server

Go to /events or click on the Events in the SideNav

Inspect the page using the console.

Screenshots

No response

Which device are you using?

PC Desktop, x64 Core i7 3rd Gen

Which operating system are you using?

Linux x64, Debian Base

Which browser are you using?

Firefox 112

Additional Context

No response

Contribute

• [ ] I am willing to contribute and submit a pull request

[NigamDevansh]

@gbowne1 can i work on this issue.

[gbowne1]

Ok @NigamDevansh

[NigamDevansh]

@gbowne1 so the problem is, we unable to fetch the images of those events which are having shutterstock images as event image url ? please correct me if i'm wrong.

[NigamDevansh]

also when i was going through the /friends route their were two warnings:

• One was "Invalid prop children of type array supplied to Panel, expected object." which I removed by changing the propType of children in panel to ".node" from ".object" asPropTypes.object expects the children prop to be a single React element (e.g., a single JSX element or a component), not an array of elements. When you pass multiple JSX elements as children to a component, React automatically wraps them in an array.
• Second error was in friends component the children prop was `required so I just commented it out so if needed one can easily uncomment it and use it.
• Also added the image to the friends list over at card media.

[gbowne1]

@NigamDevansh

Yes, The images are not available because the images are blocked by cors.

The Friends and Panel issues are separate from this issue.

[NigamDevansh]

I have created two events one using chrome and one using firefox and both of them are being rendered properly and i have used the shutterstock images in both the events in the image url. @gbowne1 also can you tell me the issue number of the friends and the panel warnings are so that i can make the pr over their as well

[gbowne1]

@NigamDevansh I opened #275 as a new issue for this.

[gbowne1]

You should see the message NS_BINDING_ABORTED in the browser console likely the network tab when on /friends for the images. This is coming from cors.

[NigamDevansh]

can you share a screenshot of the error

[gbowne1]

@NigamDevansh

A screenshot with the Firefox 112 browser console open while navigated to /events

Look at the Network tab "Transferred" column. Even though the images resulted in a 200 GET it still responded with NS_BINDING_ABORTED.

[gbowne1]

Any ideas @manuel12 ?

[gbowne1]

Unassigning since the last was in July '23. This issue is now available for request.

[gbowne1]

@balajik

[balajik]

@gbowne1 I'm not familiar with Firefox browser and it's error messages. But I sure that this is not a CORS or Shutterstock issue as CORS error will happen in all the browsers.

I believe this is an error from the browser behaviour to cancel or abort the http request when navigated to another page when current page is loading the assets.

Can you check/confirm if this error have any visual impact in the application? If it's not, then I don't think we need to worry about it. 🙂

@manuel12 @pawel975

[gbowne1]

@balajik

1. I just wondered if this issue still exists
2. I have had a quest to make this application as error free as possible.
3. I wondered if it was indeed browser behavior.
4. To my knowledge, it does not have any visual impact
5. I also wonder if we can just cancel this issue or do we need to do some testing.

[balajik]

@gbowne1 we can do some testing to confirm the behaviour and based on that we can close this issue.

[gbowne1]

We are using RTL, Jest and Cypress. Shouldn't be too hard to come up with a test.

I just don't wanna prematurely close or ignore an issue that might be there.

[gbowne1]

I also was focused on @NigamDevansh's 2nd comment in this thread.

[balajik]

also when i was going through the /friends route their were two warnings:

• One was "Invalid prop children of type array supplied to Panel, expected object." which I removed by changing the propType of children in panel to ".node" from ".object" asPropTypes.object expects the children prop to be a single React element (e.g., a single JSX element or a component), not an array of elements. When you pass multiple JSX elements as children to a component, React automatically wraps them in an array.
• Second error was in friends component the children prop was `required so I just commented it out so if needed one can easily uncomment it and use it.
• Also added the image to the friends list over at card media.

@gbowne1 - this comment right?

[gbowne1]

yes @balajik