SyntaxError: Invalid or unexpected token 50.toString()

[maxmartynov]

📝 Provide detailed reproduction steps (if any)

Some algorithms of minification turn code like this ITEMS_PER_REQUEST.toString() to 50.toString() - substitute the variable's value. This leads to the error: SyntaxError: Invalid or unexpected token.

The place where I personally have this problem

ckeditor5/packages/ckeditor5-ckbox/src/ckboxutils.ts

Line 228 in 54eae6a

categoryUrl.searchParams.set( 'limit', ITEMS_PER_REQUEST.toString() );

❓ Possible solution

Following the specification of Number.prototype.toString(), using another way of stringifying numbers will be safer. I suggest using String(number)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[maxmartynov]

Fixed in the PR #16041

[Witoso]

Ha, that's very intriguing. What kind of bundler/minifier are you using? Tactical cc to @filipsobol, as we start to bundle ourselves in #15502.

[maxmartynov]

I use Terser (Stack: Nuxt.js 3, Vue 3, Vite, Terser).

Disabling these two options of Terser makes ckeditor build correctly:

export default defineNuxtConfig({
  vite: {
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          reduce_vars: false,
          collapse_vars: false,
        },
      },
    },
  },
 })

But in general, I had to disable these two options only for two rows in ckeditor lib which I've fixed in my PR. If I disable these options, the expression ITEMS_PER_REQUEST.toString() becomes 50..toString() (with two dots) in the result bundle and it works

[filipsobol]

We use terser to minify bundles for the new installation methods (#15502) and it correctly converts ITEMS_PER_REQUEST.toString() to 50..toString(). This is consistent with the output in the Terser REPL:

// Input
const test = 50;

console.log(test.toString());

// Output
console.log(50..toString());

@maxmartynov Are you using the latest version of terser?

---

Out of curiosity, I also checked swc and (when compression is enabled) it converts ITEMS_PER_REQUEST.toString() to "50".

[Witoso]

Hmm, with the options mentioned by @maxmartynov

        compress: {
          reduce_vars: false,
          collapse_vars: false,
        },

the live REPL also produces working code:

const o=50;console.log(o.toString());

It looks like a Terser issue (maybe older version produced wrong results), or maybe something else causes problems in your environment?

TBH I don't see this as a bug on our side 🤔 Changing working code to some other implementation just because minification crashes it, looks like the tail wagging the dog.

[maxmartynov]

TLDR;
If you guys are sure the new PR will solve this problem - no problem. Feel free to close the issue. You have already paid attention to the problem which is enough to remember it if necessary. My goal was to tell you about a nasty issue that happens on runtime.

Full story

I use [email protected]. Perhaps this problem will go away with new installation methods (#15502)

@filipsobol

@maxmartynov Are you using the latest version of terser?

I use (Nuxt.js uses under the hood) [email protected]. The latest version is 5.29.2.

it correctly converts ITEMS_PER_REQUEST.toString() to 50..toString()

I confirm that for me disabling the flags reduce_vars: false, collapse_vars: false leads to having 50..toString() in the resulting bundle. And this works.

I've created this issue mostly to point out the fact that (warn: IMHO) using <number>.toString() is not the best practice. My project uses ~70 libs in package.json and that means about 1.4k libs as nested dependencies. And they all play well with these Terser options enabled. The only place I noticed a problem is this one row in ckeditor5. You can check your project and make sure that there are no other places where you stringify numbers this way (not 100% info).

The reason why I've created this issue is to report the problem that appears in runtime only and happens NOT IN 100% CASES. My users got the error SyntaxError: Invalid or unexpected token randomly in different browsers. I assume that some browser engines can handle 50.toString() sometimes, because I don't know the reason why only half of my users get this error sometimes.