Error concatenating JS "Uncaught SyntaxError: Unexpected token *"

support
1

I add a concatenated JS like this:

{{ $jquery := resources.Get "node_modules/jquery/dist/jquery.js" }}
{{ $swiper := resources.Get "node_modules/swiper/dist/js/swiper.js" }}
{{ $main := resources.Get "js/main.js" }}

{{ $scripts := slice $jquery $swiper $main | resources.Concat "js/main.js" | minify | fingerprint }}
<script type="text/javascript" src="{{ $scripts.Permalink }}" integrity="{{ $scripts.Data.Integrity }}" media="screen"></script>

but in the browser console I have this error:

Uncaught SyntaxError: Unexpected token *

Investigating it seems it’s due to a comment at the end of some libraries that cause the error, like this:
//# sourceMappingURL=scrollMonitor.js.map/**

Here is the GitHub issue: https://github.com/gohugoio/hugo/issues/5403

Some way to solve?

2

We don’t use that library, so it cannot be “exactly that”. Also, the “thinking of going bagk to Gulp” isn’t constructive/positive thinking.

3

Yes, that was only an example, I can’t find nothing better or more specific.
I don’t know what is the tool used in Hugo to concatenate but maybe the problem comes from there?

4

Note, I don’t think this is a hugo-specific issue. As you mentioned, the browser console error is from the source map comment at end of JS file.

To fix, you’d either need to manually delete the comment, or download a version of the JS file that doesn’t include the comment.

5

I think your advice to manually delete the comment is a dirty approach. Also, the libraries that generate this error are many and I download them via npm/yarn then when I update them the edit will be overridden.

6

If you want to automate this, add a script to your build process that removes the comment before deploying.

Edit: Actually this wouldn’t work in your case since you are using fingerprint and any script that modifies the JS post-build would change the file hash.

7

Mmh I don’t think it’s the right way to proceed but for now I have no other solution. Can you give me help on how to do it?

8

If you believe you’ve found a bug in the minifier, you can post the report upstream at https://github.com/tdewolff/minify. There was a previous report that was resolved. However, they didn’t add tests in their fix, so the bug could be back.

9

But the same libraries work well when I used Gulp as build tool. So I think the problem is not related to the libraries.

10

My assumption at this point is that there’s a bug in the minify package used by Hugo.

11

Or the concatenation within Hugo before it’s sent to the minifier.

12

Just to clarify, does the browser console error still happen if you don’t use minify in your code snippets above?

13

Right, I tried and I get error even without minify. Indeed I said it’s, eventually, about concatenation not minify.

14

Good test.
To rule out concatenation, if you don’t concatenate the JS files and instead just link to them individually, does the error still happen?

15

Done, confirm that adding the same libraries individually there is no error

16

Okay, then as @moorereason mentioned, please create an issue and add your details:

17

Thanks @zwbetz and all others for the support. I just opened the issue here

I really hope to solve otherwise I can’t use Hugo

18

Thanks for creating the GH issue.

What is stopping you from just linking to the JS files individually for now, until the issue is looked at more?

19

That’s an idea but on this project I use a lot of JS libraries so I need to concatenating all of them in one single file. Also, it seems a long term issue to solve, am I wrong?

20

I see.
For now, I guess you’d have to weigh the cost of a web request for each JS file, vs a single file, and see how this affects your site performance.