Topic: Errors rendering "Select" component from mdb-ui-kit. TypeError: Illegal invocation

shoplanddev free asked 1 year ago


I am trying to get this working with Storybook.js. I want to instantiate the Select component and I keep coming across errors. I need assistance with passing the proper arguments.

Expected behavior

Instantiate Select component from mdb-ui-kit PRO version and render in the storybook.js iframe

Actual behavior

TypeError: Cannot read properties of null (reading 'insertBefore')

Resources (screenshots, code snippets etc.)

import { Select } from 'mdb-ui-kit';
...
let selectElement = document.createElement('select');

['1', '2', '3', '4', '5'].forEach( element => {
        const opt = document.createElement('option');
        opt.innerHTML = opt.value = element;
        selectElement.add(opt);
    });

let select = new Select(selectElement, {}); //expecting to use default options

I notice this errors because this._element.parentNode = null meaning there is no parent element.

When I add a wrapper div

const div = document.createElement('div');
div.appendChild(selectElement);

I immediately get TypeError: Illegal invocation.


Grzegorz Bujański staff answered 1 year ago


Unfortunately, we do not support MDB Standard integration with Storybook. Such integration should be done on your own. In your case, it looks like you try init Select before append elements. Also You can try do this after DOMContentLoaded event:

  document.addEventListener('DOMContentLoaded', () => {
    // create native select
    // append created element
    // init select
  });

shoplanddev free commented 1 year ago

I understand. I noticed Storybook.js executes "DOMContentLoaded" multiple times. I will try to circumvent that.

Thank you for the response.


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: MacBook Pro 15\"
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: Yes
  • Provided link: No