Hi everyone. I’, relatively new in React and I’ve just started working with Box integration. I managed to use Box by referencing the versions available on Box's CDN (https://github.com/box/box-content-preview?tab=readme-ov-file#including-preview-as-a-library). But, I have the requirement to use it as a NPM package. I’m using React and when I try to install the box-ui-elements and use it, I get the error
00:30:52 0vite] error while updating dependencies:
Error: Build failed with 3 errors:
node_modules/box-ui-elements/es/elements/content-preview/ContentPreview.js:51:26: ERROR: No matching export in "node_modules/box-ui-elements/es/elements/common/annotator-context/index.js" for import "WithAnnotationsProps"
node_modules/box-ui-elements/es/elements/content-preview/ContentPreview.js:51:70: ERROR: No matching export in "node_modules/box-ui-elements/es/elements/common/annotator-context/index.js" for import "WithAnnotatorContextProps"
node_modules/box-ui-elements/es/elements/content-sidebar/ActivitySidebar.js:26:9: ERROR: No matching export in "node_modules/box-ui-elements/es/elements/common/annotator-context/index.js" for import "WithAnnotatorContextProps"
at failureErrorWithLog (C:\Users\Vd88\Documents\Projects\BoxContentPreview\box-content-preview-demo\node_modules\esbuild\lib\main.js:1472:15)
at C:\Users\Vd88\Documents\Projects\BoxContentPreview\box-content-preview-demo\node_modules\esbuild\lib\main.js:945:25
at C:\Users\Vd88\Documents\Projects\BoxContentPreview\box-content-preview-demo\node_modules\esbuild\lib\main.js:1353:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Maybe I’m doing something wrong, maybe this issue is trivial for resolving, but I still haven’t found a way to overcome this.
I have found similar questions (like this one) and sample codes (like this one
) https://github.com/box-community/ui-elements-demo), but I still haven’t found the solution for my issue.
This is my code:
import "./App.css";
import ContentPreview from "box-ui-elements/es/elements/content-preview";
import IntlProvider from "react-intl";
function App() {
return (
<IntlProvider locale="en">
<ContentPreview
contentSidebarProps={{
detailsSidebarProps: {
hasAccessStats: true,
hasClassification: true,
hasNotices: true,
hasProperties: true,
hasRetentionPolicy: true,
hasVersions: true,
},
features: FEATURES,
hasActivityFeed: true,
hasMetadata: true,
hasSkills: true,
hasVersions: true,
}}
hasHeader={true}
features={FEATURES}
fileId={FILE_ID}
token={TOKEN}
{...PROPS}
/>
</IntlProvider>
);
}
And this is a code for the whole sample project:
https://github.com/vladimird88/box-ui-elements-sample
Can someone help me with this?
Thanks in advance.