Help: TypeError: (0 , Ui.default) is not a function TSUP bundle issue... maybe

[bvkimball]

Using the recommended project structure here: https://bento.buildo.io/docs/Getting%20Started/project-structure

Getting an Error with how react-cool-dimensions is bundled by tsup.

@onbrandplm/web:dev: TypeError: (0 , Ui.default) is not a function
@onbrandplm/web:dev:     at B1 (/Users/briankimball/Github/onbrandplm/application-starter-pack/node_modules/@buildo/bento-design-system/src/TextField/TextField.tsx:27:70)

When running in debug looks like TSUP loads this wrong maybe, looks like it has nested default imports. I don't understand this stuff too much but this might be an issue that it is using the ESM over the CJS bundle or vice versa.

I am using the same tsup version bento uses "tsup": "6.6.3"

Do you have any issues with this or know what i might be doing wrong?

[bvkimball]

So the problem for me is caused by this evanw/esbuild#2023
I think it is an issue with how esbuild interprets this package.

for me since i use yarn v3 i just created a patch for it. here it is

 diff --git a/dist/index.shim.cjs b/dist/index.shim.cjs
new file mode 100644
index 0000000000000000000000000000000000000000..de9c43f17ba8f6d3fe25e62981e55d8213f7051c
--- /dev/null
+++ b/dist/index.shim.cjs
@@ -0,0 +1 @@
+module.exports = require('./index.js').default
diff --git a/package.json b/package.json
index 441abeed8e3d99d2d5b4b9f8ef92becb6fdfe113..5430adda2ceb5e2d88624574397146505b58d697 100644
--- a/package.json
+++ b/package.json
@@ -103,5 +103,9 @@
   },
   "peerDependencies": {
     "react": ">= 16.8.0"
+  },
+  "exports": {
+    "import": "./dist/index.esm.js",
+    "require": "./dist/index.shim.cjs"
   }
 }

[gabro]

Thanks for reporting! I'll take a closer look to see whether we can improve something on our side. If I get this right, this is something that should be fixed by react-cool-dimensions?