"Unexpected token ." on "})?.classGroupId;" due to no optional chaining operator support in certain node_modules runtimes, via tailwind-merge usage.

[nicksergeant]

Describe the bug

Started seeing some Sentries via tailwind-merge originating from tailwind-variants:

  }
  var classRest = classParts.join(CLASS_PART_SEPARATOR);
  return classPartObject.validators.find(function (_ref) {
    var validator = _ref.validator;
    return validator(classRest);
  })?.classGroupId;
}
var arbitraryPropertyRegex = /^\[(.+)\]$/;
function getGroupIdForArbitraryProperty(className) {
  if (arbitraryPropertyRegex.test(className)) {
    var arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];

To Reproduce

Install tailwind-variants in a new Next.js project and run in the app in a browser that doesn't natively support optional chaining operator. Chrome 60.0.3112 on Windows 7 is a good example.

Expected behavior

No errors.

Screenshots

No visual errors.

Potential solution

Via https://github.com/dcastil/tailwind-merge/issues/344#issuecomment-1809947458 it seems that we can upgrade tailwind-variant's usage of tailwind-merge by upgrading to v2 and using:

import { twMerge } from 'tailwind-merge/es5'

[mskelton]

As discussed in #129, the transpilePackages option in Next.js can solve this for users that need to support very old browsers.