Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CJS entrypoint loaded, breaking ESM bundle #1033

Closed
haines opened this issue Mar 11, 2024 · 1 comment · Fixed by #1039
Closed

CJS entrypoint loaded, breaking ESM bundle #1033

haines opened this issue Mar 11, 2024 · 1 comment · Fixed by #1039
Labels
bug Something isn't working

Comments

@haines
Copy link
Contributor

haines commented Mar 11, 2024

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
Copy link

I experience similar issues #1032 but i could not really reproduce it on a minimal reproduction.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants