AJAX error prevents user from creating a form

Created on 26 January 2024, about 1 year ago
Updated 5 April 2024, about 1 year ago

Problem/Motivation

On Drupal 10.2.2 with Gin as the admin theme, trying to create a new form results in the following error,

An error occurred while attempting to process /admin/structure/webform/add?_wrapper_format=drupal_modal&ajax_form=1&_wrapper_format=drupal_ajax: ajax.$form.ajaxSubmit is not a function

Steps to reproduce

  1. Create a new form at /admin/structure/webform

Proposed resolution

TBD

Remaining tasks

  • Identify cause of error
  • Submit merge request fixing error
  • Test
  • Update automated test coverage, if needed
  • Merge request into 6.2.x-dev

User interface changes

none

API changes

none

Data model changes

none

πŸ› Bug report
Status

Closed: works as designed

Version

6.2

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States cedewey Denver, CO

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

Comments & Activities

  • Issue created by @cedewey
  • πŸ‡ΊπŸ‡ΈUnited States cedewey Denver, CO
  • Please check the browser console log and Drupal’s log for errors occurring at the same time.

    Are the entire steps to reproduce from installing Drupal verified?

  • Status changed to Postponed: needs info about 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States cedewey Denver, CO

    I've tested this in Claro and it happens there too. However, there must be something unique to my website's set up because I tried recreating this on a vanilla Drupal site and was able to create a new webform without issue.

    Marking this as Postponed, maintainer needs more info while I look into other conditions that are contributing to this issue.

  • πŸ‡ΊπŸ‡ΈUnited States calebtr

    I had this issue also with Gin 3.0.0-rc9 and Webform 6.2.2 on Drupal 10.2.4.

    Following the advice in #3, I found that when I first click the 'add webform' button, I get the errors:

    Refused to apply style from 'https://my.site/libraries/path/to/editor-styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
    
    An error occurred during the execution of the Ajax response: The following files could not be loaded: /libraries/path/to/editor-styles.css
    

    Clicking a second time calls up the form, but I get the "ajaxSubmit is not a function" error when I try to submit.

    It turns out that my default theme and its parent declare a CSS file for ckeditor5 in its libraries.info.yml:

    ckeditor5-stylesheets:
      - /libraries/path/to/editor-styles.css
    

    For whatever reason, Drupal isn't recognizing this as a library and is serving it with the wrong MIME type header. I found a workaround in a possibly related Drupal issue: πŸ› Stylesheets in 'ckeditor5-stylesheets' are not checked for existence before being included Active .

    I removed the ckeditor5-stylesheets key and move it to libraries-extend in the theme.info.yml file:

    libraries-extend:
      core/ckeditor5:
        - /libraries/path/to/editor-styles.css
    

    I could also mitigate this for *webform* by changing the HTML Editor settings in Configuration -> Elements.

    This isn't the only place on the site I see the error - I get it wherever there is a Ckeditor5 editor, even when I switch the admin theme to Stark or Olivero. But it is the only place I can find where the MIME error breaks an AJAX submit later on in the interactoin.

    So I think there are two issues:

    1. Drupal is not sending the right header for editor CSS files defined in a theme info file using the ckeditor5-stylesheets key. I'll search around and create a new issue if necessary.
    2. Some additional error handling for Webform AJAX calls would be nice.

  • πŸ‡ΊπŸ‡ΈUnited States calebtr

    Ack, I can't duplicate my Drupal issue. It seems most likely that I had the path wrong in the .info.yml file. It makes sense that my local issue was the same as πŸ› Stylesheets in 'ckeditor5-stylesheets' are not checked for existence before being included Active .

    But regardless, this caused an AJAX error when the 'add webform' form loaded, and eventually the form would not submit, and I think we could prevent this and future random problems with some additional error handling.

  • Status changed to Closed: works as designed about 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States jrockowitz Brooklyn, NY

    But regardless, this caused an AJAX error when the 'add webform' form loaded, and eventually the form would not submit, and I think we could prevent this and future random problems with some additional error handling.

    It is difficult to prevent Ajax from failing when a random error occurs on the pages. Hopefully, Drupal will refactor or improve its Ajax API at some point.

Production build 0.71.5 2024