The core/drupal.message library requires a status_messages render element

Created on 23 October 2023, 8 months ago
Updated 21 June 2024, 5 days ago

Problem/Motivation

In message.js there is JS that will result in error if a status messages element is not present

 static defaultWrapper() {
      let wrapper = document.querySelector('[data-drupal-messages]');
      if (!wrapper) {
        wrapper = document.querySelector('[data-drupal-messages-fallback]')z;
        wrapper.removeAttribute('data-drupal-messages-fallback');
        wrapper.setAttribute('data-drupal-messages', '');
        wrapper.classList.remove('hidden');
      }
      return wrapper.innerHTML === ''
        ? Drupal.Message.messageInternalWrapper(wrapper)
        : wrapper.firstElementChild;
    }

Prior to ๐Ÿ› Ajax errors are not communicated through the UI Fixed , core/drupal.messages was only loaded via the status_messages render element. Since that issue, core/drupal.ajax also loads core/drupal.messages, without there necessarily being a status_messages element on the page. If there is no status messages render element and Ajax needs to report a problem, there will be an execution-breaking JS error due to defaultWrapper() being called without the elements it expects available.

This causes ๐Ÿ› Exceptions in batch no longer are shown on the page: Javascript error Fixed but wasn't notice because there not tests for errors showing up on the batch page

Running into this IRL otherwise is less likely since most sites have a status messages element loading somewhere on any given page. It's more likely for this to occur in an automated test as those are scenarios where only the subjects under testing are on-page.

Steps to reproduce

Proposed resolution

If there is no status_messages render element present on a page then create one fallback element using Javascript to prevent JavaScript errors.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

๐Ÿ“Œ Task
Status

Needs work

Version

11.0 ๐Ÿ”ฅ

Component
Javascriptย  โ†’

Last updated about 6 hours ago

  • Maintained by
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom @justafish
  • ๐Ÿ‡ซ๐Ÿ‡ทFrance @nod_
Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @bnjmnm
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States tedbow Ithaca, NY, USA
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States tedbow Ithaca, NY, USA
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States tedbow Ithaca, NY, USA

    I put a fix in ๐Ÿ› Exceptions in batch no longer are shown on the page: Javascript error Fixed . This doesn't solve the problem of the library requiring the status_messages render element but it does allow putting that render element on the page without it automatically rendering the service side messages.

    The needs of the batch page is that messages the server knows about should not get rendered on this page but if there are ajax calls that results in errors these should be rendered on the page(at least to keep the pre-existing functionality).

    Tagging this as Automatic Updates Initiative because we need have error messages on the batch page for Automatic Updates. Otherwise if we did beta testing and users couldn't easily see these error the testing would be much less useful.

    So we could solve in the way I did in ๐Ÿ› Exceptions in batch no longer are shown on the page: Javascript error Fixed or another way here or maybe a temp fix in the AutoUpdates module itself would be ok like we did here ๐Ÿ› Ensure that errors are shown on form updates in core 10.1.x Fixed

    In any case we have to solve it someway to get Automatic Updates into core so bumping this to Major

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany Anybody Porta Westfalica

    Funny, just ran into this and saw you recently commented ;D

    It's not yet totally clear to me yet, what the change was, that caused this. Technically, we need [data-drupal-messages] or [data-drupal-messages] to be present on the page. But if not, it should be added by JS?

    My concern with other solutions is, that they may also rely on custom configuration or theme implementations, which we can't really rely on?

  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom Rob230

    I think I am seeing this too, in Drupal 10. When running a migration, if it tries to output a message (e.g. an error), it causes the batch page to break due to a console error: wrapper is null.

    static defaultWrapper() {
      let wrapper = document.querySelector('[data-drupal-messages]');
      if (!wrapper) {
        wrapper = document.querySelector('[data-drupal-messages-fallback]');
        wrapper.removeAttribute('data-drupal-messages-fallback');
        wrapper.setAttribute('data-drupal-messages', '');
        wrapper.classList.remove('hidden');
      }
      return wrapper.innerHTML === ''
        ? Drupal.Message.messageInternalWrapper(wrapper)
        : wrapper.firstElementChild;
    }

    There is no such element on the page with data-drupal-messages or data-drupal-messages-fallback attributes. I would guess the error was introduced in #77245: Provide a common API for displaying JavaScript messages โ†’ .

  • ๐Ÿ‡ฌ๐Ÿ‡ทGreece vensires
  • First commit to issue fork.
  • Pipeline finished with Success
    21 days ago
    Total: 511s
    #191539
  • Status changed to Needs review 21 days ago
  • Status changed to Needs work 20 days ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States bnjmnm Ann Arbor, MI

    see MR

  • Pipeline finished with Failed
    20 days ago
    Total: 1587s
    #192467
  • Pipeline finished with Success
    20 days ago
    Total: 534s
    #192497
  • Status changed to Needs review 20 days ago
  • Status changed to Needs work 19 days ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States bnjmnm Ann Arbor, MI
  • Pipeline finished with Success
    19 days ago
    Total: 607s
    #193249
  • Status changed to Needs review 19 days ago
  • Status changed to Needs work 13 days ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Could the issue summary be updated some please. Mainly proposed solution. Assuming not a UI or Data model change.

    Also tagging for tests as mentioned in the summary

    wasn't notice because there not tests for errors showing up on the batch page

  • Also

    core/modules/system/tests/src/FunctionalJavascript/Batch/ProcessingTest.php

    test was added in https://www.drupal.org/project/drupal/issues/3406612 ๐Ÿ› Exceptions in batch no longer are shown on the page: Javascript error Fixed issue with a temporary fix which is now removed and replaced with a concrete JS fix.
    If Still there is a requirement for adding test I am happy to do that.

  • Status changed to Needs review 13 days ago
  • Status changed to RTBC 12 days ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    So if I understand correctly this is more about refactoring a temporary solution into a better one, in that case believe task is probably more right category.

    Removed the tests tag per #18, if this solution isn't doing anything new then agree probably doesn't need additional coverage.

    Thanks for updating the issue summary removing that tag.

    Looking at the change and update seems simple enough and didn't break any existing coverage.

  • Status changed to Needs work 5 days ago
  • ๐Ÿ‡ซ๐Ÿ‡ทFrance nod_ Lille

    Couple of things to simplify then it's good to go, thanks!

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Gauravvv Delhi, India

    Gauravvvv โ†’ made their first commit to this issueโ€™s fork.

  • Status changed to Needs review 5 days ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Gauravvv Delhi, India
  • Pipeline finished with Failed
    5 days ago
    Total: 649s
    #204326
  • Status changed to Needs work 5 days ago
  • ๐Ÿ‡ซ๐Ÿ‡ทFrance nod_ Lille

    you need to keep

            wrapper.removeAttribute('data-drupal-messages-fallback');
            wrapper.setAttribute('data-drupal-messages', '');
    

    outside the if (!wrapper)

  • Pipeline finished with Failed
    5 days ago
    Total: 768s
    #204358
  • Pipeline finished with Failed
    5 days ago
    Total: 598s
    #204370
  • Pipeline finished with Failed
    5 days ago
    Total: 870s
    #204376
  • Pipeline finished with Failed
    5 days ago
    Total: 519s
    #204565
Production build 0.69.0 2024