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


27

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

sam zacząłem otrzymywać ten błąd dzisiaj, zastanawiam się, czy to dziwność w nowym wydaniu czegoś?
matgargano

Odpowiedzi:


55

Najpierw usuń jQuery:

npm remove jquery

a następnie zainstaluj ponownie:

npm install jquery@~3.4.1

Naprawiłem to dla mnie. Całą godzinę zastanawiam się, co się stało. :( Dziękuję bardzo!
DaveK

Dziękuję, to było to samo, co ostatecznie zrobiłem, aby rozwiązać tę sprawę.
Hasindu Dahanayake

1
Pozytywnie oceniany, ale chciałbym dodać, że jest potrzebny do ponownego uruchomienia / przebudowy. Albo npm run devalbo uruchom ponownie i ponownie npm run watch.
Veljko Stefanovic

24

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


Obecnie używam jquery 3.4.1
Hasindu Dahanayake

FWIW to też nie działa dla mnie. Korzystałem z WordPress, który używa starej wersji 1.x, zamieniłem na 3.4.1 i nadal widzę problem. Myślę, że ma to związek z czymś nowym, ponieważ w ciągu ostatniej godziny są bardzo podobne posty (patrz stackoverflow.com/questions/61177140/… )
matgargano,

Znajdź swój pakiet Jquery w projekcie node_modules, usuń go i zainstaluj ponownie za pomocą tego polecenia, npm install jquery@~4.3.1
Sylvernus Akubo

Wciągałem 2 wersje jQuery, zignoruj ​​powyższe, wszystko jest dobrze!
matgargano

Chciałbym móc wielokrotnie głosować za tą odpowiedzią
ciekawy,

14

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


3

Usunąłem jQuery za pomocą yarn remove jquery, a następnie zainstalowałem, yarn add jquery@3.4.1aby 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ął.


3

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.


2

Otwórz package.jsoni zamień

"jquery": "^3.4.1",

z

"jquery": "3.4.1"

Źródło


1
W moim pliku package.json miałem najwyższą opcję i nadal występował błąd. Zmiana go na opcję bez karetki i rekompilacja zasobów naprawiły to dla mnie. Dziękuję Ci!
Pomarańcze 13

1
@ Oranges13 Cieszę się, że mogę komuś pomóc! Pokój!
xameeramir

0

Usuń pakiet Jquery z node_modulesfolderu.

Następnie zainstaluj ponownie za pomocą tego polecenia.

npm install jquery@3.5.0
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.