Hi Jeromin;
Interesting bug!
The good news is that wp_add_inline_script is used in almost every plugin and theme (and WordPress core as well actually) and as I have not had reports of this issue before, it is likely this is due to a specific context (theme, plugins, settings and obviously the code snippet to add the inline CSS).
So next steps;
1. can you test if there are specific CSS optimization settings that trigger the bug? does it happen when “Generate data: URIs for images?” is off? does it happen when “aggregate CSS” is off? any other option involved?
1. can you share the code snippet so I can test it on one of my development/ test sites to see if I can reproduce the bug?
frank
Thread Starter
Jeromin
(@jerominrebatet)
Hello,
I rewrite my function, here it is :
function enqueue_script {
if (is_page('page_name'))
{
$data = file_get_contents(get_stylesheet_directory_uri() . '/test-file-v3.json');
wp_add_inline_script('xxx-script', 'const testData = '.json_encode(json_decode($data)).';', 'before');
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts', 20 );
I already test autoptimize with all CSS settings off. The enabled CSS with no settings affect the php function.
The snippet adds a javascript snippet not any CSS.
We’re also using Elementor Pro and WP Super Cache, bbut it doesn’t seem to affect that code snippet. It worked perfectly few days ago with no update on WordPress since then.
So I also asked my hosting provider in case there was an update of the PHP version.
OK. Now in order to be able to test I will also need the contents of test-file-v3.json, can you provide that as well?
Thread Starter
Jeromin
(@jerominrebatet)
You can just put any valid JSON into that json file : {"data":"test"}
I just tested with this code snippet;
function enqueue_my_script() {
wp_add_inline_script( 'twenty-twenty-one-responsive-embeds-script', 'const testData = ' . json_encode( json_decode( '{"Salut":"Jeromin"}') ) . ';', 'before' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_script', 20 );
and that works on my testsite, see the HTML source of https://futttakinstatest.kinsta.cloud/?bust-page-cache=yes-please near the bottom.
so if you use the exact same snippet as I did here (well, except for the twentytwentyone specific JS hook), does that work for you?
Thread Starter
Jeromin
(@jerominrebatet)
Yes, thank you I’m getting closer.
Is there a memory limit that you know about ?
Cause in my case I load 3 JSON files. It worked well with 2 of them but adding a third variable (using json file) breaks it all.
Whereas, when it worked I already had 469 Ko + 223 Ko, how could it be that when I had the third one that is only 28 Ko, everything breaks.
It seems that it breaks above 700 Ko … Any idea ?
Thread Starter
Jeromin
(@jerominrebatet)
All good !!
It was indeed a memory problem from WP.
Fixed it with define('WP_MEMORY_LIMIT', '256M');
Was at 40M !
The CSS optimizer might took the remaining memory and crashed without errors in my logs.
The problem likely was with the regular expression getting too much data fed and that can cause stack overflows in PRCE (the regular expression engine used by a.o. PHP). Having more memory available to PHP can indeed fix that 🙂
Thread Starter
Jeromin
(@jerominrebatet)
I should have checked the memory well before !
Anyway, thanks a lot for your time and I hope that would benefit to others 🙂
Thread Starter
Jeromin
(@jerominrebatet)
Hello,
Bad news as it may was a coincidence but even having changed the WP memory limit, my page is still broken due to CSS optimizer and a bit too much data loaded !
The problem still the same :
Cause in my case I load 3 JSON files. It worked well with 2 of them but adding a third variable (using json file) breaks it all.
Whereas, when it worked I already had 469 Ko + 223 Ko, how could it be that when I had the third one that is only 28 Ko, everything breaks.
It seems that it breaks above 700 Ko … Any idea ?
Can I tell autoptimize to avoid handling a script meta with its ID ?
the problem is this isn’t AO trying to optimize the JSON data, but AO hiding the JSON data before optimizing the CSS, to ensure AO does not touch JavaScript even if it seems to have CSS in it (which I’m afraid does happen sometimes) and that hiding uses regular expressions and those regexes (depending on the PHP configuration) can crash when having to work on a large amount of data.
so 2 possibilities;
1. I can add a filter to AO (beta first) which you could use to tell AO _not_ to hide that JS when optimizing CSS
2. you could use an AO filter to add the JSON instead of wp_add_inline_script after all other optimizations have finished, that way AO will not try to hide the JSON as it’s not there (yet)?
Thread Starter
Jeromin
(@jerominrebatet)
Let’s try that 🙂
Could give me the right direction please ? I didn’t find a filter option on the plugin page.
for option (2) you mean? for that you’d use the autoptimize_html_after_minify one which holds the fully optimized HTML and where you can use e.g. str_replace to add your JSON at the place you want it to appear?
