Kann Objekt in Reaktionsanwendung nicht in primitiven Wertfehler konvertieren?

Ich entwickle eine einfache React-Spring-Boot-Anwendung, aber aufgrund eines GitHub-Problems erstelle ich meine Anwendungsstarterdateien mit IntelliJ neu und installiere die Knotenmodule mit den Abhängigkeitsdaten der Datei package.json der vorherigen Anwendung.

Wenn ich eine reduzierende Navigationsleiste verwende (Hamburger-Leiste -> reaktionsfähige Navigationsleisten, die in der mobilen Ansicht kollabieren) und auf die Hamburger-Schaltfläche klicke, um die Navigationslinks anzuzeigen, wird der folgende Fehler angezeigt. Aber all diese Dinge sind in der vorherigen Anwendung gut gelaufen.

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.```

Entfernen Sie zunächst jQuery:

npm remove jquery

und dann neu installieren:

npm install jquery@~3.4.1

Ich hatte das gleiche Problem in einem Rails 6-Projekt, das ich entwickelte. Ich verwende Bootstrap 4.4.1 und hatte genau das gleiche Problem mit meiner reduzierten Navigationsleiste: Die Navigationsleiste wird ausgeblendet, aber die Hamburger-Schaltfläche, die beim Ausblenden angezeigt wird, war nicht anklickbar.

Die Lösung: Downgrade der Abfrage von 3.5.0 auf 3.4.1. Ich habe den tatsächlichen Grund des Fehlers vorerst nicht untersucht.

Um weitere Details hinzuzufügen, sollte die jquery-Version in package.jsonAbhängigkeiten aktualisiert werden. Vergessen yarn install --check-filesSie nicht, sie anschließend auszuführen , damit die Änderung angewendet wird.

Dies hängt mit jQuery 3.5.0.Es handelt sich um eine bahnbrechende Änderung, die viele Plugins betrifft. Das vorübergehende Zurücksetzen auf eine frühere Version von hat jQuery (like 3.4.1)das Problem für mich behoben.

oder

Suchen Sie Ihr Jquery-Paket im Projekt node_modules, löschen Sie es und installieren Sie es mit diesem Befehl neu

npm install jquery@~3.4.1

Quelle: jQuery Issue # 4665

Ich habe jQuery mit entfernt yarn remove jqueryund dann yarn add [email protected]zum Downgrade installiert .

Das Problem war, dass 3.5.0 immer noch in der Datei yarn.lock gefunden wurde, sodass der Fehler immer noch auftrat.

Ich musste in package.json außerhalb des "dependencies"Abschnitts hinzufügen :

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

Endlich war der Fehler weg.

Ich habe bereits jquery 3.41 verwendet, aber ich habe das Problem erhalten, nachdem ich meine Projektdateien in ein anderes Projekt verschoben habe. Versuchen Sie also bei Verwendung von jquery 3.41 immer noch, die Befehle von, auszuführen.

1) npm jquery entfernen

2) npm installiere jquery@~3.4.1

Diese Befehle haben mein Problem gelöst.

Öffnen package.jsonund ersetzen

"jquery": "^3.4.1",

mit

"jquery": "3.4.1"

Quelle

Entfernen Sie das Jquery-Paket aus dem node_modulesOrdner.

Installieren Sie es dann mit diesem Befehl erneut.

npm install jquery@3.5.0