React中使用box-ui-elements的ContentPreview组件报错求助

问题描述 #

React新手在Box集成开发中，CDN引用正常，但改用NPM安装box-ui-elements后出现以下导入错误：

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)

当前代码片段：

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>
  );
}

解决方案 #

1. 修正导入路径与方式 #

避免直接导入es目录下的深层文件，改用官方推荐的顶层导入方式，同时修正react-intl的导入语法：

import "./App.css";
import { ContentPreview } from 'box-ui-elements';
import { IntlProvider } from 'react-intl';

直接导入顶层模块能确保使用包的正确导出映射，避免内部文件结构变更导致的导入错误。

2. 锁定兼容版本的box-ui-elements #

部分版本的box-ui-elements可能存在内部导出不匹配的问题，建议安装最新稳定版或已知兼容的版本：

npm install box-ui-elements@latest
# 或指定兼容版本，例如：
# npm install box-ui-elements@19.0.0

3. 调整Vite构建配置 #

由于Vite使用esbuild进行依赖预构建，可在vite.config.js中添加对box-ui-elements的优化配置，跳过严格导出检查：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['box-ui-elements'],
    esbuildOptions: {
      resolveExtensions: ['.js', '.jsx', '.ts', '.tsx'],
    }
  },
  resolve: {
    mainFields: ['browser', 'module', 'main'],
  }
});

4. 检查依赖兼容性 #

确保项目中react、react-dom和react-intl的版本与box-ui-elements兼容。例如，box-ui-elements通常要求react版本≥16.8.0，react-intl版本≥5.x。

5. 清理依赖并重新安装 #

若以上步骤无效，尝试清理缓存并重新安装依赖：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

内容的提问来源于stack exchange，提问作者DisastrousEcho