Optional chaining operator not supported in older browsers

[alexloi]

Describe the bug

App setup:
Node 18.15.0
Next.js 13.4.10
Tailwind-merge: 1.14.0
Environment: Production

User journey:

• User visited the app on: Samsung Galaxy S9+ / Samsung Internet (11.2)
• Loaded a page with a component that uses following util function to merge classes:

import { twMerge } from 'tailwind-merge'

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

• This caused the following error captured by Sentry:

You're encountering a SyntaxError with the message "Unexpected token .". This error occurred in the file ./node_modules/tailwind-merge/dist/lib/class-utils.mjs at line 44. Looks like the crash happened right on this line: })?.classGroupId;.

The use of the optional chaining operator (?.) seems to be causing the problem.

To Reproduce

Would require to load up a sample app with the code above in a legacy environment as described.

Expected behavior

Code should be compatible with older browsers, perhaps some kind of workaround for the optional chaining operator being used

Additional context

I understand that there might not be the intention of supporting older browsers, in which case any tip or suggestion you may have that I could use to fix the issue on my side somehow I'd love to hear it 👍

Thank you for all the work you've done on tailwind-merge 🚀

[dcastil]

Hey @alexloi! 👋

If you upgrade to v2, you can use

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

to use a version of the bundle that does not use optional chaining.

Related: #341 (comment)

[emmgfx]

There is any chance that "regular" import doesn't generate this error on older browsers? Mostly because of the bundle size increment that I've read on #341 (comment).

[dcastil]

Hey @emmgfx! 👋

Unfortunately no. Older browsers don't have some JS features which means that we need to ship some extra code to work around those missing features. Currently tailwind-merge ships 0.23 kB more over the wire when compressed with Brotli for the ES5 build.