Fix InvalidArgumentException: Invalid ID provided for the media entity

Thank you, Mahmoud, for reporting.

Needs more info
Please, provide the steps to reproduce

Not sure if this issue is related to #3388027: Cannot create bootstrap layout configuration for entities view modes
https://www.drupal.org/project/bootstrap_styles/issues/3388027#comment-1...
Try to use Bootstrap Styles 1.1.1
Add the following static require "bootstrap_styles":"1.1.1" to your root composer.json file
Please, confirm if you still have the issue

I confirm the issue.
Is this in a multilingual site? And with Translatable enabled?

The AJAX is not providing the right media ID type
It could be an issue with local, and translate, trying to translate the Media ID number for the Background Media

layout_builder/configure/section/overrides/node.1/3?_wrapper_format=drupal_dialog.off_canvas&ajax_form=1&_wrapper_format=drupal_ajax

The website encountered an unexpected error. Please try again later.

InvalidArgumentException: $string ("1") must be a string. in Drupal\Core\StringTranslation\TranslatableMarkup->__construct() (line 132 of core/lib/Drupal/Core/StringTranslation/TranslatableMarkup.php).
t(1) (Line: 201)
__TwigTemplate_339097718ba96247ee7d21614bcabe61->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 40)
__TwigTemplate_dd6b0a1d5f83743639f88f3467266e16->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array, Array) (Line: 40)
Twig\TemplateWrapper->render(Array) (Line: 53)
twig_render_template('themes/custom/mytheme/templates/views/views-mini-pager.html.twig', Array) (Line: 372)
Drupal\Core\Theme\ThemeManager->render('views_mini_pager', Array) (Line: 445)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 474)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 136)
__TwigTemplate_ec2bcf09bf743099dbff4f4fd4f152bc->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 39)
__TwigTemplate_8d1edbf7efa9dac0ab55b2a6c6ee574c->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array, Array) (Line: 40)
Twig\TemplateWrapper->render(Array) (Line: 53)
twig_render_template('themes/custom/mytheme/templates/views/views-view.html.twig', Array) (Line: 372)
Drupal\Core\Theme\ThemeManager->render('views_view__media_library', Array) (Line: 445)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 458)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 458)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 474)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 48)
__TwigTemplate_675b96bee5512e0c2f817f5212227b4c->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array, Array) (Line: 40)
Twig\TemplateWrapper->render(Array) (Line: 53)
twig_render_template('core/modules/media_library/templates/media-library-wrapper.html.twig', Array) (Line: 372)
Drupal\Core\Theme\ThemeManager->render('media_library_wrapper', Array) (Line: 445)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 592)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 149)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 36)
Drupal\Core\Ajax\OpenDialogCommand->getRenderedContent() (Line: 137)
Drupal\Core\Ajax\OpenDialogCommand->render() (Line: 43)
Drupal\Core\Ajax\AjaxResponse->addCommand(Object) (Line: 577)
Drupal\media_library_form_element\Element\MediaLibrary::openMediaLibrary(Array, Object, Object)
call_user_func_array(Array, Array) (Line: 69)
Drupal\Core\Form\FormAjaxResponseBuilder->buildResponse(Object, Array, Object, Array) (Line: 109)
Drupal\Core\Form\EventSubscriber\FormAjaxSubscriber->onException(Object, 'kernel.exception', Object)
call_user_func(Array, Object, 'kernel.exception', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch(Object, 'kernel.exception') (Line: 240)
Symfony\Component\HttpKernel\HttpKernel->handleThrowable(Object, Object, 1) (Line: 91)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 54)
Drupal\simple_oauth\HttpMiddleware\BasicAuthSwap->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object, 1, 1) (Line: 704)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

I'm hitting this too.

I think I've found the issue, for a new section, submitStyleFormElements is adding `media_id` while the group_elements array for it is some form elements to select an image, and not a raw media_id like I think the code is expecting?

EDIT: to be clear if it is this, its more a Bootstrap Styles bug, so maybe this issue should be in that project?

Thanks Jon for the hint.

This issue was fixed in the 1.0.x branch
in #3221526: Fix rendering both Background Color and Background Image or Video

  /**
   * {@inheritdoc}
   */
  public function submitStyleFormElements(array $group_elements) {
    return [
      'background_media' => [
        'image' => [
          'media_id' => $group_elements['background_image'],
        ],
        'video' => [
          'media_id' => $group_elements['background_video'],
        ],
        'background_options' => [
          'background_position' => $group_elements['background_options']['background_position'],
          'background_repeat' => $group_elements['background_options']['background_repeat'],
          'background_attachment' => $group_elements['background_options']['background_attachment'],
          'background_size' => $group_elements['background_options']['background_size'],
        ],
      ],
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function submitStyleFormElements(array $group_elements) {

    // When the Background Image config field has a selected media target entity image id.
    if (isset($group_elements['background_image']) && $group_elements['background_image'] !== '') {
      $group_elements['background_type'] = 'image';
    }

    // When the Background Video config field has a selected media target entity video id.
    if (isset($group_elements['background_video']) && $group_elements['background_video'] !== '') {
      $group_elements['background_type'] = 'video';
    }

    return [
      'background' => [
        'background_type' => $group_elements['background_type'],
      ],
    ];
  }

Faced the same issue in a custom Bootstrap theme.

I find out that if the front-end theme for example was Bootstrap Barrio 5.5 or a sub theme of it.
or any custom Bootstrap ~5.0 themes

The Layout Builder will call the the Media Library modal window using the front-end default Theme while editing the layout
then something is wrong with the "views-mini-pager.html.twig" template file
If the issue is fixed with the mini pager for the Media Library view no longer the issue will show up.

Please, check the mini pager view template format + your front-end theme + Layout Builder layout editing theme.

Yeah sorry, should have specified, this is when using a drupal/bootstrap5 generated subtheme.

Have checked `views-mini-pager.html.twig` and I don't see anything wrong. Just seems to be some whitespace differences and a couple extra classes.

Patch attached fixes the issue for me,
With live preview on, the "add media" fields from media_library_form_element were the "values" for the background media image & video fields. So have added a $form_state->cleanValues(); call to remove them before processing the values further.

Have also cleaned up some logic around the value being in `media_library_selection` in some cases.

Thanks @Jon Nunan patch #15 is working for me.

Thanks, Jon, for the patch
Hitting another issue on #3390195: Fix Illegal offset type error with Bootstrap Styles when media library selection is present

Feels that both should be committed

✅ Released bootstrap_styles 1.1.5