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 browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.```
javascript jquery reactjs bootstrap-4 Hasindu Dahanayake
la source
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
Edwin Enriquez
la source
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.

Senol Feldmann
la source
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

Sylvernus Akubo
la source
3

J'ai supprimé jQuery avec yarn remove jquery, puis installé yarn add [email protected]pour 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.

Andrei Erdoss
la source
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.

Hasindu Dahanayake
la source
2

Ouvrir package.jsonet remplacer 

"jquery": "^3.4.1",

avec 

"jquery": "3.4.1"

La source

xameeramir
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
Kmarlon Pereira
la source