[BUG] Error in callback for watcher "searchFor": "TypeError: can't access property "abort"

[jasperf]

Laravel version php artisan -v:Laravel Framework 8.24.0 Manager version composer info ctf0/media-manager:

name     : ctf0/media-manager
descrip. : A Media Manager Built With Vuejs & Laravel
keywords : ctf0, gui, laravel, manager, media, mediamanager
versions : * v3.7.5
type     : library
license  : MIT License (MIT) (OSI approved) https://spdx.org/licenses/MIT.html#licenseText
homepage : https://github.com/ctf0/Laravel-Media-Manager
source   : [git] https://github.com/ctf0/Laravel-Media-Manager.git 2608eeb9b645c5cfa9e5b40a148efb24f44007e2
dist     : [zip] https://api.github.com/repos/ctf0/Laravel-Media-Manager/zipball/2608eeb9b645c5cfa9e5b40a148efb24f44007e2 2608eeb9b645c5cfa9e5b40a148efb24f44007e2
path     : /Users/jasper/code/site.com/valet/vendor/ctf0/media-manager
names    : ctf0/media-manager

support
issues : https://github.com/ctf0/Laravel-Media-Manager/issues
source : https://github.com/ctf0/Laravel-Media-Manager/tree/v3.7.5

autoload
psr-4
ctf0\MediaManager\ => src

requires
ctf0/package-changelog *
illuminate/support >=6.0 <9.0
jhofm/flysystem-iterator ^2.2
maennchen/zipstream-php >=1.0

suggests
league/flysystem-cached-adapter Required to use the Flysystem cache (~1.0).

is it an issue related to installation or usage ?

Related to usage

what is the error you are getting ?

media manager error

Speech Recognition is not supported

and

Vue warn]: Error in callback for watcher "searchFor": "TypeError: can't access property "abort", annyang__WEBPACK_IMPORTED_MODULE_0___default.a is null"

found in

---> <VoiceSearch> at resources/assets/vendor/MediaManager/js/components/search-by-voice.vue
       <MediaManager> at resources/assets/vendor/MediaManager/js/components/manager.vue
         <SmtMediaManagerModal> at resources/js/components/editor/modals/MediaManagerMedia.vue
           <Root>

as well as:

TypeError: can't access property "abort", annyang__WEBPACK_IMPORTED_MODULE_0___default.a is null
    stop https://smtv.test/js/editor.js?id=8d2322c05ae4ff6fc873:7442
    searchFor https://smtv.test/js/editor.js?id=8d2322c05ae4ff6fc873:7456
    run https://smtv.test/js/editor.js?id=8d2322c05ae4ff6fc873:116753
    flushSchedulerQueue https://smtv.test/js/editor.js?id=8d2322c05ae4ff6fc873:116497
    nextTick https://smtv.test/js/editor.js?id=8d2322c05ae4ff6fc873:114175
    flushCallbacks https://smtv.test/js/editor.js?id=8d2322c05ae4ff6fc873:114101

Extra Info "attaching a screen shot would be very helpful"

Do You Know A Solution For this Issue ?

Not yet.

[ctf0]

can u repro with the demo repo ?

[jasperf]

@ctf0 Only tested in our application. Any recommendation do do a quick demo setup? Should I just set up Laravel 8 and then add the package? I checked https://github.com/ctf0/Laravel-Media-Manager/wiki and did not see a reference on setting up a demo or testing package. Basic installation like https://github.com/ctf0/Laravel-Media-Manager#installation there is of course.. but that is not all that would be needed.

[ctf0]

ur issue is with https://github.com/ctf0/Laravel-Media-Manager/blob/master/src/resources/assets/js/components/search-by-voice.vue

am not sure how come u r getting the can't access property "abort" error where the btn it self is not rendered , but still i've updated the file, plz manually test it with your setup and reply back

[jasperf]

Did test with the change you added, but still had the same error Speech Recognition is not supported using:

 stop() {
            this.run = false
            annyang?.abort()
        },
        start() {
            this.run = true
            annyang?.start()

Also had Parsing error: Unexpected token . eslint on first added ? to abort section.

Perhaps it is just the way it is because there is no support by my Firefox Developer browser or MacMini..? I do however have in earphones with microphone working..

looking into https://github.com/TalAter/annyang some as well.

[jasperf]

Checked https://stackoverflow.com/questions/39784986/speechrecognition-is-not-working-in-firefox and realized I had to turn it on:

_To enable the SpeechRecognition in Firefox Nightly > 72, go to about:config and switch the flags media.webspeech.recognition.enable and media.webspeech.recognition.force_enable to true._

and then all was well. Microphone was then also loaded in modal.

[ctf0]

glad u fixed it but can u plz undo the browser changes & retest with the new

https://github.com/ctf0/Laravel-Media-Manager/blob/master/src/resources/assets/js/components/search-by-voice.vue

and tell me if the error

Vue warn]: Error in callback for watcher "searchFor": "TypeError: can't access property "abort", annyangWEBPACK_IMPORTED_MODULE0default.a is null"

is gone ?

[jasperf]

I tested once more running npm run dev post restoring to older filer with just

stop() {
    this.run = false
    annyang.abort()
},
start() {
    this.run = true
    annyang.start()

and the warning also did not return. So with speech recognition enabled and enforced in Firefox Developer 87.0b7 (64-bit) the issue is no longer occurring. I then quickly tested in Chrome and all as well as well. Well, I had the issue in Firefox mainly but just wanted to see..

Update

Did see you version https://github.com/ctf0/Laravel-Media-Manager/commit/dfc198f8c92dcb363eb02f9cbbd57ca55bdd13fc had new checks for support

so I updated file again and rebuilt. Then I checked again. Again no errors. When I turned speech recognition off again and reload I also did not see errors. But will test again post Firefox Developer reload shortly.

[jasperf]

Yeah, no errors post Firefox Developer reload with speech recognition turned off and with your latest patch. So I guess your latest patch works @ctf0 .

NB Added patch as new branch to our own repository. May do some additional testing.

[ctf0]

perfect, thanks again.