How do I use Terser's "keep_quoted" option in my next.js app without breaking the code?

[JayJohn1869]

Hello!

I have the following config that sets the keep_quoted propery in mangle to true. (See mangle options)

webpack(config) {
  for (const plugin of config.optimization.minimizer) {
    if (plugin['constructor']['name'] === 'TerserPlugin') {
      plugin.options.terserOptions.mangle.properties = {
        keep_quoted: 'strict'
      }
    }
  }
  
  return config
}

This causes the code to break. Thankfully terser accepts a reserved option which is an array of identifiers that will not have their properties mangled.

Is there a list of all the properties that need to go into this array so that the code functions?
Note that I'm looking for identifiers used by next.js and react, since my objects are already using the bracket syntax to access property names if needed!

Thanks!

[Timer]

Can you please provide a code example that breaks?

[JayJohn1869]

Even a starter file, like this one breaks:

export default function App() {
  return (
    <h1>Hello</h1>
  )
}

My guess is that terser mangles react/next.js internal properties as well, so that code like t.constructor is mangled into t.a, which ends up breaking internals

[JayJohn1869]

You can take a look at this sandbox:
https://codesandbox.io/s/happy-stallman-u4t45

Notice the only thing I changed was the next.config.js file

[Timer]

Please remove that next.config.js. You should not be configuring Terser, and are causing this broken behavior yourself.

[JayJohn1869]

Understood, is there a way to mangle class properties without configuring terser? Perhaps a babel plugin?

[Timer]

Mangling class properties is nearly 100% guaranteed to break code. Usage cannot be statically inferred.

[t1gor]

@Timer @JayJohn1869 Hello, guys. Did you manage to find the solution for the issue? Having same trouble but with the lib in my case - can't really change it.