React应用嵌入Power BI可视化组件报错：embed不是函数

问题描述 #

我有一个多页面、每页包含多个可视化组件的Power BI报表，想要单独嵌入某个可视化组件而非整个报表或页面。按照官方文档操作后，出现错误：Uncaught TypeError: powerbi_client__WEBPACK_IMPORTED_MODULE_8__.embed is not a function，我的代码如下：

function myComponent() {
  let embedUrl = "<myReportEmbedUrl";

  let reportId = "<myReportId>";

  let accessToken = "<myToken>";

  useEffect(() => {
    const embedConfig = {
      type: "visual",
      tokenType: powerbi.models.TokenType.Aad,
      accessToken: accessToken,
      embedUrl: embedUrl,
      id: reportId,
      visualName: "The name of the chart I want to embed",
      pageName: "The name of the page inside the report",
    };

    const embedContainer = document.getElementById("visualContainer");
    const visual = powerbi.embed(embedContainer, embedConfig);

  }, [embedUrl, reportId]);

  return <div id="visualContainer"></div>;
}

错误原因与解决方案 #

1. 核心问题：Power BI客户端导入错误 #

报错的直接原因是powerbi.embed方法不存在，这是因为你没有正确导入powerbi-client库的核心对象。

修正导入方式

如果是通过npm安装的powerbi-client，需要确保导入完整的PowerBI对象：

import * as powerbi from 'powerbi-client';
import { models } from 'powerbi-client';

或单独导入embed方法：

import { embed, models } from 'powerbi-client';

2. 代码修正示例 #

以下是修复后的完整React组件代码，同时补充了必要的错误监听和清理逻辑：

import React, { useEffect } from 'react';
import * as powerbi from 'powerbi-client';
import { models } from 'powerbi-client';

function myComponent() {
  const embedUrl = "<你的报表嵌入URL>";
  const reportId = "<你的报表ID>";
  const accessToken = "<你的访问令牌>";

  useEffect(() => {
    const embedConfig = {
      type: "visual",
      tokenType: models.TokenType.Aad,
      accessToken: accessToken,
      embedUrl: embedUrl,
      id: reportId,
      visualName: "你要嵌入的图表名称",
      pageName: "报表内的页面名称",
    };

    const embedContainer = document.getElementById("visualContainer");
    const visual = powerbi.embed(embedContainer, embedConfig);

    // 监听嵌入错误
    visual.on("error", (event) => {
      console.error("可视化嵌入失败:", event.detail);
    });

    // 组件卸载时清理资源
    return () => {
      powerbi.reset(embedContainer);
    };
  }, [embedUrl, reportId, accessToken]);

  // 给容器设置固定宽高，确保可视化正常渲染
  return <div id="visualContainer" style={{ width: '800px', height: '600px' }}></div>;
}

export default myComponent;

3. 额外注意事项 #

• 参数匹配：visualName和pageName必须与Power BI报表中的名称完全一致（区分大小写和空格）。
• 容器尺寸：嵌入容器必须设置明确的宽高，否则可视化组件无法正确渲染。
• React推荐方案：如果使用React开发，更推荐使用官方提供的powerbi-client-react组件，避免手动操作DOM：

  import { PowerBIEmbed } from 'powerbi-client-react';
  import { models } from 'powerbi-client';
  
  function myComponent() {
    const embedConfig = {
      type: "visual",
      tokenType: models.TokenType.Aad,
      accessToken: "<你的访问令牌>",
      embedUrl: "<你的报表嵌入URL>",
      id: "<你的报表ID>",
      visualName: "你要嵌入的图表名称",
      pageName: "报表内的页面名称",
    };
  
    return (
      <PowerBIEmbed
        embedConfig={embedConfig}
        cssClassName="visual-container"
        getEmbeddedComponent={(visual) => {
          visual.on("error", (e) => console.error(e));
        }}
      />
    );
  }
  

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