The following error is found in the browser console. It appeared after we upgraded Magento application that our ecommerce site is running on.

Uncaught SyntaxError: Unable to process binding "ifnot: function(){return customer().fullname }"
Message: Unable to parse bindings.
Bindings value: html:

I found out that this error is being caused by this line.

<!-- ko ifnot: customer().fullname  -->
<span  data-bind="html: '<?= $escaper->escapeHtmlAttr($welcomeMessage) ?>'"></span>
<?= $block->getBlockHtml('header.additional') ?>
<!-- /ko -->

The full header.phtml file containing this code is below

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @var \Magento\Theme\Block\Html\Header $block
 * @var \Magento\Framework\Escaper $escaper
 */
$welcomeMessage = $block->getWelcome();
?>
<?php if ($block->getShowPart() == 'welcome') : ?>
    <li  data-bind="scope: 'customer'">
        <!-- ko if: customer().fullname  -->
        <span 
              data-bind="text: new String('<?= $escaper->escapeHtml(__('Welcome, %1!', '%1')) ?>').replace('%1', customer().fullname)">
        </span>
        <!-- /ko -->
        <!-- ko ifnot: customer().fullname  -->
        <span  data-bind="html: '<?= $escaper->escapeHtmlAttr($welcomeMessage) ?>'"></span>
        <?= $block->getBlockHtml('header.additional') ?>
        <!-- /ko -->
    </li>
    <script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "customer": {
                        "component": "Magento_Customer/js/view/customer"
                    }
                }
            }
        }
    }
    </script>
<?php elseif ($block->getShowPart() == 'other') :?>
    <?= $block->getChildHtml() ?>
<?php endif ?>

Below is the section of the code in knockout.js where Syntax error is reported. The line return new Function("$context", "$element", functionBody); showed redmark

        function createBindingsStringEvaluator(bindingsString, options) {
            // Build the source for a function that evaluates "expression"
            // For each scope variable, add an extra level of "with" nesting
            // Example result: with(sc1) { with(sc0) { return (expression) } }
            var rewrittenBindings = ko.expressionRewriting.preProcessBindings(bindingsString, options),
                functionBody = "with($context){with($data||{}){return{"   rewrittenBindings   "}}}";
            return new Function("$context", "$element", functionBody);
        }

CodePudding user response：

I think the error is coming from this line:

<span  data-bind="html: '<?= $escaper->escapeHtmlAttr($welcomeMessage) ?>'"></span>

You are wrapping the html-to-bind in an extra ' mark, try removing it