Fix Bug: material-ui-popup-state error in staging environment

[samuelatefah]

I didn't realize this, but in the staging environment, the material-ui-popup-state package is not working properly. It works completely fine in the local environment, however. This error causes the dev site to throw an error after a user navigates to the "Your Courses" page. Here is the following error:

TypeError: te.usePopupState is not a function
    at Dt (YourCourses.ba906b52.js:1:15901)
    at _x (index.b8886188.js:30:19565)
    at s4 (index.b8886188.js:32:44429)
    at o4 (index.b8886188.js:32:40066)
    at H9 (index.b8886188.js:32:39994)
    at Sh (index.b8886188.js:32:39847)
    at O1 (index.b8886188.js:32:36179)
    at t4 (index.b8886188.js:32:35125)
    at k (index.b8886188.js:17:1600)
    at MessagePort.Y (index.b8886188.js:17:1968)
overrideMethod @ VM143 react_devtools_backend.js:4026

What I am guessing is that the vite build script and the material-ui-popup-state package are not getting along because the local environment is completely functional (utilizes the vite script).

Steps to Reproduce

1. Navigate to https://proj-hourly-dev.netlify.app/
2. Either log into an existing account or create a new account by clicking on "Don't have an account"
3. You will be presented with a white screen (error was thrown)
4. Open the console to view the error

Other specifications

• The issue seems to be similar to this and this. However, apparently, this issue was resolved in version 3.0.0 of material-ui-popup-state. I created an issue on their github repo as well, but not sure how long it will take before I receive a response.
• The alternative is to use another library, such as nice-modal-react. One downside is that the material-ui-popup-state could handle the states of the MUI Dialog/Popup, Menu, and Popover components while the nice-modal-react seems like it will only work with the Dialog/Popup component.

[samuelatefah]

Since I have been tackling this bug for a while now and have found no solution that will allow for the continued use of material-ui-popup-state, I will change to nice-modal-react. Of course, if anyone has a clue on how to fix this bug, please leave a comment here.

[samuelatefah]

• Switched to nice-modal-react. Although material-ui-popup-state had some strengths (allowed for the management of Dialog, Menu, and Popover states), the nice-modal-react library is:
  1. Much smaller in regards to package size (61.5 kb vs 142 kb)
  2. Made the code much cleaner (eliminated all forms of prop propagation that was used to open/close Popups)
  3. Quite efficient because you can register a Popup by giving it an id in a file called modals.js and when you want to manage the state of the Popup, you can reference it by its id rather than import the component itself (Performance boost?)