laravelのjqueryでautocompleteを利用するとエラーになる

動作環境

Laravel 6.20
php 8.0
ローカルPC開発
chrome

やりたいこと

• laravelでテキストボックスで検索するときに、サジェストしてくれる機能を追加したい。
• そこで、jqueryのautocompleteを利用して実装しようとしたがエラーが出ました。
  • laravelを利用しないで、webのサンプルをhtmlでコピペしてchromeで表示すると検索のサジェストの機能は問題なく表示されたので、laravelに起因するエラーだと考えられる状態。

エラーの内容

• chromeの開発者コンソールで以下のようなエラーが発生しました。

jQuery.Deferred exception: $(...).autocomplete is not a function TypeError: $(...).autocomplete is not a function

Uncaught TypeError: $(...).autocomplete is not a function

エラー内容をwebで検索して調べると・・・

• jqueryのCDNを書き忘れているのがエラーの原因だと書かれている記事がほとんどでした。

  • https://stackoverflow.com/questions/19591155/autocomplete-is-not-a-function-error

• autocompleteはjQuery UIなのでjQuery.UIライブラリを利用すれば解決するとのことです。

  • https://teratail.com/questions/179399
  • ですが自分の場合、解決しませんでした。

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

本当のエラーの原因

• laravelのjs/app.jsのファイルがエラーの原因でした。
  • https://nebikatsu.com/7232.html/
  • js/app.jsを読み込むのを止めて解決しました。
  • 「app.jsを読み込むページによっては、
    手書きで書くJavascriptとバッティングして、Javascriptが動かなくなる」とのことです。