[3.x]: Creating a new matrix field breaks Craft.js

[hunwalk]

What happened?

Description

Creating a new field and changing the field type to matrix will result in an error:

Steps to reproduce

1. Try to create a new matrix field

This might be our unique problem

What happens in the background

It seems that whenever Craft calls fields/render-settings and it returns content inside footHtml it crashes, changing the content of the Craft variable in js.

We've disabled every plugin and the problem still occurs.

Craft CMS version

3.7.48

PHP version

8.1.7

Operating system and version

Linux 4.4.0-213-generic

Database type and version

MySQL 10.1.10

Image driver and version

No response

Installed plugins and versions

"craftcms/redactor": "2.10.10",
"ether/seo": "3.7.4",
"mikestecker/craft-videoembedder": "1.1.4",
"verbb/super-table": "2.7.2",
"wrav/oembed": "1.3.18"

[brandonkelly]

I’m not able to reproduce this. I suspect it has something to do with the X-Registered-Asset-Bundles and/or X-Registered-Js-Files headers, which are supposed to be sent along with each control panel Ajax request, which Craft uses to keep track of which asset bundles and JavaScript resources have already been registered to the page, to avoid them getting re-registered. For some reason that appears to not be working in your case.

Is Craft installed behind a proxy server (e.g. load-balancer)? Perhaps the headers are getting stripped from there, before the request makes it to Craft.

[cstudios-slovakia]

Dear Brandon, the hosting company has some load balancers, but there is another Craft CMS running on the same server, with the same environment and same settings only different domains. Here are the headers in questions returned by the network tab in Chrome:

user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
x-csrf-token: uwPwA9C1F6bIikuJXmQX8DiFJqwMVNd9eEPgmoD29QXfKsl7Ww2oswkfr34mNeLfd6MWQQGWuORgJo2jpDwg0AJ6Bd_G3xe8XHafAPCUdgR03yKMYAV7vg3uWTmhh0giTd5EQCFT89_QVsnjWw5mMUOzQ1duQE5G6q0ApdvDT7VBYRUFufb7ZokSzoIHhK7Q0O7A63u-UL7lW8Sm6z3mNTZlqX7Ndd57IrtNN3aQ9sKixk-2GZ01ITnk1HV-nE0QV9DoFcF3IzHz3dIBHrvFwllE4TBOYeuiunGJP0D9OcWtRGBC7EfpBDxNhz_caFvHsH9Afe0iJkRjwezlBrGtCGA2fSHdIiEBKxw0s-tI9qm0OdlxLiB11bSvVcN7_dZJ_pqct5Lx
x-registered-asset-bundles: ,craft\web\assets\fieldsettings\FieldSettingsAsset,craft\web\assets\cp\CpAsset,craft\web\assets\axios\AxiosAsset,craft\web\assets\d3\D3Asset,craft\web\assets\elementresizedetector\ElementResizeDetectorAsset,craft\web\assets\focusvisible\FocusVisibleAsset,craft\web\assets\garnish\GarnishAsset,yii\web\JqueryAsset,craft\web\assets\jquerytouchevents\JqueryTouchEventsAsset,craft\web\assets\velocity\VelocityAsset,craft\web\assets\jqueryui\JqueryUiAsset,craft\web\assets\jquerypayment\JqueryPaymentAsset,craft\web\assets\datepickeri18n\DatepickerI18nAsset,craft\web\assets\picturefill\PicturefillAsset,craft\web\assets\selectize\SelectizeAsset,craft\web\assets\fileupload\FileUploadAsset,craft\web\assets\xregexp\XregexpAsset,craft\web\assets\fabric\FabricAsset,craft\web\assets\iframeresizer\IframeResizerAsset
x-registered-js-files: ,https://www.microwell.sk/cpresources/df367f9/axios.js?v=1658475320,https://www.microwell.sk/cpresources/2bf74f16/d3.js?v=1658475320,https://www.microwell.sk/cpresources/ead942fd/element-resize-detector.js?v=1658475320,https://www.microwell.sk/cpresources/3339dac4/focus-visible.js?v=1658475320,https://www.microwell.sk/cpresources/ef395d15/jquery.js?v=1658475320,https://www.microwell.sk/cpresources/b9c429bf/jquery.mobile-events.js?v=1658475320,https://www.microwell.sk/cpresources/bc00f46a/velocity.js?v=1658475320,https://www.microwell.sk/cpresources/53a8f0bc/garnish.js?v=1658475320,https://www.microwell.sk/cpresources/e5decd03/jquery-ui.js?v=1658475320,https://www.microwell.sk/cpresources/b997f6dd/jquery.payment.js?v=1658475320,https://www.microwell.sk/cpresources/85cc2c03/picturefill.js?v=1658475320,https://www.microwell.sk/cpresources/3d8acb17/selectize.js?v=1658475320,https://www.microwell.sk/cpresources/fba51ba8/jquery.fileupload.js?v=1658475320,https://www.microwell.sk/cpresources/8e749103/xregexp-all.js?v=1658475320,https://www.microwell.sk/cpresources/7b1ac7ab/fabric.js?v=1658475320,https://www.microwell.sk/cpresources/209646a1/iframeResizer.js?v=1658475320,https://www.microwell.sk/cpresources/31c2695f/cp.js?v=1658475320,https://www.microwell.sk/cpresources/26ff9397/fieldsettings.js?v=1658475319
x-requested-with: XMLHttpRequest

[brandonkelly]

@cstudios-slovakia What is the full Ajax response body?

[cstudios-slovakia]

Full Ajax response as follows:

{
  "...": "...",
  "footHtml": "<script>window.d3FormatLocaleDefinition = {\"decimal\":\".\",\"thousands\":\",\",\"grouping\":[3],\"currency\":\"$\",\"numerals\":[\"0\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\"],\"percent\":\"%\",\"minus\":\"-\",\"nan\":\"NaN\"};\nwindow.d3TimeFormatLocaleDefinition = {\n \"dateTime\": \"%x, %X\",\n \"date\": \"%-m/%-d/%Y\",\n \"time\": \"%-I:%M:%S %p\",\n \"periods\": [\"AM\", \"PM\"],\n \"days\": [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"],\n \"shortDays\": [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"],\n \"months\": [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"],\n \"shortMonths\": [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]\n}\n;\nwindow.d3Formats = {\"shortDateFormats\":{\"day\":\"%-m/%-d\",\"month\":\"%-m/%Y\",\"year\":\"%Y\"}};</script><script src=\"https://microwell.sk/cpresources/df367f9/axios.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/2bf74f16/d3.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/ead942fd/element-resize-detector.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/3339dac4/focus-visible.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/ef395d15/jquery.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/b9c429bf/jquery.mobile-events.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/bc00f46a/velocity.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/53a8f0bc/garnish.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/e5decd03/jquery-ui.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/b997f6dd/jquery.payment.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/85cc2c03/picturefill.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/3d8acb17/selectize.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/fba51ba8/jquery.fileupload.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/8e749103/xregexp-all.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/7b1ac7ab/fabric.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/209646a1/iframeResizer.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/31c2695f/cp.js?v=1658475320\"></script>\n<script src=\"https://microwell.sk/cpresources/d58cbe24/MatrixConfigurator.js?v=1658475323\"></script>\n<script>new Craft.MatrixConfigurator([{\"type\":\"craft\\\\fields\\\\Assets\",\"name\":\"Assets\"},{\"type\":\"craft\\\\fields\\\\Categories\",\"name\":\"Categories\"},{\"type\":\"craft\\\\fields\\\\Checkboxes\",\"name\":\"Checkboxes\"},{\"type\":\"craft\\\\fields\\\\Color\",\"name\":\"Color\"},{\"type\":\"craft\\\\fields\\\\Date\",\"name\":\"Date\"},{\"type\":\"craft\\\\fields\\\\Dropdown\",\"name\":\"Dropdown\"},{\"type\":\"craft\\\\fields\\\\Email\",\"name\":\"Email\"},{\"type\":\"craft\\\\fields\\\\Entries\",\"name\":\"Entries\"},{\"type\":\"craft\\\\fields\\\\Lightswitch\",\"name\":\"Lightswitch\"},{\"type\":\"craft\\\\fields\\\\MultiSelect\",\"name\":\"Multi-select\"},{\"type\":\"craft\\\\fields\\\\Number\",\"name\":\"Number\"},{\"type\":\"craft\\\\fields\\\\PlainText\",\"name\":\"Plain Text\"},{\"type\":\"craft\\\\fields\\\\RadioButtons\",\"name\":\"Radio Buttons\"},{\"type\":\"craft\\\\redactor\\\\Field\",\"name\":\"Redactor\"},{\"type\":\"ether\\\\seo\\\\fields\\\\SeoField\",\"name\":\"SEO\"},{\"type\":\"verbb\\\\supertable\\\\fields\\\\SuperTableField\",\"name\":\"Super Table\"},{\"type\":\"craft\\\\fields\\\\Table\",\"name\":\"Table\"},{\"type\":\"craft\\\\fields\\\\Tags\",\"name\":\"Tags\"},{\"type\":\"craft\\\\fields\\\\Time\",\"name\":\"Time\"},{\"type\":\"craft\\\\fields\\\\Url\",\"name\":\"URL\"},{\"type\":\"craft\\\\fields\\\\Users\",\"name\":\"Users\"},{\"type\":\"mikestecker\\\\videoembedder\\\\fields\\\\Video\",\"name\":\"Video\"},{\"type\":\"wrav\\\\oembed\\\\fields\\\\OembedField\",\"name\":\"oEmbed\"}], \"types[craft\\\\fields\\\\Matrix]\", \"types[craft\\\\fields\\\\Matrix][blockTypes][__BLOCK_TYPE_wxkbygjcpg__][fields][__FIELD_wxkbygjcpg__][typesettings]\", \"wxkbygjcpg\");</script>"
}

[brandonkelly]

Removed a couple properties to focus on footHtml, which you can see is telling the JS to re-include all of the control panel’s JS resources (starting with axios.js). Which indicates that the X-Registered-Asset-Bundles and X-Registered-Js-Files headers aren‘t making it all the way to Craft as I suspected.

Most likely they are getting stripped away by your load balancers, but I can’t be 100% sure from here.

Another way you can verify this is to enable the Debug Toolbar in the Control Panel from your user account preferences. Then reproduce the faulty Ajax request, go to the toolbar’s Request tab, and select the fields/render-settings request in the Last 10 menu:

Click on the request’s Headers tab. If the headers did in fact make it to Craft successfully, you will see them listed there:

[peterorosz88]

This is the POST request

[brandonkelly]

Hm ok, the headers do seem to be in-tact.

Any chance we can get access to this environment? If so please send access details to [email protected].

[cstudios-slovakia]

the access has been sent. Let me know if anything else is necessary.

[brandonkelly]

For posterity, this ended up being due to an issue with config/app.php, where the view component was being overridden like so:

return [
    'components' => [
        'view' => [
            'class' => 'craft\web\View',
            'allowEval' => true
        ],
    ],
];

That should have been this instead:

return [
    'components' => [
        'view' => function() {
            $config = craft\helpers\App::viewConfig();
            $config['allowEval'] = true;
            return Craft::createObject($config);
        },
    ],
];