反応アプリケーションでオブジェクトをプリミティブ値エラーに変換できませんか？

単純な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 browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.```

まず、jQueryを削除します。

npm remove jquery

そしてそれを再インストールします：

npm install jquery@~3.4.1

私が開発しているRails 6プロジェクトでも同じ問題がありました。ブートストラップ4.4.1を使用していて、ナビゲーションバーの折りたたみにまったく同じ問題がありました。ナビゲーションバーは折りたたまれていますが、折りたたみ時に表示されるハンバーガーボタンはクリックできませんでした。

解決策：jqueryを3.5.0から3.4.1にダウングレードします。今のところ、エラーの実際の理由については調べていません。

詳細を追加するには、jqueryのバージョンをpackage.json依存関係で更新しyarn install --check-files、変更を適用するためにこれを実行した後に実行することを忘れないでください。

これはjQuery 3.5.0.、多くのプラグインに影響する重大な変更です。一時的に以前のバージョンに戻すとjQuery (like 3.4.1)、問題が解決しました。

または

プロジェクトnode_modulesでJqueryパッケージを見つけて削除し、このコマンドを使用して再インストールします

npm install jquery@~3.4.1

出典：jQuery＃4665

でjQueryを削除してから、ダウングレードするためにyarn remove jqueryインストールyarn add jquery@3.4.1しました。

問題は、yarn.lockファイルに3.5.0がまだ見つかっているため、エラーが引き続き発生していたことです。

"dependencies"セクションの外に、package.jsonを追加する必要がありました。

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

ようやくエラーはなくなりました。

私はすでにjquery 3.41を使用していますが、プロジェクトファイルを別のプロジェクトに移動した後に問題が発生したため、jquery 3.41を使用している場合でも、のコマンドを実行してみてください。

1）npmはjqueryを削除します

2）npmインストールjquery@~3.4.1

これらのコマンドは私の問題を解決しました。

開いpackage.jsonて交換

"jquery": "^3.4.1",

と

"jquery": "3.4.1"

ソース

node_modulesフォルダーからJqueryパッケージを削除します。

次に、このコマンドを使用して再インストールします。

npm install jquery@3.5.0