Topic: Errors rendering "Select" component from mdb-ui-kit. TypeError: Illegal invocation
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.
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 2 years ago
I understand. I noticed Storybook.js executes "DOMContentLoaded" multiple times. I will try to circumvent that.
Thank you for the response.
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- ForumUser: 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