WEBPACK_IMPORTED_MODULE_2___default.a is undefined

Ser5

I'm trying to add super-duper custom modal based on Bootstrap to a flarum page. As I'm trying to implement my very own markup, I decided to avoid EditCustomFooterModal.

I found this page and tried to use it as a base:

app.initializers.add('fof-custom-footer', () => {
    extend(ForumApplication.prototype, 'mount', () => {
        const footer = document.createElement('div');
    });
});

But after I reload page I see an error in the browser console:

fof-custom-footer failed to initialize fireApplicationError.ts:11:10
TypeError: flarum_forum_components_ForumApplication__WEBPACK_IMPORTED_MODULE_2___default.a is undefined
    js index.js:54
    boot Application.tsx:281
    boot Application.tsx:279
    <anonymous> 14:215

Error points to this line:

extend(ForumApplication.prototype, 'mount', () => {

What am I doing wrong?

Justoverclock

why you not use the native flarum modals?

https://docs.flarum.org/extend/interactive-components/#modals

Ser5

Justoverclock I probably can use it. But now it's more like a general question: "How to insert custom markup into Flarum code".

Ser5

Justoverclock I honestly don't understand how to use native modals.

I copypasted the example code from that page, then in other code call it:

app.modal.show(CustomModal, {});

And got en error:

Uncaught TypeError: this.attrs.animateShow is not a function
    oncreate Modal.tsx:114
    callHook render.js:30
    exports render.js:971
    mount mount-redraw.js:45
    mount ForumApplication.tsx:120
    boot Application.tsx:303
    <anonymous> 22:247

Here is the code from Modal.tsx where the error is thrown:

  oncreate(vnode: Mithril.VnodeDOM<ModalAttrs, this>) {
    super.oncreate(vnode);

    this.attrs.animateShow(() => this.onready());
  }

clarkwinkelmann

Ser5 what's your CustomModal declaration? You might not be extending the base class correctly.

Ser5

clarkwinkelmann I just dragged it from the example as is:

import Modal from 'flarum/common/components/Modal';

export default class CustomModal extends Modal {
  // True by default, dictates whether the modal can be dismissed by clicking on the background or in the top right corner.
  static isDismissible = true;

  className() {
    // Custom CSS classes to apply to the modal
    return 'custom-modal-class';
  }

  title() {
    // Content to show in the modal's title bar
    return <p>Custom Modal</p>;
  }

  content() {
    // Content to show in the modal's body
    return <p>Hello World!</p>;
  }

  onsubmit() {
    // If your modal contains a form, you can add form processing logic here.
  }
}