Unhandled Promise Rejection: ReferenceError: Can't find variable: debounce about stimulus-autocomplete

[afcapel]

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

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

[miharekar]

Hah, awesome!

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

But, thanks a lot anyway @afcapel 🥰

[miharekar]

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

[miharekar]

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:[email protected]/src/autocomplete.js
❌ https://ga.jspm.io/npm:[email protected]/src/autocomplete.js
❌ https://ga.jspm.io/npm:[email protected]/src/autocomplete.js
✅ https://cdn.jsdelivr.net/npm/[email protected]/src/autocomplete.js
✅ https://unpkg.com/[email protected]/src/autocomplete.js

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

[afcapel]

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 #44 for reference.

[salex]

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]

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]

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]

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.

[salex]

Hooray, it’s working

…

On Jan 16, 2022, at 1:30 PM, Alberto Fernández-Capel ***@***.***> wrote: This was fixed on #96 <#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 <#84 (comment)>, 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.