lukeed/clsxPublic

A tiny (239B) utility for constructing `className` strings conditionally.

Multiple issues with ES module

TK

tkrotoff opened ·

### `module` is obsolete

package.json specifies:

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

The proper way is:

```JS "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: https://github.com/lukeed/bundt/issues/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`](https://unpkg.com/browse/clsx@1.2.0/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`:

```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).

<br> <br> <br> <br>

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

  1. LU
    lukeed(edited)

    This is not CommonJS:

    ```js import { clsx } from 'clsx'; ```

    the `import` is exclusively ESM syntax. You’re looking for this:

    ```js const { clsx } = require('clsx'); // or const clsx = require('clsx'); ```

    those are your only options with CommonJS

  2. lukeedclosed4 years ago on GitHub

  3. TK
    tkrotoff
    Author

    > This is not CommonJS

    This code will be transpiled to CommonJS 👌

    > the `import` is exclusively ESM syntax

    *exclusively* ? Transpilers allow to use the `import` syntax and generate CJS (`require`) code.

    This is how 95% of developers code and have done so for almost a decade.

    ESM is activated with `"type": "module"` or `.mjs`, everything else is CommonJS (with or without lipstick).

    <br>

    I think there is a misunderstanding here.

  4. lukeedreferenced 3712966f1d6f4 years ago on GitHub

  5. LU
    lukeed

    I saw what you meant re: the broken CommonJS file ... fixed it & the UMD file

    However:

    > exclusively ?

    Yes. There's a misunderstanding here & with your initial commit. The file definitions are fine & your thinking regarding _requiring_ `type: module`, etc is not entirely correct either. It definitely is messy, but the package itself is defined correctly. A future `2.0.0` version will make use of the `"exports"` mapping, which allows native ESM imports, but that's not (currently) related to any of this & definitely not related to the problem you were experiencing.

    This is the footer of the `clsx@1.2.0/dist/clsx.js` file:

    ```js // ... module.exports = clsx; exports.clsx = clsx; ```

    Thru CommonJS semantics, this means that the _only_ declaration that takes effect is `module.exports = clsx`, which means that there's only a ~"default" (not accurate) function export... no named `clsx` export.

    The `exports.clsx = clsx` is normally fine, but only when there are _only_ named exports involved.

    This fixes it for the next release:

    ```js module.exports = clsx; module.exports.clsx = clsx; ```

    ---

    Separately, your bundler configuration is pretty whacky. It doesn't matter if you're **building for CommonJS** – if you're still going to author/write your source files in ESM (`import`/`export`), then you should be configuring your bundler to look at ESM-targeted fields.

    This means that you should have automatically picked up the `clsx.m.js` file automatically instead of having to manually resolve it.

    You should **only ever** load the `clsx.js` file (CommonJS) if you do `require('clsx')`. Your bundler is smart enough to convert: ```js import { clsx } from 'clsx'; // into const { clsx } = require('clsx'); ``` when building for & targeting CJS output.

    > Granted, yes, you still would have had an issue with `const { clsx } = require('clsx')` here, but only because the file's exports were overwriting each other.

    ---

    Hope that helps~! Will publish patch shortly.

  6. TK
    tkrotoff(edited)
    Author

    Version 1.2.1 fixes the issue I had, thanks a lot!

    I did some experimentations with 1.2.1. - Next.js uses `node_modules/clsx/dist/clsx.js` probably because of SSR/`getServerSideProps` - create-react-app uses `node_modules/clsx/dist/clsx.m.js`

    (You can reproduce this by generating the default projects, import clsx and add console.logs to the different files inside `node_modules/clsx/dist/`)

    It's like create-react-app recognizes `"module": "dist/clsx.m.js"` while Next.js does not.

  7. TK
    tkrotoff
    Author

    > which allows native ESM imports, but that's not (currently) related to any of this & definitely not related to the problem you were experiencing.

    Got it, the pattern you are currently following is https://github.com/rollup/rollup/wiki/pkg.module and this is still relevant.

  8. remcohaszingreferenced this in fix: fix esm support and types #574 years ago on GitHub

  9. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19022 years ago on GitHub

  10. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19072 years ago on GitHub

  11. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19122 years ago on GitHub

  12. snyk-io[bot]botreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #32 years ago on GitHub

  13. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19172 years ago on GitHub

  14. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19222 years ago on GitHub

  15. flaan4mereferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #32 years ago on GitHub

  16. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19272 years ago on GitHub

  17. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19322 years ago on GitHub

  18. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19372 years ago on GitHub

  19. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19422 years ago on GitHub

  20. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19502 years ago on GitHub

  21. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19552 years ago on GitHub

  22. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19602 years ago on GitHub

  23. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19652 years ago on GitHub

  24. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19702 years ago on GitHub

  25. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19752 years ago on GitHub

  26. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19802 years ago on GitHub

  27. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19852 years ago on GitHub

  28. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19902 years ago on GitHub

  29. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #19952 years ago on GitHub

  30. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20002 years ago on GitHub

  31. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20052 years ago on GitHub

  32. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20102 years ago on GitHub

  33. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20152 years ago on GitHub

  34. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20202 years ago on GitHub

  35. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20252 years ago on GitHub

  36. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20302 years ago on GitHub

  37. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20352 years ago on GitHub

  38. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20402 years ago on GitHub

  39. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20452 years ago on GitHub

  40. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20502 years ago on GitHub

  41. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20552 years ago on GitHub

  42. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20602 years ago on GitHub

  43. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20652 years ago on GitHub

  44. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20702 years ago on GitHub

  45. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20752 years ago on GitHub

  46. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20802 years ago on GitHub

  47. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20852 years ago on GitHub

  48. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20902 years ago on GitHub

  49. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #20952 years ago on GitHub

  50. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21002 years ago on GitHub

  51. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21052 years ago on GitHub

  52. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21102 years ago on GitHub

  53. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21152 years ago on GitHub

  54. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21202 years ago on GitHub

  55. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21252 years ago on GitHub

  56. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21302 years ago on GitHub

  57. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21352 years ago on GitHub

  58. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21402 years ago on GitHub

  59. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21452 years ago on GitHub

  60. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21502 years ago on GitHub

  61. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21552 years ago on GitHub

  62. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21602 years ago on GitHub

  63. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21652 years ago on GitHub

  64. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21702 years ago on GitHub

  65. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21752 years ago on GitHub

  66. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21802 years ago on GitHub

  67. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21852 years ago on GitHub

  68. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21902 years ago on GitHub

  69. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #21952 years ago on GitHub

  70. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22002 years ago on GitHub

  71. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22052 years ago on GitHub

  72. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22102 years ago on GitHub

  73. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22182 years ago on GitHub

  74. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22232 years ago on GitHub

  75. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22282 years ago on GitHub

  76. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22332 years ago on GitHub

  77. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22382 years ago on GitHub

  78. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22432 years ago on GitHub

  79. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22482 years ago on GitHub

  80. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22532 years ago on GitHub

  81. udilbarreferenced this in [Snyk] Upgrade: , , prop-types, clsx, , , , formik, history, react-feather, react-router, react-router-dom, react-scripts, yup #1492 years ago on GitHub

  82. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22582 years ago on GitHub

  83. NOUIYreferenced this in [Snyk] Upgrade: , , react, react-dom, semver, , , clsx, , , cross-fetch, file-loader, lunr, next, raw-loader, react-syntax-highlighter, url-loader #4782 years ago on GitHub

  84. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22632 years ago on GitHub

  85. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22682 years ago on GitHub

  86. stuxMYreferenced this in [Snyk] Upgrade: react, react-dom, , async, clsx, eventemitter2, fontfaceobserver, handlebars, image-size, jquery, neo4j-driver, prop-types, react-alert-template-basic, react-draggable, react-transition-group, stream-chain, stream-json, unzipper #152 years ago on GitHub

  87. Mhmonicoxreferenced this in [Snyk] Upgrade clsx from 1.1.1 to 1.2.1 #22732 years ago on GitHub

  88. udilbarreferenced this in [Snyk] Upgrade: , , prop-types, clsx, , , , formik, history, react-feather, react-router, react-router-dom, react-scripts, yup #1522 years ago on GitHub

  89. josias-devvvreferenced this in [Snyk] Upgrade: , , , , , , atropos, autoprefixer, clsx, contentful, fs-extra, globby, postcss, next, node-fetch, postcss-import, posthtml, unified, remark-html, rxjs, stylelint, swiper, tailwindcss, typedoc, typescript #232 years ago on GitHub

  90. josias-devvvreferenced this in [Snyk] Upgrade: , , , , , , atropos, autoprefixer, clsx, contentful, fs-extra, globby, postcss, next, node-fetch, postcss-import, posthtml, unified, remark-html, rxjs, stylelint, swiper, tailwindcss, typedoc, typescript #242 years ago on GitHub

  91. black-da-bullreferenced this in [Snyk] Upgrade: , , clsx, docusaurus-plugin-sass, sass #152 years ago on GitHub

  92. Mhmonicoxreferenced this in [Snyk] Upgrade: , , , clsx, #22772 years ago on GitHub

  93. udilbarreferenced this in [Snyk] Upgrade: , , prop-types, clsx, , , , formik, history, react-feather, react-router, react-router-dom, react-scripts, yup #1532 years ago on GitHub

  94. josias-devvvreferenced this in [Snyk] Upgrade: , , , , , , atropos, autoprefixer, clsx, contentful, fs-extra, globby, postcss, next, node-fetch, postcss-import, posthtml, unified, remark-html, rxjs, stylelint, swiper, tailwindcss, typedoc, typescript #252 years ago on GitHub

  95. mkotsollarisreferenced this in [Snyk] Upgrade: , , react, react-dom, , clsx, , , aws-amplify, chalk, css-loader, dotenv, eslint-plugin-flowtype, html-webpack-plugin, jquery, notistack, promise, react-copy-to-clipboard, react-hook-form, react-router-dom, styled-components, webpack, webpack-dev-server, webpack-manifest-plugin #6282 years ago on GitHub

  96. Mhmonicoxreferenced this in [Snyk] Upgrade: , , , clsx, #22782 years ago on GitHub

  97. udilbarreferenced this in [Snyk] Upgrade: , , prop-types, clsx, , , , formik, history, react-feather, react-router, react-router-dom, react-scripts, yup #1542 years ago on GitHub

  98. josias-devvvreferenced this in [Snyk] Upgrade: , , , , , , atropos, autoprefixer, clsx, contentful, fs-extra, globby, postcss, next, node-fetch, postcss-import, posthtml, unified, remark-html, rxjs, stylelint, swiper, tailwindcss, typedoc, typescript #262 years ago on GitHub

  99. mkotsollarisreferenced this in [Snyk] Upgrade: , , react, react-dom, , clsx, , , aws-amplify, chalk, css-loader, dotenv, eslint-plugin-flowtype, html-webpack-plugin, jquery, notistack, promise, react-copy-to-clipboard, react-hook-form, react-router-dom, styled-components, webpack, webpack-dev-server, webpack-manifest-plugin #6292 years ago on GitHub

  100. Mhmonicoxreferenced this in [Snyk] Upgrade: , , , clsx, #22792 years ago on GitHub