title: Cannot convert object to primitive value error in react application?
body: <p>I'm developing a simple react-spring boot application, but because of a GitHub issue I recreate my application starter files using IntelliJ and installed the node modules using the previous application's package.json file's dependency data.</p>
  
  <p>If I use a collapsing navigation bar (hamburger bar-->responsive navbars which collapse in the mobile view) and click the hamburger button to see the nav links it gives me the below error. But all those things went well in the previous application.</p>
  
  <pre><code>TypeError: Cannot convert object to primitive value
  HTMLDivElement.&lt;anonymous&gt;
  C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:346
    343 |   ...typeof config === 'object' &amp;&amp; config ? config : {}
    344 | }
    345 | 
  &gt; 346 | if (!data &amp;&amp; _config.toggle &amp;&amp; /show|hide/.test(config)) {
        | ^  347 |   _config.toggle = false
    348 | }
    349 | 
  View compiled
  Function.each
  C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:381
    378 | if ( isArrayLike( obj ) ) {
    379 |     length = obj.length;
    380 |     for ( ; i &lt; length; i++ ) {
  &gt; 381 |         if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
        | ^  382 |            break;
    383 |         }
    384 |     }
  View compiled
  jQuery.fn.init.each
  C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:203
    200 | 
    201 | // Execute a callback for every element in the matched set.
    202 | each: function( callback ) {
  &gt; 203 |     return jQuery.each( this, callback );
        | ^  204 | },
    205 | 
    206 | map: function( callback ) {
  View compiled
  jQuery.fn.init._jQueryInterface [as collapse]
  C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:337
    334 | }
    335 | 
    336 | static _jQueryInterface(config) {
  &gt; 337 |   return this.each(function () {
        | ^  338 |     const $this   = $(this)
    339 |     let data      = $this.data(DATA_KEY)
    340 |     const _config = {
  View compiled
  HTMLDivElement.&lt;anonymous&gt;
  C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:385
    382 |     const $target = $(this)
    383 |     const data    = $target.data(DATA_KEY)
    384 |     const config  = data ? 'toggle' : $trigger.data()
  &gt; 385 |     Collapse._jQueryInterface.call($target, config)
    386 |   })
    387 | })
    388 | 
  View compiled
  Function.each
  C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:381
    378 | if ( isArrayLike( obj ) ) {
    379 |     length = obj.length;
    380 |     for ( ; i &lt; length; i++ ) {
  &gt; 381 |         if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
        | ^  382 |            break;
    383 |         }
    384 |     }
  View compiled
  jQuery.fn.init.each
  C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:203
    200 | 
    201 | // Execute a callback for every element in the matched set.
    202 | each: function( callback ) {
  &gt; 203 |     return jQuery.each( this, callback );
        | ^  204 | },
    205 | 
    206 | map: function( callback ) {
  View compiled
  HTMLButtonElement.&lt;anonymous&gt;
  C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:381
    378 | const selector = Util.getSelectorFromElement(this)
    379 | const selectors = [].slice.call(document.querySelectorAll(selector))
    380 | 
  &gt; 381 | $(selectors).each(function () {
        | ^  382 |   const $target = $(this)
    383 |   const data    = $target.data(DATA_KEY)
    384 |   const config  = data ? 'toggle' : $trigger.data()
  View compiled
  HTMLDocument.dispatch
  C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:5428
    5425 | event.handleObj = handleObj;
    5426 | event.data = handleObj.data;
    5427 | 
  &gt; 5428 | ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||
         | ^  5429 |  handleObj.handler ).apply( matched.elem, args );
    5430 | 
    5431 | if ( ret !== undefined ) {
  View compiled
  HTMLDocument.elemData.handle
  C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/webapp/front-end/node_modules/jquery/dist/jquery.js:5232
    5229 | 
    5230 |        // Discard the second event of a jQuery.event.trigger() and
    5231 |        // when an event is called after a page has unloaded
  &gt; 5232 |        return typeof jQuery !== "undefined" &amp;&amp; jQuery.event.triggered !== e.type ?
         | ^  5233 |          jQuery.event.dispatch.apply( elem, arguments ) : undefined;
    5234 |    };
    5235 | }
  View compiled
  This screen is visible only in development. It will not appear if the app crashes in production.
  Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.```
  </code></pre>