无法在React应用程序中将对象转换为原始值错误?


27

我正在开发一个简单的react-spring引导应用程序,但是由于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.```

我今天才开始收到此错误,想知道新发布的内容是否有些奇怪?
matgargano

Answers:



24

在开发的Rails 6项目中,我遇到了同样的问题。我使用的是Bootstrap 4.4.1,并且我的折叠导航栏也出现了完全相同的问题:导航栏折叠了,但是折叠上出现的汉堡按钮无法单击。

解决方案:将jquery从3.5.0降级到3.4.1。我暂时没有调查错误的实际原因。

要添加更多详细信息,应该在package.json依赖项中更新jquery版本,并且yarn install --check-files在执行此操作以应用更改后不要忘记运行。


我目前正在使用jQuery 3.4.1
Hasindu Dahanayake

FWIW这对我也不起作用。我使用的WordPress使用的是旧的1.x版本,我换成了3.4.1,但仍然看到问题。我认为是相当新的,因为有过去一小时内非常相似的职位相关的东西(见stackoverflow.com/questions/61177140/...
matgargano

在项目node_modules中找到您的Jquery软件包,将其删除并使用此命令重新安装,npm install jquery@~4.3.1
Sylvernus Akubo

我正在拉入jQuery的2个版本,忽略上面的内容,一切都很好!
matgargano,

我希望我可以多次
投票

14

这与jQuery 3.5.0.这是一个重大变化,会影响许多插件。暂时恢复jQuery (like 3.4.1)为我的早期版本。

要么

在项目中找到您的Jquery包node_modules,将其删除并使用此命令重新安装

npm install jquery@~3.4.1

资料来源:jQuery Issue#4665


3

我使用删除了jQuery yarn remove jquery,然后安装yarn add jquery@3.4.1降级了。

问题是仍然在yarn.lock文件中找到3.5.0,因此仍在发生错误。

我必须在该"dependencies"部分之外添加package.json :

"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"

资源


1
我的package.json文件中有最高选项,但仍然出现错误。将其更改为无尖号的选项并重新编译资产对我来说是固定的。谢谢!
Oranges13

1
@ Oranges13我很高兴知道我可以帮助某人!和平!
xameeramir

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.