module is obsolete

package.json specifies:

"module": "dist/clsx.m.js",
"main": "dist/clsx.js",

The proper way is:

"type": "module",
"main": "dist/clsx.cjs",   // or .js if "type" is unspecified
"exports": {
  "import": "./dist/clsx.js",   // no need for .mjs if "type" is "module" (recommended)
  "require": "./dist/clsx.cjs"   // or .js if "type" is unspecified
},

• https://stackoverflow.com/a/42817320/990356
• https://nodejs.org/docs/latest-v18.x/api/packages.html#dual-commonjses-module-packages
• https://www.typescriptlang.org/docs/handbook/esm-node.html

Related issue: lukeed/bundt#7

.m.js extension should be .mjs

https://nodejs.org/docs/latest-v16.x/api/packages.html#determining-module-system

(.mjs is only necessary if "type": "module" is not specified)

Syntax import { clsx } from 'clsx' does not work in an app transpiled to CJS

clsx is undefined

TypeError: (0 , clsx__WEBPACK_IMPORTED_MODULE_0__.clsx) is not a function

Last line from dist/clsx.js is exports.clsx = clsx and exports comes from nowhere, I don't think this can work. Caused by https://github.com/lukeed/bundt I guess.

Solution I've found for import { clsx } from 'clsx' to work in an app transpiled to CJS

With webpack, create an alias clsx: 'clsx/dist/clsx.m.js', example with Next.js webpack config from next.config.js:

  // ...

  webpack: (config, options) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      clsx: 'clsx/dist/clsx.m.js'
    };

   // ...

This will force the import of dist/clsx.m.js instead of dist/clsx.js. (You will need to transpile node_modules/clsx with next-transpile-modules in the case of Next.js).

Yep, ES Module is a real challenge and a big mess :-/