$('#flash-overlay-modal').modal is not a function. - jQuery not loading on safari

Hi @frankielee ,

Thank you ~

I gave that a go. It does not appear to have done anything. However, my iphone does not throw the error in production.

Could it be the version of safari on an older mac mini?

I do notice a few other errors: Invalid character '\ud835' & jQuery.Deferred exception: $('div.alert'.... And Safari's console is loading the scripts in this order:

app.js
manifest.js
vendor.js
bootstrap.bundle.min.js
jquery-3.5.1.slim.min.js

-almost- in the reverse order that they are in the footer. Is that right? Shouldn't they load in the order on the footerjs?

Invalid character '\ud835' Is there any jquery dependencies or something?

Try to add defer attribute. Clear the caches and try again.

<script src="{{ mix('js/manifest.js') }}" defer></script>
<script src="{{ mix('js/vendor.js') }}" defer></script>
<script src="{{ mix('js/app.js') }}" defer></script>

@frankielee hi there,

gave that a go. Still same error in production. I've even updated vue-instantsearch to the latest version 3.7.0 I put in a request to algolia on that character. Perhaps there's a stray character on their package.

It's just bizarre this is happening.

Have noticed the \ud385 character is not throwing an error locally, and allows the algolia vue-instantsearch widget to function on safari.

The $jquery issue is still occurring locally.

@trevorpan

Since you are importing the slim version the jquery, refer to links https://jquery.com/download/

You can also use the slim build, which excludes the ajax and effects modules:

The excluded features https://api.jquery.com/category/effects/ Which means you can't use delay and fadeOut. Maybe use jquery.min.js instead

@frankielee

So, this was a pain.

Thank you so much for the info on slim cdn packages. I didn't think that it would cut out the functionality I needed, but of course - I never looked. Didn't know to.

Appreciate your tip.

So, after investigating the cdn script, I noticed laracasts/flash package uses jquery, but bootstrap 5 does not. Also bootswatch uses jquery, but I could not see an updated version to reflect no jquery.

So I ended up removing bootstrap 5 and downgraded to 4. Also, had to shuffle around the order of the scripts.

<!-- jQuery, Popper.js, and JS  -->
<script   src="https://code.jquery.com/jquery-3.6.0.min.js"   integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="   crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>
<script>
        $('#flash-overlay-modal').modal();
        $('div.alert').not('.alert-important').delay(4000).fadeOut(750);
</script>

Funny thing is, the vue-instantsearch widget still does not display on this safari on production. But I've got a ticket in with algolia to see if we can address that Invalid character '\ud835' .

Appreciate your help!!!