Не удается преобразовать объект в ошибку примитивного значения в реагирующем приложении?

27

Я разрабатываю простое загрузочное приложение реагировать-пружинно, но из-за проблемы с GitHub я воссоздаю начальные файлы приложения с помощью IntelliJ и устанавливаю модули узлов с использованием данных зависимостей файла package.json предыдущего приложения.

Если я использую сворачивающуюся панель навигации (панель гамбургеров -> отзывчивые панели навигации, которые сворачиваются в мобильном представлении) и нажимаю кнопку гамбургера, чтобы увидеть навигационные ссылки, это выдает мне следующую ошибку. Но все это прошло хорошо в предыдущем приложении.

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.```
Хасинду Даханаяке
источник
Я начал получать эту ошибку только сегодня, интересно, это какая-то странность в новом выпуске чего-то?
Матгаргано

Ответы:

57

Сначала удалите jQuery:

npm remove jquery

а затем переустановите его:

npm install jquery@~3.4.1
Эдвин Энрикес
источник
Это исправило это для меня. Я потратил целый час на то, чтобы узнать, что случилось. :( Спасибо большое!
DaveK
Спасибо, это было то же самое, что я сделал в конце, чтобы решить этот вопрос.
Хасинду Даханаяке
1
Upvoted, но я хотел бы добавить, что необходимо для перезапуска / перестройки. Либо npm run devили перезагрузите и снова npm run watch.
Велько Стефанович
25

У меня была такая же проблема в проекте rails 6, который я разрабатывал. Я использую bootstrap 4.4.1, и у меня была точно такая же проблема с моей сворачивающейся панелью навигации: панель навигации сворачивается, но кнопка гамбургера, которая появляется при свертывании, не была нажата.

Решение: понизить jquery с 3.5.0 до 3.4.1. Я пока не изучал фактическую причину ошибки.

Чтобы добавить больше деталей, версия jquery должна быть обновлена ​​в package.jsonзависимости, и не забудьте запустить yarn install --check-filesпосле того, как вы сделаете это, чтобы изменения вступили в силу.

Сенол Фельдманн
источник
Я в настоящее время использую jquery 3.4.1
Hasindu Dahanayake
FWIW это не работает для меня тоже. Я использовал WordPress, который использует какую-то старую версию 1.x, я сменил на 3.4.1 и все еще вижу проблему. Я думаю , что это связано с чем - то довольно новое , поскольку есть очень похожие должности в последний час (см stackoverflow.com/questions/61177140/... )
matgargano
Найдите свой пакет Jquery в проекте node_modules, удалите его и переустановите с помощью этой команды, npm install jquery@~4.3.1
Sylvernus Akubo
Я тянул на 2 версии jQuery, игнорируй выше, все хорошо!
Матгаргано
Я хотел бы, чтобы я мог проголосовать за этот ответ несколько раз
curiousMinded
14

Это связано с тем, jQuery 3.5.0.что это серьезное изменение, затрагивающее многие плагины. Временное возвращение к предыдущей версии jQuery (like 3.4.1)исправило проблему для меня.

или

Найдите свой пакет Jquery в проекте node_modules, удалите его и переустановите с помощью этой команды

npm install jquery@~3.4.1

Источник: JQuery № 4665

Сильвернус Акубо
источник
3

Я удалил JQuery с yarn remove jquery, а затем установилyarn add jquery@3.4.1 для понижения.

Проблема заключалась в том, что 3.5.0 все еще был найден в файле yarn.lock, поэтому ошибка все еще происходила.

Мне пришлось добавить в package.json, вне "dependencies"раздела:

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

Наконец ошибка исчезла.

Андрей Эрдосс
источник
3

Я уже использовал jquery 3.41, но у меня возникла проблема после перемещения файлов моего проекта в другой проект, поэтому в случае использования jquery 3.41 все еще попробуйте и посмотрите, запустив команды:

1) Npm удалить JQuery

2) npm установить jquery@~3.4.1

Эти команды решили мою проблему.

Хасинду Даханаяке
источник
2

Открыть package.jsonи заменить

"jquery": "^3.4.1",

с

"jquery": "3.4.1"

Источник

xameeramir
источник
1
У меня была опция top в моем файле package.json, но ошибка все еще была. Сменив его на опцию без каретки и перекомпиляции ресурсов, я все исправил. Спасибо!
Апельсины 13
1
@ Oranges13 Я так счастлив узнать, что могу кому-то помочь! Мир!
xameeramir
0

Удалить пакет Jquery из node_modules папки.

Затем переустановите его с помощью этой команды.

npm install jquery@3.5.0
Кмарлон Перейра
источник