[BUG] Sidebar not working correctly with React.js on Vite

[MikhaelMounay]

This is a very similar bug discussed in this issue.
#1570

I working on a web application with AdminLTE 3 and React.js 18 on Vite 5.
The sidebar works fine without adding any code on Google Chrome and Brave. However, this error persists on Microsoft Edge (Chromium based) where the buttons of the tree view are not working.

If I use this snippet,

export function loadTreeview() {
    $('[data-widget="treeview"]').each(function () {
        if ($(this).data('treeview-init') === undefined) {
            $(this).Treeview('init');
            $(this).data('treeview-init', true);
        }
    });
}

MS Edge works fine, but Google Chrome & Brave don't work as expected where the menus expand only but don't collapse.

Anyone has an idea ?!
Thank you in advance!

[sact1909]

any progress or work around yo handle this problem???

[sact1909]

@MikhaelMounay after a long research and base on the issue you tagged
this was my solution..
ensure you have the jQuery imported correctly

import $ from 'jquery';

this is my AdminLTE setup

import 'admin-lte/dist/css/adminlte.css';
import 'admin-lte/plugins/fontawesome-free/css/all.css';
import 'admin-lte';

this is how my entry-client.tsx looks, before calling the function hydrateRoot, I'm setting the window.jQuery prop to the jquery instance $

import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import { hydrateRoot } from 'react-dom/client';
import { StrictMode } from 'react';

import $ from 'jquery';

import 'admin-lte/dist/css/adminlte.css';
import 'admin-lte/plugins/fontawesome-free/css/all.css';
import 'admin-lte/dist/js/adminlte.js';

const rootElement = document.getElementById('root');
if (rootElement) {
  window.jQuery = $;
  hydrateRoot(
    rootElement,
    <StrictMode>
      <Router>
        <App />
      </Router>
    </StrictMode>,
  );
}

both jQuery and AdminLTE are imported in my entry-client.tsx (I'm using SSR with TypeScript) in case you are using CSR with or without typescript main.tsx/main.jsx

and this is my Sidebar.tsx component
before the code of you component you must declare this, you can even have in a separated file If you want
for me having in that place is not a problem.

declare global {
  interface Window {
    jQuery: JQueryStatic;
  }
  interface JQuery {
    Treeview(option: string): JQuery;
  }
}

and inside your component, using the useEffect hook will help you...
with this code you will also solve another problem, you will avoid to initialize the
Treeview twice because of the Strict mode.. that works for me perfectly

useEffect(() => {
  const initializeTreeWidgets = () => {
    if (window.jQuery) {
      const $ = window.jQuery;

      // Initialize the tree widget (ensure Tree is callable)
      const trees = $('[data-widget="treeview"]:not(.initialized)');
      
      if (trees.length > 0) {
        trees.each(function () {
          try {
            // Initialize the widget (AdminLTE Treeview)
            $(this).Treeview('init'); 
            // Mark it as initialized by adding a class or data attribute
            $(this).addClass('initialized');
            console.log('Initialized Treeview:', this);
          } catch (error) {
            console.log('Error initializing Treeview widget:', error);
          }
        });
      }
    }
  };

  initializeTreeWidgets();

  return () => {
  };
}, []); // Empty dependency array ensures this effect runs once on mount