¿No se puede convertir el objeto en un error de valor primitivo en la aplicación de reacción?

27

Estoy desarrollando una aplicación simple de arranque react-spring, pero debido a un problema de GitHub, recreé los archivos de inicio de mi aplicación usando IntelliJ e instalé los módulos de nodo usando los datos de dependencia del archivo package.json de la aplicación anterior.

Si uso una barra de navegación colapsada (barra de hamburguesa -> barras de navegación receptivas que colapsan en la vista móvil) y hago clic en el botón de hamburguesa para ver los enlaces de navegación, me da el siguiente error. Pero todas esas cosas salieron bien en la aplicación 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 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
fuente
Comencé a recibir este error hoy mismo, ¿me pregunto si es algo extraño en un nuevo lanzamiento de algo?
matgargano

Respuestas:

57

Primero, elimine jQuery:

npm remove jquery

y luego reinstalarlo:

npm install jquery@~3.4.1
Edwin Enriquez
fuente
Esto me lo arregló. Me paso una hora entera preguntándome qué pasó. :( Muchas gracias!
DaveK
Gracias, esto fue lo mismo que hice al final para resolver este asunto.
Hasindu Dahanayake
1
Upvoted, pero me gustaría agregar que es necesario para reiniciar / reconstruir. Ya sea npm run devo reiniciar y de nuevo npm run watch.
Veljko Stefanovic
25

Tuve el mismo problema en un proyecto de rails 6 que estaba desarrollando. Estoy usando Bootstrap 4.4.1 y tuve exactamente el mismo problema con mi barra de navegación colapsada: la barra de navegación colapsa pero el botón de hamburguesa que aparece en el colapso no era cliqueable.

La solución: Downgrade jquery de 3.5.0 a 3.4.1. No examiné la razón real del error por ahora.

Para agregar más detalles, la versión de jquery debe actualizarse en package.jsondependencias y no olvide ejecutar yarn install --check-filesdespués de hacer esto para que se aplique el cambio.

Senol Feldmann
fuente
Actualmente estoy usando jquery 3.4.1
Hasindu Dahanayake
FWIW esto tampoco funciona para mí. Estaba usando WordPress que usa alguna versión antigua de 1.x, cambié por 3.4.1 y todavía veo el problema. Creo que está relacionado con algo bastante nuevo, ya que hay publicaciones muy similares en la última hora (ver stackoverflow.com/questions/61177140/… )
matgargano
Localice su paquete Jquery en el proyecto node_modules, elimínelo y vuelva a instalarlo con este comando, npm install jquery@~4.3.1
Sylvernus Akubo
Estaba sacando 2 versiones de jQuery, ignore lo anterior, ¡todo está bien!
matgargano
Desearía poder votar esta respuesta varias veces
curiosoMenado el
14

Esto está relacionado con jQuery 3.5.0.Es un cambio importante que afecta a muchos complementos. Revertir temporalmente a una versión anterior de jQuery (like 3.4.1)solucionó el problema para mí.

o

Localice su paquete Jquery en el proyecto node_modules, elimínelo y vuelva a instalarlo con este comando

npm install jquery@~3.4.1

Fuente: jQuery Issue # 4665

Sylvernus Akubo
fuente
3

Eliminé jQuery con yarn remove jquery, y luego lo instalé yarn add [email protected]para degradar.

El problema era que 3.5.0 todavía se encontraba en el archivo yarn.lock, por lo tanto, el error seguía ocurriendo.

Tuve que agregar en package.json, fuera de la "dependencies"sección:

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

Finalmente el error desapareció.

Andrei Erdoss
fuente
3

Ya usé jquery 3.41, pero tuve el problema después de mover mis archivos de proyecto a otro proyecto, por lo que en el caso de usar jquery 3.41, aún intente ver ejecutando los comandos de,

1) npm eliminar jquery

2) npm install jquery@~3.4.1

Estos comandos resolvieron mi problema.

Hasindu Dahanayake
fuente
2

Abrir package.jsony reemplazar 

"jquery": "^3.4.1",

con 

"jquery": "3.4.1"

Fuente

xameeramir
fuente
1
Tenía la mejor opción en mi archivo package.json y todavía tenía el error. Cambiarlo a la opción sin el cursor y recompilar activos lo arregló para mí. ¡Gracias!
Naranjas13
1
@ Oranges13 ¡Me alegra mucho saber que podría ayudar a alguien! ¡Paz!
xameeramir
0

Eliminar el paquete Jquery de la node_modulescarpeta.

Luego, vuelva a instalarlo con este comando.

npm install jquery@3.5.0
Kmarlon Pereira
fuente