Merged JS and CSS do not work when Production mode

Question

I was in developer mode, everything was great, when I changed to Production mode, the Merged options of CSS and JS seem to be ignored, it was back listing all css and js.

Also the product page only shows the pictures of the product in developer mode, after changing to production mode they disappear.

Any thought to help me?

---

The point is, I'm doing it.

Here is what I did in sequence:

bin/magento setup:upgrade

bin/magento indexer:reindex

bin/magento setup:static-content:deploy

bin/magento setup:di:compile

bin/magento deploy:mode:set production

bin/magento setup:static-content:deploy

And before even starting, the Merge options are YES and I was in developer mode.

Answer 1

I just did the following and the problem was solved:

bin/magento setup:upgrade

bin/magento indexer:reindex

bin/magento deploy:mode:set production -s

# Here was the secret: run the di:compile after production
bin/magento setup:di:compile  

bin/magento setup:static-content:deploy

Answer 2

Make sure you check your NGINX configuration file as well.

If there is a variable $MAGE_MODE set there it needs to be changed to production as well, and save the file

After that you will need to reload or restart NGINX depending on your preference.

sudo service nginx reload

OR

sudo service nginx restart

After that check your app/etc/env.php and see if the MAGE_MODE array key is set to production as well if not change it to production or you can use the command

php bin/magento deploy:mode:set production

After you executed the command check if the value changed app/etc/env.php, sometimes there might be permission issues.

Next, clean out the pub/static folder.

rm -rf pub/static/*

Clear/Flush your cache

php bin/magento cache:clean
php bin/magento cache:flush 

Now you are ready to execute the static content deploy

php bin/magento setup:static-content:deploy

Hope this helps.

Answer 3

I have the similar issue. The cause for no image is because there is an error in JS file after minify JS. You can verify it in your browser (firebug etc).

.../div>';return __p};})(window,document,location,typeof jQuery!=='undefined'&&jQu

I solved this by remove all the file in var/cache/ and pub/static/ and setup:static-content:deploy again

But there is still another issue, it's about the braintree if you enable it. Braintree doesn't show up due to another JS error.

Error: Script error for: https://js.braintreegateway.com/v2/braintree.js http://requirejs.org/docs/errors.html#scripterror

...Error(id,msg,err,requireModules){var e=new Error(msg+'\nhttp://requirejs.org/doc...

For now, I simply don't use the minify js function to avoid the trouble until solution is found.

Answer 4

These are the steps that worked for me on Magento ver. 2.1.7 with Redis (not running Varnish). However, it's still unclear if everything is working as it should. JS is minified and bundled (unclear what merge is supposed to do). CSS is minified (not seeing it merged).

1. Turn off all Magento cache.
2. Clear redis cache.
3. Turn all five css/js configs on (either in admin or via database).
4. Generate static files.
5. Clear Magento cache (command line). For safety (may not be required).
6. Clear opcache (if not set to auto refresh).
7. Refresh frontend home page (and check browser console for errors).
8. Turn on Magento cache.

dev/css/merge_css_files = 1 dev/css/minify_files = 1 dev/js/enable_js_bundling = 1 dev/js/merge_files = 1 dev/js/minify_files = 1

Simply turning on the configs and clearing cache didn't work -- the frontend browser console reported a lot of js errors.

Answer 5

Have you tried to flush the JavaScript/CSS? You can do this under System>Cache Management and then press the button which is on the bottom of the table on the left 'Flus JavaScript/CSS Cache'

Answer 6

You need to redeploy static after enabling this option in production mode.

Answer 7

I just did the following and the problem was solved.

bin/magento setup:upgrade

bin/magento indexer:reindex

bin/magento deploy:mode:set production -s

bin/magento setup:di:compile

(Here was the secret, to run the di:compile after production)

bin/magento setup:static-content:deploy

Answer 8

I've had the problem when the JavaScript is un-compiled the jquery selector works.

$('#my_element').click(function(){ alert('Hello World');});

But once compiled, compressed and joined, I then need to code:-

$('body #my_element').click(function(){ alert('Hello World');});

Don't ask why, it seems that when reading directly from the cache, the requirejs code executes before the domReady and the elements attach to different elements in some different page.

Answer 9

Please check your pub/static folder. Maybe the www-data group doesn't have a write permision to create _cache folder. I've deleted static folder manually in command line. Therefore it can not create _cache folder.

Take a look at var/log/exceptions.log: tail -f var/log/exception.log In my case:

[2020-09-26 12:28:24] main.CRITICAL: Le répertoire "/data/var/www/preprod/www/pub/static/_cache" ne peut être crée Warning!mkdir(): Permission denied {"exception":"[object] (Magento\\Framework\\Exception\\FileSystemException(code: 0): Le répertoire \"/data/var/www/vgc-preprod/www/pub/static/_cache\" ne peut être crée Warning!mkdir(): Permission denied at /data/var/www/preprod/www/vendor/magento/framework/Filesystem/Driver/File.php:227)"}

So:

chmod 777 -r pub/static

Hope it can help.

Answer 10

If already check in database that css and js merge enabled and also checked all deployment commands but after deployment it getting rolled back and sowing not merge on browser.

Same happened with because i used custom deployment pipeline with nginx server. so, i checked and set the files and directory to write permissions for system owner as user.

sudo find . -type f -exec chmod 664 {} \;
sudo find . -type d -exec chmod 775 {} \;
sudo find var pub/static pub/media app/etc -type f -exec chmod g+w {} \;
sudo find var pub/static pub/media app/etc -type d -exec chmod g+ws {} \;
sudo chmod u+x bin/magento 

It worked well to me.

Happy Coding!!

Answer 11

Delete cache manually var/cache and delete session manually var/session

Answer 12

1. Please also enable "Enable JavaScript Bundling" option

   store->configuration->advanced->developer->javascript setting->

2. Enable JavaScript Bundling set to "yes" And flush cache