【Laravel】bladeファイル上でjQueryが効かない時の対処法

自分用

resource/js直下にあるapp.jsやら

app.js

import './bootstrap';

bootstrap.jsファイルやらを見てみると

bootstrap.js

import 'bootstrap';

import '@popperjs/core';

import 'jquery';
/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// import Pusher from 'pusher-js';
// window.Pusher = Pusher;

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: import.meta.env.VITE_PUSHER_APP_KEY,
//     cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
//     wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
//     enabledTransports: ['ws', 'wss'],
// });

import 'jquery'してあるんだしこれjquery効いてるんだよね～？
と思い下記のスクリプトをF12のコンソール上で実行してみた。

    $(document).ready(function() {
        console.log('tes');
    });

が・・・

script-xxxxxxx.js:1 Uncaught ReferenceError: $ is not defined
    at script-xxxxxxx.js:1:1

おっとぉ？
その後構文の記載場所が悪いのかとファイルの読み込む順番が悪いのか試行錯誤するも中々解消できず・・・。

解決方法を調べていたら、以下に気になる情報が。

という訳で、上記の手順通り以下のようにしたらちゃんと効くようになりました。

bootstrap.js

import 'bootstrap';

import '@popperjs/core';

import jQuery from 'jquery'
window.$ = jQuery;

~~~以下略~~~