Impossible de convertir l'objet en erreur de valeur primitive dans l'application React?


27

Je développe une simple application de démarrage react-spring, mais en raison d'un problème avec GitHub, je recrée mes fichiers de démarrage d'application à l'aide d'IntelliJ et installe les modules de nœud à l'aide des données de dépendance du fichier package.json de l'application précédente.

Si j'utilise une barre de navigation effondrée (barre de hamburger -> barres de navigation réactives qui s'effondrent dans la vue mobile) et cliquez sur le bouton hamburger pour voir les liens de navigation, cela me donne l'erreur ci-dessous. Mais tout cela s'est bien passé dans la demande précédente.

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 browsers developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.```

commencé à obtenir cette erreur juste aujourd'hui moi-même, je me demande si c'est une bizarrerie dans une nouvelle version de quelque chose?
matgargano

Réponses:


57

Tout d'abord, supprimez jQuery:

npm remove jquery

puis réinstallez-le:

npm install jquery@~3.4.1

Cela m'a arrangé. Je passe une heure entière à me demander ce qui s'est passé. :( Merci beaucoup!
DaveK

Merci, c'était la même chose que ce que j'ai fait à la fin pour résoudre ce problème.
Hasindu Dahanayake

1
Surévalué, mais je voudrais ajouter que c'est nécessaire pour redémarrer / reconstruire. Soit npm run devou redémarrez et encore npm run watch.
Veljko Stefanovic

25

J'ai eu le même problème dans un projet rails 6 que je développais. J'utilise bootstrap 4.4.1 et j'ai eu exactement le même problème avec ma barre de navigation effondrée: la barre de navigation s'effondre mais le bouton hamburger qui apparaît lors de l'effondrement n'était pas cliquable.

La solution: déclasser jquery de 3.5.0 à 3.4.1. Pour l'instant, je n'ai pas examiné la véritable raison de l'erreur.

Pour ajouter plus de détails, la version jquery doit être mise à jour dans les package.jsondépendances et n'oubliez pas de l'exécuter yarn install --check-filesaprès avoir fait cela pour que la modification soit appliquée.


J'utilise actuellement jquery 3.4.1
Hasindu Dahanayake

FWIW cela ne fonctionne pas non plus pour moi. J'utilisais WordPress qui utilise une ancienne version 1.x, j'ai échangé pour 3.4.1 et je vois toujours le problème. Je pense que c'est lié à quelque chose d'assez nouveau car il y a des articles très similaires au cours de la dernière heure (voir stackoverflow.com/questions/61177140/… )
matgargano

Localisez votre package Jquery dans le projet node_modules, supprimez-le et réinstallez-le à l'aide de cette commande, npm install jquery@~4.3.1
Sylvernus Akubo

Je tirais dans 2 versions de jQuery, ignorez ce qui précède, tout va bien!
matgargano

J'aimerais pouvoir voter à plusieurs reprises cette réponse
curiousMinded

14

Ceci est lié à jQuery 3.5.0.Il s'agit d'un changement de rupture qui affecte de nombreux plugins. Revenir temporairement à une version précédente de jQuery (like 3.4.1)résolu le problème pour moi.

ou

Localisez votre package Jquery dans le projet node_modules, supprimez-le et réinstallez-le à l'aide de cette commande

npm install jquery@~3.4.1

Source: jQuery numéro # 4665


3

J'ai supprimé jQuery avec yarn remove jquery, puis installé yarn add jquery@3.4.1pour rétrograder.

Le problème était que 3.5.0 était toujours trouvé dans le fichier yarn.lock, donc l'erreur se produisait toujours.

J'ai dû ajouter dans package.json, en dehors de la "dependencies"section:

"resolutions": { "jquery": "3.4.1" },

Enfin l'erreur a disparu.


3

J'ai déjà utilisé jquery 3.41 mais j'ai eu le problème après avoir déplacé mes fichiers de projet vers un autre projet, donc dans le cas d'utilisation de jquery 3.41, essayez toujours de voir en exécutant les commandes de,

1) npm supprimer jquery

2) npm install jquery@~3.4.1

Ces commandes ont résolu mon problème.


2

Ouvrir package.jsonet remplacer

"jquery": "^3.4.1",

avec

"jquery": "3.4.1"

La source


1
J'avais l'option supérieure dans mon fichier package.json et je rencontrais toujours l'erreur. Le changer pour l'option sans le curseur et recompiler les actifs l'a corrigé pour moi. Je vous remercie!
Oranges13

1
@ Oranges13 Ça me fait tellement plaisir de savoir que je pourrais aider quelqu'un! Paix!
xameeramir

0

Supprimez le package Jquery du node_modulesdossier.

Réinstallez-le ensuite à l'aide de cette commande.

npm install jquery@3.5.0
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.