Problem/Motivation

The error:

Uncaught TypeError: CodeMirror.runMode is not a function
    at HTMLPreElement.<anonymous> (webform.element.codemirror.js?v=8.7.6:117)
    at Function.each (jquery.min.js?v=3.2.1:2)
    at r.fn.init.each (jquery.min.js?v=3.2.1:2)
    at Object.attach (webform.element.codemirror.js?v=8.7.6:115)
    at drupal.js?v=8.7.6:25
    at Array.forEach (<anonymous>)
    at Object.Drupal.attachBehaviors (drupal.js?v=8.7.6:22)
    at drupal.init.js?v=8.7.6:16
    at HTMLDocument.t (ready.min.js?v=1.0.8:4)

is thrown in the browser console when both webform and the https://www.drupal.org/project/codemirror_editor module are installed and at least one text format is set to use the codemirror editor instead of ckeditor.

I have not checked every webform config page, but the error is happening on edit pages with the "webform settings" details/summary element (see attached screenshot) on webform node edit pages like /node/xxxx/edit

Proposed resolution

Would be best to find the root cause of the conflict, but at quick fix for the actual error being thrown would be to check if the runMode function exists before calling it.

CommentFileSizeAuthor
#6 3076157-5.patch968 bytesjrockowitz
#2 Create Webform _ Webform Demo Site.png192.2 KBjrockowitz
Screen Shot 2019-08-20 at 2.36.33 PM.png78.59 KBpcate

Comments

PCate created an issue. See original summary.

jrockowitz’s picture

jrockowitz commented
Status: Active » Postponed (maintainer needs more info)
StatusFileSize
new Create Webform _ Webform Demo Site.png192.2 KB

I spent an hour trying to replicate this issue. I was able to get the CodeMirror field working without any errors.

Please provide step-by-step information on how to replicate this issue.

jrockowitz’s picture

jrockowitz commented
Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)

Please make sure to install the Webform module's libraries.

pcate’s picture

pcate commented

Sorry for taking so long to respond. I've been able to replicate the issue using https://simplytest.me/ with the following steps:

  1. Choose the codemirror_editor (The CodeMirror editor) module for the project name
  2. Add the webform v8.x-5.5 module as an additional project
  3. Start the simplytest instance and login as the admin when it has finished spawning
  4. Enable the Webform UI and Webform Node sub-modules
  5. Edit the settings for the "full_html" text filter at: /admin/config/content/formats/manage/full_html
  6. Change the "Text editor" setting from "CKEditor" to "CodeMirror editor" and save the config form.
  7. Create a new webform node.
  8. On the node edit page the JS error should be showing in the browser console.

I tested it in the latest versions of FF, Safari, and Chrome, all with the same error.

pcate’s picture

pcate commented
Status: Closed (cannot reproduce) » Active
jrockowitz’s picture

jrockowitz commented
Status: Active » Needs review
StatusFileSize
new 3076157-5.patch968 bytes

I was able to replicate the issue. I am okay with the "quick fix for the actual error being thrown would be to check if the runMode function exists before calling it." Please review the attached patch.

The Webform module and Codemirror editor module are both loading different versions of the CodeMirror library. Right now, Drupal does not have a standard way to manage external libraries. I am not sure the Webform module needs to include a one-off fix for this specific CodeMirror related module.

  • jrockowitz authored 8ffcb78 on 8.x-5.x 
    Issue #3076157 by jrockowitz, PCate: Uncaught TypeError: CodeMirror....
jrockowitz’s picture

jrockowitz commented
Status: Needs review » Fixed

I committed the patch. Please download the latest dev release to review.

pcate’s picture

pcate commented

@jrockowitz, I applied the patch and it fixes the issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.