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.
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.
TypeError: Cannot convert object to primitive value
HTMLDivElement.<anonymous>
C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:346
343 | ...typeof config === 'object' && config ? config : {}
344 | }
345 |
> 346 | if (!data && _config.toggle && /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 < length; i++ ) {
> 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 ) {
> 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) {
> 337 | return this.each(function () {
| ^ 338 | const $this = $(this)
339 | let data = $this.data(DATA_KEY)
340 | const _config = {
View compiled
HTMLDivElement.<anonymous>
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()
> 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 < length; i++ ) {
> 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 ) {
> 203 | return jQuery.each( this, callback );
| ^ 204 | },
205 |
206 | map: function( callback ) {
View compiled
HTMLButtonElement.<anonymous>
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 |
> 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 |
> 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
> 5232 | return typeof jQuery !== "undefined" && 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.```
I had the same problem in a rails 6 project I was developing. I am using bootstrap 4.4.1 and had the exact same problem with my collapsing navigation bar: The navbar collapses but the hamburger button which appears on collapse was not clickable.
The solution: Downgrade jquery from 3.5.0 to 3.4.1. I did not look into the actual reason of the error for now.
To add more details, the jquery version should be updated in package.json dependencies and don't forget to run yarn install --check-files after you do this for the change to be applied.
This is related to jQuery 3.5.0. It is a breaking change that affects many plugins. Temporarily reverting to a previous version of jQuery (like 3.4.1) fixed the issue for me.
or
Locate your Jquery package in project node_modules, delete it and reinstall it using this command
npm install jquery@~3.4.1
Source: jQuery Issue #4665
First, remove jQuery:
npm remove jquery
and then reinstall it:
npm install jquery@~3.4.1
Remove Jquery package from node_modules folder.
Then re-install it using this command.
npm install jquery@3.5.0
I removed jQuery with yarn remove jquery, and then installed yarn add jquery@3.4.1 to downgrade.
The issue was that 3.5.0 was still found in the yarn.lock file, thus the error was still occurring.
I had to add in package.json, outside of the "dependencies" section:
"resolutions": { "jquery": "3.4.1" },
Finally the error was gone.
I already used jquery 3.41 but I got the issue after moving my project files to another project so in a case of using jquery 3.41 still try and see by running the commands of ,
1)npm remove jquery
2)npm install jquery@~3.4.1
These commands solved my problem.
Like many others have said, I had the same issue with thanks to jquery 3.5.0.
It appears that this is now fixed with 3.5.1