Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Draftail extension wagtailcolourpicker stops working with webpack 4 (since wagtail 2.11)

See original GitHub issue

Issue Summary

wagtailcolourpicker is a colour picker for Wagtail’s DraftJS editor. The project is archived but @Vadim-Karpenko managed it to work with later wagtail versions.

The plugin works fine with wagtail v2.10.2 but failed with v2.11. After some digging, I found that it failed with the webpack 4 upgrades for the v2.11. The last working commit is accdbd21742219a1e78660755b2630ca1b77334a, and failed since de2d66e08e6555dd69ca02eeb1a5d9f6ef5f07f7.


When clicking the text color icon on the draftail editor, the editor crashed with the below information. image


Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `DraftailEditor`.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `DraftailEditor`.
    at createFiberFromTypeAndProps (
    at createFiberFromElement (
    at updateElement (
    at updateFromMap (
    at reconcileChildrenArray (
    at reconcileChildFibers (
    at reconcileChildren (
    at updateHostComponent (
    at beginWork (
    at HTMLUnknownElement.callCallback (

    in div (created by DraftailEditor)
    in DraftailEditor
    in EditorFallback

Steps to Reproduce

  1. Start a new project with wagtail start mysite
  2. Install a wagtail debug version, so you can see more React debug information
  • Clone wagtail to a folder, say “…/wagtail”
  • Checkout a commit git checkout de2d66e08e6555dd69ca02eeb1a5d9f6ef5f07f7
  • Build a debug version, npm install --no-save && npm run watch
  • Install the version, pip install -e '../wagtail[testing,docs]'
  1. Install wagtailcolourpicker. To make it easier to debug, let’s install from the source “…/wagtailcolourpicker”
cd ..
git clone
cd mysite
pip install -e '../wagtailcolourpicker'
  1. Add "wagtailcolourpicker" to the INSTALLED_APPS
  2. Add some colors to settings
    "black": "#000000",
    "blue": "#004d99",
    "cyan": "#22b8cf",
    "orange": "#fd7e14",
    "purple": "#4f0862",
    "spruce green": "#077452",
    "red": "#c80813",
    "white": "#fff",
    "default": {
        "WIDGET": "wagtail.admin.rich_text.DraftailRichTextArea",
        "OPTIONS": {
            "features": [
  1. Create a model with a RichTextBlock
from django.db import models

from wagtail.admin.edit_handlers import StreamFieldPanel
from wagtail.core.blocks import RichTextBlock
from wagtail.core.fields import StreamField
from wagtail.core.models import Page

class HomePage(Page):

class BasicPage(Page):

    body = StreamField([
        ('rich_text', RichTextBlock())

    # show in menu ticked by default
    show_in_menus_default = True

    content_panels = Page.content_panels + [

  1. Run python migrate
  2. Start the server
  3. Go to the admin backend, create the new page. Click the Text Colour icon on the draftail editor toolbar. You will see the error above.

Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?

Now rebuild the wagtail with commit accdbd21742219a1e78660755b2630ca1b77334a, you will see the plugin works again.


  • I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: (yes)

Technical details

  • Python version: Python 3.6.9
  • Django version: v3.1.5
  • Wagtail version: See above
  • Browser version: Chrome 87

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

thibaudcolascommented, Feb 12, 2021

I’m currently completely swamped so haven’t had time to look at this any further, even though this seems like a big bug to me. It probably makes Wagtail 2.11 unusable for people who rely on those APIs.

If others want to take a look please feel free to – for me I’ll return to this on Friday 19th of Feb, one week from now.

thibaudcolascommented, Jan 26, 2021

Thank you for the report @favoyang! It’s pretty clear from your description that something is broken since the Webpack 4 config changes, although it’s unclear to me what exactly.

Investigating this with a dummy extension, the issue seems to be with the draftail.js bundle being executed twice – once before the plugin loads, and once after. That second run will reset the client-side registry of Draftail plugins, thereby causing the crash when the editor attempts to display the correct plugin’s source component.

I’ll spend more time on this tomorrow to figure out why the Webpack switch caused this, and what options we have to fix it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting started with extensions - Draftail
Do you want to write extensions for Draftail? This is a good place to start. I'll first try to discourage you from doing...
Read more >
Wagtail & Django issues - python - Stack Overflow
I've found that ManifestStaticFilesStorage doesn't always work correctly depending on how the templates are constructed and the static files ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found