box-ui-elements is expecting TreeQueryInput to be exported from @box/comboboxwithapi

[hada79]

Environment: React 17.0.2 Node 22.14.0

• Elements version: "box-ui-elements": "^23.2.0", "@box/combobox-with-api": "^0.43.8",

• Windows 11

• Edge

• 137

After upgrading box-ui-elements from 21.0.0 to latest, I had to install a few devdependencies, namely @box/combo-with-api. THe error I receive is: No matching export in "node_modules/@box/combobox-with-api/dist/esm/index.js" for import "TreeQueryInput"

node_modules/box-ui-elements/es/api/Metadata.js:15:9:
  15 │ import { TreeQueryInput } from '@box/combobox-with-api';

Looking at the metadata file in my node_modules folder, it does have a grayed out import on line 15: import { TreeQueryInput } from '@box/combobox-with-api'; with no references

I've deleted the folder from node_modules and reinstalled. Looking in node_modues combobox-with-api folder, dist/esm/indext.js does not export treequeryinput.

[tjuanitas]

hey @hada79 , my guess is this is a TypeScript issue. I think we'll need to update this line to specify the import is type: https://github.com/box/box-ui-elements/blob/f59b0aa998fea1d54e2bc14a841dbfd3adc8be65/src/api/Metadata.js#L7

that way this line isn't included in the es output

thanks for reporting, I can put up a fix soon

[tjuanitas]

@hada79 are you seeing any other issues when you remove that line from your local node_modules and try re-running your application?

[hada79]

No other errors if i remove it locally, it works fine.

[hada79]

Unrelated - is it possible to use box-ui-elements without --legacy-peer-deps? Trying to line up all these dependencies doesnt seem possible! Tell me no so I can stop trying :D

[tjuanitas]

lol not possible at the moment @hada79

last i recall it has to do with some outdated dependencies, I think react-tether. but we can't easily migrate away from react-tether because it's baked into some core components like tooltips and dropdown menus. so our plan is to deprecate these core components and migrate to an internal library and eventually we can remove the outdated dependencies

we use yarn which is why we don't see the error but npm users will need to use that flag

[hada79]

I should probably switch to Yarn, but for now the npm experience is pretty painful.

Here is a list of each package that has old peerDependency issues. Is there any reason why they shouldn't be updated to the latest versions? Does Yarn just assume the latest version is what they want be default?

@box/[email protected] - "@box/blueprint-web-assets": "^4.51.0"

@box/[email protected] - "@box/blueprint-web": "^7.31.1", - "@box/blueprint-web-assets": "^4.26.0"

@box/[email protected] - "@box/blueprint-web": "^7.8.0", - "@box/blueprint-web-assets": "^4.35.0"

@box/[email protected] - "@box/blueprint-web": "^10.3.1" - "@box/blueprint-web-assets": "^4.16.0"

@box/[email protected] - "@box/blueprint-web": "^7.8" - "@box/blueprint-web-assets": "^4.16.0"

@box/[email protected] - "@box/blueprint-web": "^7.30.3", - "@box/blueprint-web-assets": "^4.21.0",

@box/tree - "@box/blueprint-web": "^7.11.0", - "@box/blueprint-web-assets": "^4.16.0",

box-ui-elements - "@box/blueprint-web": "^11.12.0", - "@box/blueprint-web-assets": "^4.44.1", - "@box/box-ai-agent-selector": "^0.31.0", - "@box/box-ai-content-answers": "^0.124.1", - "@box/combobox-with-api": "^0.34.9", - "@box/item-icon": "^0.9.83", - "@box/metadata-editor": "^0.104.2",

[tjuanitas]

hey @hada79 I'll bring this up with the internal team and see how we can address the issue

[Selnapenek]

@hada79

here's a patch that worked for me with a vite setup it might work for you as well let me know if it helps

box-ui-elements+23.3.0.patch

diff --git a/node_modules/box-ui-elements/es/api/Metadata.js b/node_modules/box-ui-elements/es/api/Metadata.js
index 8411635..2ea0695 100644
--- a/node_modules/box-ui-elements/es/api/Metadata.js
+++ b/node_modules/box-ui-elements/es/api/Metadata.js
@@ -12,7 +12,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * @author Box
  */
 
-import { TreeQueryInput } from '@box/combobox-with-api';
+// import { TreeQueryInput } from '@box/combobox-with-api';
 import cloneDeep from 'lodash/cloneDeep';
 import lodashFilter from 'lodash/filter';
 import flatMap from 'lodash/flatMap';