tabler / tabler-icons

A set of over 5700 free MIT-licensed high-quality SVG icons for you to use in your web projects.
https://tabler.io/icons
MIT License
18.31k stars 917 forks source link

CJS entrypoint loaded, breaking ESM bundle #1033

Closed haines closed 8 months ago

haines commented 8 months ago

After updating from @tabler/icons-react 2.47.0 to 3.0.0, I get errors when attempting to bundle my application with Vite.

[vite] Error when evaluating SSR module: failed to import "@tabler/icons-react"
|- ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'node_modules/@tabler/icons-react/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at node_modules/@tabler/icons-react/dist/cjs/tabler-icons-react.js:10:13

The CJS file is being loaded, not the ESM one. It's only an issue with SSR. Here's a repro: https://stackblitz.com/edit/bluwy-create-vite-extra-2wmmpp?file=src%2FApp.tsx

Are the types wrong? reports issues with the package relating to Node module resolution, which seems to be accurate.

It works if I remove main, module, and typings from package.json and replace them with exports:

diff --git a/package.json b/package.json
index d71ea575190d7e2590e774d4e57d519e6a93f7ec..2c2dcad685fc19a0f88271f3c4b375a585b992f9 100644
--- a/package.json
+++ b/package.json
@@ -18,11 +18,15 @@
     "directory": "packages/icons-react"
   },
   "type": "module",
-  "main": "dist/cjs/tabler-icons-react.js",
   "main:umd": "dist/umd/tabler-icons-react.js",
-  "module": "dist/esm/tabler-icons-react.mjs",
   "unpkg": "dist/umd/tabler-icons-react.min.js",
-  "typings": "dist/tabler-icons-react.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/tabler-icons-react.mjs",
+      "require": "./dist/cjs/tabler-icons-react.js",
+      "types": "./dist/tabler-icons-react.d.ts"
+    }
+  },
   "sideEffects": false,
   "files": [
     "dist"

As esbuild notes in their docs,

using main, module, and browser is the old way of doing this. There is also a newer way to do this that you may prefer to use instead: the exports field in package.json.

So exports may be preferable. I haven't tested non-ESM builds, though.

timheerwagen commented 8 months ago

I experience similar issues https://github.com/tabler/tabler-icons/issues/1032 but i could not really reproduce it on a minimal reproduction.