react-contextmenu | Project | Frontend Framework library

So, after two weeks, it turns out that having an image in the theme was what was causing this. Changing the image from an import to a url reference fixed this problem.

The fact that the element's class is named react-contextmenu-wrapper is a big hint. React is a JavaScript library for creating user interfaces.

There are different ways in which a webpage can be populated with elements. If you're lucky, then the server will send you an .html with all the content basically baked in - this is trivial to scrape and parse with BeautifulSoup.

A lot of modern websites, however, populate a webpage's elements dynamically, using JavaScript for example. When you view a page like this in your browser, it's no problem - but if you try to scrape a page like this you'll end up just getting the "bare bones" template .html, where the DOM hasn't been populated fully. This is why BeautifulSoup can't see this element.

The point is: Just because you can see an element in your browser, doesn't mean BeautifulSoup will be able to see it.

Whenever you want to scrape a webpage, your first choice weapon should not be BeautifulSoup, in my opinion - you should use BeautifulSoup as a last resort. The first thing you should always do is check to see if the page you're scraping makes any requests to an API, the response of which it uses to populate itself. If it does, you can simply imitate a request to the same API, and get all the content you could ever want to scrape. As if that weren't good enough already, these APIs typically serve JSON, which is trivial to parse.

Here's how you do it:

1. Open the webpage in your browser.
2. If you're using Google Chrome, hit the F12 key to access the Developer Tools (other modern browsers should have a similar feature.)
3. Open the "Network" tab. We will use Chrome's network logger to log all requests made by the webpage.
4. Click on the funnel-shaped icon (which turns red when activated) to enable filtering.
5. Click on XHR (this means view only XMLHttpRequests. These are the kind of requests we're interested in, because we want to see potential outgoing requests to APIs - we are not interested in capturing requests made to resources like images, etc.)
6. Press Ctrl + E or click on the round record button in the top-left to enable logging (this one also turns red when activated.)
7. Press Ctrl + R to refresh the page and start logging traffic.
8. You should see the list of requests growing as the page loads after refreshing. It will look something like this (sorry for the large image):
9. In my case, Spotify made nine XHR requests (on the left) during the time in which I logged traffic. I clicked on a few of them and inspected their "Headers" tab until I found one which had a "Request URL" that looked like it was talking to an API ("api" was part of the URL in this case.)

Time to write a simple script using requests. You'll want to copy the "Request URL", and make sure to copy a few "Request Headers" which look like they might be important for the request as well:

Don't know how. But after enabling sourcemap this error doesn't shown. I removed this command from yarn build: GENERATE_SOURCEMAP=false

Figured it out.

By default, react-contextmenu is configured to work with mobile, and has a "hold to display" value of 1000 milliseconds. It assumes that the user wouldn't hold down the mouse button for 1 second while scrolling around, which was not the case for my app.

By setting the hold to display value to -1, it no longer triggers the bug. The solution, as always, was to ask for help, and then instantly figure it out an hour later.