Não é possível converter o objeto em erro de valor primitivo no aplicativo de reação?


27

Estou desenvolvendo um aplicativo de inicialização simples, mas por causa de um problema no GitHub, recrio meus arquivos iniciais do aplicativo usando o IntelliJ e instalei os módulos de nó usando os dados de dependência do arquivo package.json do aplicativo anterior.

Se eu usar uma barra de navegação em colapso (barra de hambúrguer -> barras de navegação responsivas que colapsam na visualização móvel) e clique no botão hambúrguer para ver os links de navegação, isso indica o erro abaixo. Mas todas essas coisas foram bem na aplicação anterior.

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

comecei a receber esse erro hoje mesmo, me pergunto se é alguma estranheza em uma nova versão de alguma coisa?
matgargano 12/04

Respostas:


57

Primeiro, remova o jQuery:

npm remove jquery

e reinstale-o:

npm install jquery@~3.4.1

Isso consertou para mim. Passo uma hora inteira pensando nisso o que aconteceu. :( Muito obrigado!
DaveK

Obrigado, foi o mesmo que fiz no final para resolver esse problema.
Hasindu Dahanayake

11
Voto positivo, mas gostaria de acrescentar o que é necessário para reiniciar / reconstruir. Ou npm run devreinicie e novamente npm run watch.
Veljko Stefanovic

24

Eu tive o mesmo problema em um projeto rails 6 que estava desenvolvendo. Estou usando o bootstrap 4.4.1 e tive exatamente o mesmo problema com a minha barra de navegação em colapso: a barra de navegação é fechada, mas o botão de hambúrguer que aparece no recolhimento não era clicável.

A solução: faça o downgrade do jquery de 3.5.0 para 3.4.1. Por enquanto, não analisei o motivo real do erro.

Para adicionar mais detalhes, a versão do jquery deve ser atualizada em package.jsondependências e não se esqueça de executar yarn install --check-filesdepois que você fizer isso para que a alteração seja aplicada.


Atualmente estou usando jquery 3.4.1
Hasindu Dahanayake

FWIW isso também não está funcionando para mim. Eu estava usando o WordPress, que usa uma versão antiga 1.x, troquei pela 3.4.1 e ainda estou vendo o problema. Eu acho que está relacionado a algo bastante novo, pois há postagens muito semelhantes na última hora (consulte stackoverflow.com/questions/61177140/… )
matgargano

Localize o pacote Jquery no projeto node_modules, exclua-o e reinstale-o usando este comando, npm install jquery@~4.3.1
Sylvernus Akubo

Eu estava puxando em duas versões do jQuery, ignore o acima, tudo é bom!
matgargano 13/04

Eu gostaria de poder voto esta resposta várias vezes
curiousMinded

14

Isso está relacionado a jQuery 3.5.0.É uma mudança de quebra que afeta muitos plugins. A reversão temporária para uma versão anterior jQuery (like 3.4.1)do problema corrigido para mim.

ou

Localize o seu pacote Jquery no projeto node_modules, exclua-o e reinstale-o usando este comando

npm install jquery@~3.4.1

Fonte: Edição jQuery # 4665


3

Eu removi o jQuery e yarn remove jquery, em seguida, instalei o yarn add jquery@3.4.1downgrade.

O problema era que o 3.5.0 ainda foi encontrado no arquivo yarn.lock, portanto, o erro ainda estava ocorrendo.

Eu tive que adicionar no package.json, fora da "dependencies"seção:

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

Finalmente, o erro se foi.


3

Eu já usei o jquery 3.41, mas obtive o problema depois de mover meus arquivos de projeto para outro projeto, portanto, no caso de usar o jquery 3.41, ainda tente e veja executando os comandos de,

1) npm remove jquery

2) npm install jquery@~3.4.1

Esses comandos resolveram meu problema.


2

Abra package.jsone substitua

"jquery": "^3.4.1",

com

"jquery": "3.4.1"

Fonte


11
Eu tinha a opção superior no meu arquivo package.json e ainda estava tendo o erro. Alterá-lo para a opção sem o sinal de intercalação e recompilar os recursos o corrigiu para mim. Obrigado!
Oranges13

11
@ Oranges13 Fico muito feliz em saber que eu poderia ajudar alguém! Paz!
xameeramir 20/04

0

Remova o pacote Jquery da node_modulespasta.

Em seguida, reinstale-o usando este comando.

npm install jquery@3.5.0
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.