Unexpected token: name (Promise)

[afdev82]

I am using this gem (v1.2.5) with a Rails 8.0.2 app and Ruby 3.4.3.

I am getting the following error:

Terser::Error: Unexpected token: name (Promise) (Terser::Error)
--
 20 import "alchemy_admin/components/overlay"
 21 import "alchemy_admin/components/page_select"
 22 import "alchemy_admin/components/preview_window"
 23 import "alchemy_admin/components/select"
 24 import "alchemy_admin/components/spinner"
 25 import "alchemy_admin/components/tags_autocomplete"
 26 import "alchemy_admin/components/tinymce"
 27 
 => await Promise.race([
 29   // Load all global custom elements
 30   Promise.allSettled([
 31     customElements.whenDefined("alchemy-button"),
 32     customElements.whenDefined("alchemy-icon"),
 33     customElements.whenDefined("alchemy-growl"),
 34     customElements.whenDefined("alchemy-message"),
 35     customElements.whenDefined("alchemy-spinner")
 36   ]),
==

Is not the Promise syntax supposed to work with Terser?
How could I debug this issue?
Thank you in advance for your help.

[ahorek]

That's because top-level await is only supported in modules.

enabling a strict mode could help

'use strict';

await Promise.race([
...

[tvdeyen]

The above mentioned code should never be compiled at all. It runs via importmap-rails with already compiled ES modules. How does terser-ruby creates the list of compilable assets? It should use Rails.application.config.assets.precompile or something similar if Sprockets is not used. This list should not include the alchemy_admin/**/* assets.

[tvdeyen]

I am pretty sure that terser-ruby is not the issue here. It does not even handle compilation. It just registers as compressor. This issue can be closed

[ahorek]

If it worked before, you can try adding 'use strict'; at the beginning of the file, or wrap it in an anonymous async function. This should prevent Terser from complaining without changing the behavior.

However, it seems that AlchemyCMS includes prebuilt and minified assets, so there’s no need to use Sprockets or Terser-Ruby. The real question is, why are you building it yourself this way?

Sprockets does support @import, but you would need to pass the --module option for imported assets to be processed automatically. Since the Sprockets gem hasn’t been maintained for years, it's unlikely this will be addressed, and there are workarounds if you really need it...

[afdev82]

Thank you @ahorek for your support.
I am sure with the help of @tvdeyen I will solve the issue, I will continue in the other thread.
Many thanks.

[afdev82]

Now I am again here asking for support, because the final answer was that AlchemyCMS doesn't need to change anything on its side, since the syntax is correct for ES6 modules.

I am not doing anything fancy here, it's just a Rails 8 app with AlchemyCMS, using Sprockets as asset pipeline and Terser as compressor.

The above mentioned code should never be compiled at all. It runs via importmap-rails with already compiled ES modules. How does terser-ruby creates the list of compilable assets? It should use Rails.application.config.assets.precompile or something similar if Sprockets is not used. This list should not include the alchemy_admin/**/* assets.

Sorry @tvdeyen, but I think this is not correct, the assets to be processed by the asset pipeline are in the AlchemyCMS manifest here. You said that they need to be there in order to be served by Sprockets, so since the admin files are in the manifest of AlchemyCMS they will be picked up by the asset pipeline (Sprockets) and minified with Terser.

However, it seems that AlchemyCMS includes prebuilt and minified assets, so there’s no need to use Sprockets or Terser-Ruby. The real question is, why are you building it yourself this way?

Where are the prebuilt and minified assets? If it's true, I could take the files as they are and do nothing with the asset pipeline, but they are included in the AlchemyCMS manifest and they are taken by the asset pipeline.

I was creating a new app with AlchemyCMS to better debug the problem and to be able to share the code, but I am stuck because of an error in the installation process.

[afdev82]

I have just pushed the sample app here.
I am getting the same error, with nothing installed apart Rails, AlchemyCMS and Terser.

[ahorek]

I've added support for passing a module option, which effectively enables 'use strict';. IMO it's easier to add this line to the module instead.

Note that this gem is just a wrapper for the underlying JavaScript library, and this behavior appears to be expected, see terser/terser#903 (comment) If you believe it's incorrect, feel free to open an issue there...

[afdev82]

Thank you very much for that option and for the hint about the related issue.
Now it works.

IMO it's easier to add this line to the module instead.

Yes, but if the maintainers don't want to change the code, I can't do nothing (I don't want to use a fork just for that).

[tvdeyen]

Thank you very much for that option and for the hint about the related issue. Now it works.

IMO it's easier to add this line to the module instead.

Yes, but if the maintainers don't want to change the code, I can't do nothing (I don't want to use a fork just for that).

Maintainer here. If it would be just one file I would be willing to add the line in order to support terser, but Alchemy's admin code is written in many ES modules that all are imported individually and served by importmap-rails. Since sprockets precompiles all files under alchemy_admin/ we would need to add the line to all files, right? This is not something I would like to need to maintain just because terser is not able to compile ES module syntax by default.

Ideally we would be able to disable precompilation for certain folders, but sprockets is unmaintained and we cannot separate serving an asset from precompling n sprockets. @afdev82 you could migrate your app to propshaft, the maintained Rails asset pipeline that does not precompile, just serve assets. You would need to precompile your apps asset, but there are plenty of modern options.

[ahorek]

Sprockets was originally built to work with Uglifier and supports only ES5. Ideally, it should provide official support for Terser and automatically include the -module option if needed, but as @tvdeyen pointed out, the gem has been unmaintained for a long time.

@tvdeyen it should be safe to add 'use strict'; to
https://github.com/AlchemyCMS/alchemy_cms/blob/main/app/javascript/alchemy_admin/components/index.js
this way, terser should stop complaining and allow top-level await even if you don't compile it as a module.

Still, I fully agree that Propshaft or Vite are better alternatives.