Search code examples
reactjsgetuikit

Why are data-uk attributes not applied when using UIkit (from getuikit) in React?

I recently noticed that, for some reason, UIkit was no longer picking up the data-uk-dropdown attributes in my React project. E.g. this no longer worked

  <div data-uk-dropdown="mode: click">
    <ul className="uk-nav uk-dropdown-nav">
        <li>One</li>
        <li>Two</li>
    </ul>
  </div>

I also noticed that in the UIkit boot function in the UIkit core, the applyChildListMutation handler was installed but never called back. This leads me to believe that the code to initialize UIkit was not playing nicely with React (anymore).

Solution

  • The actual thing that was missing was this import statement: import UIkit from 'uikit';. You need this even when you are not referencing UIkit in the code (it probably triggers the loading of the required library code).