search

afcapel / stimulus-autocomplete

Stimulus autocomplete component
MIT License
482 stars 63 forks source link

Unhandled Promise Rejection: ReferenceError: Can't find variable: debounce #84

Closed miharekar closed 2 years ago

miharekar commented 3 years ago

On Safari (iOS and Mac) if I don't have a console open something breaks.

I have stimulus@3.0.1 and stimulus-autocomplete@3.0.0-rc.4.

I know this is a terrible bug report 🙈

If I have a console open, everything works.

If I don't, it doesn't. And if I open console after I see this:

CleanShot 2021-10-21 at 12 13 18

Any ideas?

miharekar commented 3 years ago

OK this might help: autocmpleted works in rc2, but not in rc3 or rc4

miharekar commented 3 years ago

Right, this makes 0 sense to me 😂

I wanted to git bisect so I pinned it locally and it worked. Wasted a lot of time trying to get it not to work. Then I realized it worked with unpkg and jsdelivr. So it only doesn't work with jspm. Then I inspected those files and saw that they're as-is on unpkg and jsdelivr, but jspm does some sort of minimization.

Here they are: ✅ https://ga.jspm.io/npm:stimulus-autocomplete@3.0.0-rc.2/src/autocomplete.js ❌ https://ga.jspm.io/npm:stimulus-autocomplete@3.0.0-rc.3/src/autocomplete.js ❌ https://ga.jspm.io/npm:stimulus-autocomplete@3.0.0-rc.4/src/autocomplete.js ✅ https://cdn.jsdelivr.net/npm/stimulus-autocomplete@3.0.0-rc.4/src/autocomplete.js ✅ https://unpkg.com/stimulus-autocomplete@3.0.0-rc.4/src/autocomplete.js

Now I'm running out of ideas, but somehow it feels like minimization process breaks it. I can't even…

afcapel commented 3 years ago

This seems an issue with jspm compression code. The unminified code runs fine. Maybe contact them?

BTW these are all the changes since rc2. I'd say moving the event handlers to use the => syntax is what triggered this error. See https://github.com/afcapel/stimulus-autocomplete/issues/44 for reference.

salex commented 2 years ago

I ran into this problem about a month ago and spend several days trying to figure out why it worked with the dev console open but not normally.

I got as far as just copying the source code and putting it in my stimulus controllers and it worked fine. This was way over my javascript knowledge. I ended up replacing it my own version of a stimulus completion controller.

I guess I didn't see this issue when I was having the problem and was going to try to report it. I was thinking it may have been the Rails shim for Safari and Firefox - again over my head. Never tried Firefox though.

Guess the current solution is to not use jspm for stimulus-autocomplete.

afcapel commented 2 years ago

I've moved the debounce declaration to the top of the file try as a workaround for this, and I don't see the error anymore. The fix should be available in v3.0.0.

Can anyone confirm whether the issue is fixed?

salex commented 2 years ago

I've moved the debounce declaration to the top of the file try as a workaround for this, and I don't see the error anymore. The fix should be available in v3.0.0.

Can anyone confirm whether the issue is fixed?

It still is not working in Safari unless I have the developer console open

the error

[Error] TypeError: Module specifier, 'application' does not start with "/", "./", or "../". Referenced from http://localhost:3000/demo/show
    promiseReactionJob
[Info] OK: "Uncaught TypeError" module failure has been polyfilled (es-module-shims.min-6982885c6ce151b17d1d2841985042ce58e1b94af5dc14ab8268b3d02e7de3d6.js, line 1)
[Error] Unhandled Promise Rejection: ReferenceError: Can't find variable: debounce
    (anonymous function) (ee8a7365-5ede-4ec4-91d1-67a9b51a2042:1:3589)
    Autocomplete (Anonymous Script 1 (line 1))
    construct
    extended (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:22620)
    Context (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:19529)
    fetchContextForScope (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:23760)
    connectContextForScope (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:23516)
    scopeConnected (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:29416)
    elementMatchedValue (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:27902)
    tokenMatched (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:14493)
    tokenMatched (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:13053)
    forEach
    tokensMatched (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:12925)
    elementMatchedAttribute (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:12656)
    elementMatched (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:8833)
    addElement (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:7982)
    refresh (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:6689)
    start (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:6191)
    start (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:8381)
    start (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:12371)
    start (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:14126)
    start (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:27456)
    start (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:28770)
    (anonymous function) (1a8446c7-2d3f-4bc9-afd5-c80f91f3d808:1:30531)
    asyncFunctionResume
    (anonymous function)
    promiseReactionJobWithoutPromise
[Log] Got a DateRange (40ea099d-eb94-462c-b802-7476b918f28e, line 11)

The uncaught error is always there, has something to to with es-module-shims

I have no idea what es-module-shim does, but its something to do with importmaps.

Could that be the problem? What does having the developer console open have to do with it? Might want to check the importmap-rails git page.

It works in Chrome and Firefox. Don't have a Windows PC, think Edge is shimmed also.

afcapel commented 2 years ago

The first error is expected, a bit annoying but doesn't break anything

https://github.com/rails/importmap-rails#expected-errors-from-using-the-es-module-shim

The es-module-shim is a polyfill to be able to use importmaps in browsers that don't support them yet, such as Safari.

afcapel commented 2 years ago

This was fixed in #96. A bit random, but it worked.

See https://stimulus-autocomplete.netlify.app/jspm.html for a working example.

salex commented 2 years ago

Hooray, it’s working

On Jan 16, 2022, at 1:30 PM, Alberto Fernández-Capel @.***> wrote:

This was fixed on #96 https://github.com/afcapel/stimulus-autocomplete/pull/96. A bit random, but it worked.

See https://stimulus-autocomplete.netlify.app/jspm.html https://stimulus-autocomplete.netlify.app/jspm.html for a working example.

— Reply to this email directly, view it on GitHub https://github.com/afcapel/stimulus-autocomplete/issues/84#issuecomment-1013937426, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA6WFC23NGE7L4X66SITGLUWMMGNANCNFSM5GNXZMCA. Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you commented.

miharekar commented 2 years ago

Hah, awesome!

I switched to jsdelivr in the meantime to not have this issue 😂

But, thanks a lot anyway @afcapel 🥰