I woke up in the morning and took a look at the home page and everything was the same as I left it yesterday. I decided to add the star line to the owl carousel so I click on one of the products to first give it some rating and to my shock, the images on the single product page have been disappeared. I noticed that they were there but hidden, furthermore, the placeholder was there as well and as the result, a huge chunk of empty space exists on the page.
Digging into Chrome Developers Tool I found that the opacity for the wrapper div has set to 0.
The first theory is dismissed immediately, all the files where there so there must be conflict. I start by commenting out en-queued files one by one.
Result: It turned up that I had commented out this line:
wp_register_script( 'jquery-migrate', "https://code.jquery.com/jquery-migrate-3.0.0.min.js", array(), '3.0.0' );
Explanation: I always deregister jQuery and jQuery-migrate
wp_deregister_script( 'jquery-core' );
wp_deregister_script( 'jquery-migrate' );
And register the latest version again. For some reasons, I had commented out registration of jquery-migrate.
Update: it has nothing to do with jquery-migrate.js. I needed to enqueue jquery with the same handle that I deregister it like this:
wp_deregister_script( 'jquery' );