Build time type error for twJoin export in dist/index.d.ts file

[fazofazaal]

Describe the bug

During the build process of a Next.js 11.1 project, a TypeScript error occurs in the tailwind-merge library's index.d.ts file. The error message indicates that a ',' is expected in the export statement.

I am only importing and calling twMerge function from the package.

To Reproduce

1. Create a new Next.js 11.1 project.
2. Install tailwind-merge package
3. Import and use twMerge in any of your components
4. Build the project using npm/yarn build

Expected behavior

Project should successfully build without any build/type errors occuring within the tailwind-merge package modules.

Environment

• tailwind-merge version: 1.14.0
• next version: 11.1.0
• node version: 16.16.1
• typescript: 4.3.5

[fazofazaal]

[UPDATE]: I am able to get a successful build after removing the type keyword as follows in the index.d.ts file:

export { twJoin, ClassNameValue } from './lib/tw-join';

I am still unsure how to proceed with this. Perhaps this library is targeting newer versions of typescript?

[dcastil]

Hey @fazofazaal! 👋

Could you create a reproducible example as a GitHub repo or a Codesandbox? I just tried to reproduce it but couldn't create a Next.js 11.1.0 project (got an error about a missing dependency that was actually installed). Using Next.js 13.1.0 and TypeScript 4.3.5 seems to work without any issues.

PS: Thanks for your patience, I'm just coming back from a vacation.

[JClackett]

Having kind of similar issues when using moduleResolution: "Bundler",

It can't find the types for this library, to fix I had to patch the package like so:

diff --git a/dist/index.d.ts b/dist/index.d.ts
index dc0d2a3bd7fa998445eed81b49c371f0db2be4e1..abff2f403c4737544863795662b512b196086388 100644
--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@@ -1,6 +1,6 @@
 import { twJoin } from './lib/tw-join';
 export { twMerge } from './lib/tw-merge';
-export { twJoin } from './lib/tw-join';
+export { twJoin, ClassNameValue } from './lib/tw-join';
 export { getDefaultConfig } from './lib/default-config';
 export { extendTailwindMerge } from './lib/extend-tailwind-merge';
 export { createTailwindMerge } from './lib/create-tailwind-merge';
diff --git a/package.json b/package.json
index d3fc02a21a8c2cc6e01bb63186dd0fc4a0e0d7f3..16f2395310ba57a3c699898f31d40eafce0be976 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "exports": {
         "types": "./dist/index.d.ts",
         "require": "./dist/index.js",
-        "import": "./dist/tailwind-merge.mjs",
+        "import": { "default": "./dist/tailwind-merge.mjs", "types": "./dist/index.d.ts" },
         "default": "./dist/tailwind-merge.mjs"
     },
     "module": "dist/tailwind-merge.mjs",

[dcastil]

Hey @JClackett! 👋

Thanks for the diff!

Could you create a reproducible example (e.g. a GitHub repo)? I also use tailwind-merge in a project with "moduleResolution": "bundler" and there the module resolution works fine. 🤔

[JClackett]

Ahh, turns out that I had multiple versions installed, and it was using 1.10.0! 1.14.0 is working as expected, my bad!

[ceIia]

i'm also running into this issue, but only on GitHub Actions somehow (and it's strangely not happening all of the time):

here's the code i'm using to build, this is in a component library.

await esbuild.build({
    entryPoints: ["src/assets/ts/functions/tailwind.ts"],
    outfile: "lib/assets/ts/functions/tailwind.js",
});

as for my tsconfig, i'm not using the bundler module resolution setting, but "moduleResolution": "node". note that i'm also using bun as a package manager, latest version (v1.0.4).