wp_add_inline_script() is broken after update to 1.0.4

[LukePPx]

Version

1.0.4

What did you expect to happen?

wp_add_inline_script() is working as expected. All three script tags are added after each other.

What actually happens?

The script tags are nested within each other.

<script>
  console.log("Before moment");
  //# sourceURL=moment-js-before
  <script src="https://example.com/wp/wp-includes/js/dist/vendor/moment.js?ver=2.30.1"></script>
  <script>
  moment.updateLocale( 'de_DE', {"months":["Januar","Februar","M\u00e4rz","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],"monthsShort":["Jan.","Feb.","M\u00e4rz","Apr.","Mai","Juni","Juli","Aug.","Sep.","Okt.","Nov.","Dez."],"weekdays":["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],"weekdaysShort":["So.","Mo.","Di.","Mi.","Do.","Fr.","Sa."],"week":{"dow":1},"longDateFormat":{"LT":"G:i","LTS":null,"L":null,"LL":"j. F Y","LLL":"j. F Y, G:i","LLLL":null}} );
  console.log(moment().format());
  //# sourceURL=moment-js-after
</script></script>

Steps to reproduce

Add this to your functions.php in your theme folder:

function test_scripts() {
    wp_enqueue_script( 'moment', 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js' );
    wp_add_inline_script( 'moment', 'console.log("Before moment");', 'before' );
    wp_add_inline_script( 'moment', 'console.log(moment().format());', 'after' );
}

add_action( 'wp_enqueue_scripts', 'test_scripts' );

System info

Radicle 2.2.0
Wordpress 6.9

Log output

Uncaught SyntaxError: Unexpected token '<' (at moment-js-before:202:1)
moment-js-after:2  Uncaught ReferenceError: moment is not defined
at moment-js-after:2:1

Please confirm this isn't a support request.

Yes

[danlapteacru]

Same here with Sage 10

[djaevlen]

Can confirm. The wp_add_inline_script() gets entangled with wp_enqueue_script() which then creates malformed html where the closing tag of the inline script is after the enquened script.

<script>
window.wp_paths = {"images":"https:\/\/demo.ddev.site\/app\/themes\/demo\/dist\/assets\/images","api":"https:\/\/demo.ddev.site\/wp-json\/"};
<script src="/app/themes/demo/dist/frontend/scripts/frontend.824404bb719fd177da67cc9069dcf37f.js"></script>
</script>

[davideprevosto]

I can confirm the same behaviour. I am on production and trying to figure out how to fix 🥶

For now, I disabled 'clean-html5-markup' => false,

[keroth-]

Same issue here with a Sage theme and the "app" bundle: the inline "before" script (webpack runtime) ends up with the next <script src="..."> tag nested inside it, causing Unexpected token '<'.

Workaround: set clean-html5-markup to false in the theme's Prettify config (config/prettify.php):

'clean-html5-markup' => false,

Scripts output correctly again. Hoping for a fix in the module.

[davideprevosto]

UPDATE

Removing the LIBXML_HTML_NOIMPLIED flag resolves the Uncaught SyntaxError: Unexpected token '<' issue. Honestly, I don't know if it could cause other problems.

$this->document->loadHTML(
            $html,
            **LIBXML_HTML_NOIMPLIED** | LIBXML_HTML_NODEFDTD | LIBXML_NOXMLDECL | LIBXML_NOWARNING | LIBXML_NOERROR
        );

---

I investigated a bit.

• on my MacOS I am running libxml2: 2.15.1
• on the Ubuntu 24.04 production server I am running libxml2: 2.9.13

On my production server I restored the previous version of the Document.php file, involved on #18 and now wp_add_inline_script is working fine, without any issue.

On my local environment wp_add_inline_script is running fine too, but I introduce the regression about the "8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"-->8"--> 8"-->" characters. (It was about return trim(substr($this->document->saveHTML(), 23)); instruction).

The previous version of Document.php:

<?php

namespace Roots\AcornPrettify;

use DOMDocument;
use DOMNodeList;
use DOMXPath;
use Illuminate\Support\Str;

class Document
{
    /**
     * The DOMDocument instance.
     */
    protected DOMDocument $document;

    /**
     * The XML encoding tag.
     */
    protected string $encoding = '<?xml encoding="UTF-8">';

    /**
     * Initialize the Document instance.
     */
    public function __construct(string $html)
    {
        $this->document = new DOMDocument;

        $this->suppress();

        $this->document->loadHTML(
            Str::start($html, $this->encoding),
            \LIBXML_HTML_NOIMPLIED | \LIBXML_HTML_NODEFDTD
        );

        $this->clear();
    }

    /**
     * Make a new instance of the Document.
     */
    public static function make(string $html): self
    {
        return new static($html);
    }

    /**
     * Loop through each node in the document and execute the provided callback.
     */
    public function each(callable $callback): self
    {
        foreach ($this->xpath('//*') as $node) {
            $callback($node);
        }

        return $this;
    }

    /**
     * Evaluate the given XPath expression.
     */
    public function xpath(string $expression): DOMNodeList
    {
        return (new DOMXPath($this->document))->query($expression);
    }

    /**
     * Get the saved document HTML.
     */
    public function html(): string
    {
        return trim(substr($this->document->saveHTML(), 23));
    }

    /**
     * Suppress the XML errors.
     */
    protected function suppress(): self
    {
        libxml_use_internal_errors(true);

        return $this;
    }

    /**
     * Clear the XML errors.
     */
    protected function clear(): self
    {
        libxml_clear_errors();

        return $this;
    }

    /**
     * Call the given method on the root document.
     */
    public function __call(string $name, array $arguments): mixed
    {
        return $this->document->{$name}(...$arguments);
    }

    /**
     * Get the given property from the root document.
     */
    public function __get(string $name): mixed
    {
        return $this->document->{$name};
    }
}

[joshuafredrickson]

Removing the LIBXML_HTML_NOIMPLIED flag resolves the Uncaught SyntaxError: Unexpected token '<' issue. Honestly, I don't know if it could cause other problems.

This also worked for me on a Bedrock install. I haven't seen the 8"--> bug previously, but removing the flag above fixed it.

I was experiencing an issue with Gravity Forms loading its script tag inside another script tag:

<script>
//# sourceURL=gform_gravityforms-js-before
<script defer='defer' src="http://site.test/app/plugins/gravityforms/js/gravityforms.js?ver=2.9.26"></script></script><script id="gform_conditional_logic-js-extra">
var gf_legacy = {"is_legacy":"1"};
//# sourceURL=gform_conditional_logic-js-extra
</script>

For now, I reverted to 1.0.3, which seems to be working correctly.