Page builder error Magento 2.4.8-p1

Question

I have encountered a critical problem with Page Builder on Magento 2.4.8-p1. Saving changes often fail on the second attempt due to CORS errors. Specifically, we see:

• Access to XMLHttpRequest at '' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
• VM62:1 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse ()
• [ERROR] Page Builder was rendering for 5 seconds without releasing locks.

Answer 1

Try this patch:

diff --git a/vendor/magento/module-backend/ViewModel/RequireJsConfigModifierInterface.php b/vendor/magento/module-backend/ViewModel/RequireJsConfigModifierInterface.php
new file mode 100644
index 000000000000..07bd7ca989e6
--- /dev/null
+++ b/vendor/magento/module-backend/ViewModel/RequireJsConfigModifierInterface.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Copyright 2024 Adobe
+ * All Rights Reserved.
+ */
+declare(strict_types=1);
+
+namespace Magento\Backend\ViewModel;
+
+/**
+ * View model interface for requirejs configuration modifier
+ */
+interface RequireJsConfigModifierInterface
+{
+ /**
+ * Modifies requirejs configuration
+ *
+ * @param array $config requirejs configuration
+ * @return array
+ */
+ public function modify(array $config): array;
+}
diff --git a/vendor/magento/module-backend/view/adminhtml/templates/page/js/require_js.phtml b/vendor/magento/module-backend/view/adminhtml/templates/page/js/require_js.phtml
index 6fa41e107995..1b1a5d7fcaf3 100644
--- a/vendor/magento/module-backend/view/adminhtml/templates/page/js/require_js.phtml
+++ b/vendor/magento/module-backend/view/adminhtml/templates/page/js/require_js.phtml
@@ -5,12 +5,20 @@
 */
 
 /** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
+/** @var \Magento\Backend\Block\Page\RequireJs $block */
+
+$requireJsConfig = [
+ 'baseUrl' => $block->getViewFileUrl('/'),
+];
+
+$configModifier = $block->getConfigModifier();
+$requireJsConfig = $configModifier instanceof \Magento\Backend\ViewModel\RequireJsConfigModifierInterface
+ ? $configModifier->modify($requireJsConfig)
+ : $requireJsConfig;
 
 $scriptString = '
 var BASE_URL = \'' . /* @noEscape */ $block->getUrl('*') . '\';
 var FORM_KEY = \'' . /* @noEscape */ $block->getFormKey() . '\';
- var require = {
- \'baseUrl\': \'' . /* @noEscape */ $block->getViewFileUrl('/') . '\'
- };';
-
-echo /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false);
+ var require = ' . /* @noEscape */ json_encode($requireJsConfig) .';';
+?>
+<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
diff --git a/vendor/magento/module-page-builder/ViewModel/StageRenderFrameRequireJsConfigModifier.php b/vendor/magento/module-page-builder/ViewModel/StageRenderFrameRequireJsConfigModifier.php
new file mode 100644
index 000000000..1ae244b03
--- /dev/null
+++ b/vendor/magento/module-page-builder/ViewModel/StageRenderFrameRequireJsConfigModifier.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * Copyright 2024 Adobe
+ * All Rights Reserved.
+ */
+declare(strict_types=1);
+
+namespace Magento\PageBuilder\ViewModel;
+
+use Magento\Backend\ViewModel\RequireJsConfigModifierInterface;
+use Magento\Framework\View\Element\Block\ArgumentInterface;
+
+/**
+ * Modifies requirejs configuration for the stage render frame
+ *
+ * Override the text! plugin within the iframe to ensure we can pipe any XHR requests through to the parent window
+ * as the same origin policy will not allow us to load the templates within this iframe.
+ * It is important that this mapping is configured before requirejs-config.js to ensure the text! plugin is overridden
+ * for all requests.
+ */
+class StageRenderFrameRequireJsConfigModifier implements ArgumentInterface, RequireJsConfigModifierInterface
+{
+ /**
+ * @inheritDoc
+ */
+ public function modify(array $config): array
+ {
+ $config['map']['*'] = array_merge(
+ $config['map']['*'] ?? [],
+ [
+ 'text' => 'Magento_PageBuilder/js/master-format/render/requirejs/text',
+ 'Magento_PageBuilder/js/events' => 'Magento_PageBuilder/js/master-format/render/events'
+ ]
+ );
+ return $config;
+ }
+}
diff --git a/vendor/magento/module-page-builder/view/adminhtml/layout/pagebuilder_stage_render.xml b/vendor/magento/module-page-builder/view/adminhtml/layout/pagebuilder_stage_render.xml
index 6a95e8e87..c40005870 100644
--- a/vendor/magento/module-page-builder/view/adminhtml/layout/pagebuilder_stage_render.xml
+++ b/vendor/magento/module-page-builder/view/adminhtml/layout/pagebuilder_stage_render.xml
@@ -14,6 +14,13 @@
 <remove src="css/styles.css"/>
 </head>
 <body>
+ <referenceBlock name="require.js">
+ <arguments>
+ <argument name="config_modifier" xsi:type="object">
+ Magento\PageBuilder\ViewModel\StageRenderFrameRequireJsConfigModifier
+ </argument>
+ </arguments>
+ </referenceBlock>
 <referenceContainer name="backend.page" remove="true"/>
 <referenceContainer name="menu.wrapper" remove="true"/>
 <referenceContainer name="root">
diff --git a/vendor/magento/module-page-builder/view/adminhtml/templates/stage/render.phtml b/vendor/magento/module-page-builder/view/adminhtml/templates/stage/render.phtml
index 6e96a2757..2586df2b3 100644
--- a/vendor/magento/module-page-builder/view/adminhtml/templates/stage/render.phtml
+++ b/vendor/magento/module-page-builder/view/adminhtml/templates/stage/render.phtml
@@ -10,33 +10,16 @@
 */
 ?>
 
-<?php
-/**
- * Override the text! plugin within the iframe to ensure we can pipe any XHR requests through to the parent window
- * as the same origin policy will not allow us to load the templates within this iframe.
- */
-?>
 <?php
 $pageBuilderConfig = $block->getPageBuilderConfig();
 
-$script = <<<SCRIPT
- require.config({
- 'map': {
- '*': {
- 'text': 'Magento_PageBuilder/js/master-format/render/requirejs/text',
- 'Magento_PageBuilder/js/events': 'Magento_PageBuilder/js/master-format/render/events'
- }
- }
- });
-SCRIPT;
-
 /**
 * To be able to override the text plugin we need the Magento template engine to be used, as the template engine
 * within lib has a dependency on the text! plugin we need to ensure we set the template engine before the
 * dependency blocks us. If we try to just override using the RequireJS config above our !text plugin will never
 * get overridden as our template engine cannot load.
 */
-$script .= <<<SCRIPT
+$script = <<<SCRIPT
 require([
 'ko',
 'Magento_Ui/js/lib/knockout/template/engine'
diff --git a/vendor/magento/module-page-builder/view/adminhtml/web/template/page-builder.html b/vendor/magento/module-page-builder/view/adminhtml/web/template/page-builder.html
index 8b495ce72..1ff74d860 100644
--- a/vendor/magento/module-page-builder/view/adminhtml/web/template/page-builder.html
+++ b/vendor/magento/module-page-builder/view/adminhtml/web/template/page-builder.html
@@ -31,6 +31,7 @@
 <with args="stage">
 <render></render>
 </with>
- <iframe attr="id: 'render_frame_' + id" sandbox="allow-scripts allow-same-origin" style="position: absolute; width:0; height:0; border: none;"></iframe>
+ <!-- Do not modify the "sandbox" attribute without approval from a security engineer -->
+ <iframe attr="id: 'render_frame_' + id" sandbox="allow-scripts" style="position: absolute; width:0; height:0; border: none;"></iframe>
 </if>
 </div>

Source - https://github.com/magento/magento2/issues/39076#issuecomment-2306661703