Nie można przekonwertować obiektu na błąd wartości pierwotnej w aplikacji reagującej?

Pracuję nad prostą aplikacją rozruchową z reakcją sprężynową, ale z powodu problemu z GitHub odtwarzam pliki startowe aplikacji za pomocą IntelliJ i instaluję moduły węzłów, korzystając z danych zależności pliku package.json poprzedniej aplikacji.

Jeśli użyję zwijanego paska nawigacyjnego (pasek hamburgera -> responsywne paski nawigacyjne, które zwiną się w widoku mobilnym) i kliknę przycisk hamburgera, aby wyświetlić łącza nawigacyjne, wyświetli się poniższy błąd. Ale wszystkie te rzeczy poszły dobrze w poprzedniej aplikacji.

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

Najpierw usuń jQuery:

npm remove jquery

a następnie zainstaluj ponownie:

npm install jquery@~3.4.1

Miałem ten sam problem w opracowywanym przeze mnie projekcie Rails 6. Korzystam z bootstrap 4.4.1 i miałem dokładnie taki sam problem z moim zwijanym paskiem nawigacyjnym: pasek nawigacyjny zwija się, ale przycisk hamburgera, który pojawia się przy zwijaniu, nie był klikalny.

Rozwiązanie: obniż klasę jquery z 3.5.0 do 3.4.1. Na razie nie analizowałem rzeczywistej przyczyny błędu.

Aby dodać więcej szczegółów, wersja jquery powinna zostać zaktualizowana w package.jsonzależnościach i nie zapomnij uruchomić yarn install --check-filespo wykonaniu tej zmiany, aby zastosować zmianę.

Jest to związane z jQuery 3.5.0.Przełomową zmianą, która wpływa na wiele wtyczek. Tymczasowe przywrócenie poprzedniej wersji jQuery (like 3.4.1)rozwiązało problem.

lub

Znajdź swój pakiet Jquery w projekcie node_modules, usuń go i zainstaluj ponownie za pomocą tego polecenia

npm install jquery@~3.4.1

Źródło: jQuery Issue # 4665

Usunąłem jQuery za pomocą yarn remove jquery, a następnie zainstalowałem, yarn add [email protected]aby obniżyć wersję.

Problem polegał na tym, że w pliku yarn.lock nadal znaleziono wersję 3.5.0, dlatego błąd nadal występował.

Musiałem dodać w pakiecie.json, poza "dependencies"sekcją:

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

Wreszcie błąd zniknął.

Użyłem już jquery 3.41, ale problem pojawił się po przeniesieniu plików projektu do innego projektu, więc w przypadku korzystania z jquery 3.41 nadal spróbuj sprawdzić, uruchamiając polecenia,

1) npm usuń jquery

2) npm zainstaluj jquery@~3.4.1

Te polecenia rozwiązały mój problem.

Otwórz package.jsoni zamień

"jquery": "^3.4.1",

z

"jquery": "3.4.1"

Źródło

Usuń pakiet Jquery z node_modulesfolderu.

Następnie zainstaluj ponownie za pomocą tego polecenia.

npm install jquery@3.5.0