Skip to main content
Question

Problem with using box-ui-elements and ContentPreview as a React component

  • December 9, 2024
  • 0 replies
  • 26 views

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 [vite] 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.

0 replies

Be the first to reply!

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings