Question

使用 powerbi-client-act 和 typescript 项目时出现“服务器错误 ReferenceError: self 未定义”

2023-01-31

926

reactjs next.js powerbi powerbi-embedded react-tsx

我尝试在用 typescript 编写的项目中使用该 lib powerbi-client-react，但在尝试运行它时出现以下错误：

我的组件代码：

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

// aditional declarete from use "window" in my getEmbeddedComponent
declare global {
    interface Window { report: any; }
}

export default function PbiEmbeddedDashboard() {

    return (
        <div className="App">

            <PowerBIEmbed
                embedConfig={{
                    type: 'report',   // Supported types: report, dashboard, tile, visual and qna
                    id: '<Report Id>', // the information has been filled in correctly in the project
                    embedUrl: '<Embed Url>', // the information has been filled in correctly in the project
                    accessToken: '<Access Token>', // the information has been filled in correctly in the project
                    tokenType: models.TokenType.Embed, // i also tried to use the models.TokenType.Aad but the error was the same
                    settings: {
                        panes: {
                            filters: {
                                expanded: false,
                                visible: false
                            }
                        },
                        background: models.BackgroundType.Transparent,
                    }
                }}

                eventHandlers={
                    new Map([
                        ['loaded', function () { console.log('Report loaded'); }],
                        ['rendered', function () { console.log('Report rendered'); }],
                        ['error', function (event) { console.log(event.detail); }]
                    ])
                }

                cssClassName={"report-style-class"}

                getEmbeddedComponent={(embeddedReport) => {
                    window.report = embeddedReport;
                }}
            />

        </div>
    )
};

这是返回错误：

Server Error
ReferenceError: self is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.<anonymous>
file:///home/myProject/sistema-web-myProject/be-front/node_modules/powerbi-client-react/dist/powerbi-client-react.js (1:452)
Module._compile
internal/modules/cjs/loader.js (1085:14)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1114:10)
module.load
internal/modules/cjs/loader.js (950:32)
Function.Module._load
internal/modules/cjs/loader.js (790:12)
module.require
internal/modules/cjs/loader.js (974:19)
require
internal/modules/cjs/helpers.js (101:18)
Object.powerbi-client-react
file:///home/myProject/sistema-web-myProject/be-front/.next/server/pages/dashboards/pbi.js (52:18)
__webpack_require__
file:///home/myProject/sistema-web-myProject/be-front/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./src/util/pbiEmbedded/pbi_getAccessToken.tsx (9:78)

对我来说，这听起来很奇怪，因为我在另一个用 javascript 编写的项目中使用了几乎相同的代码，但一切似乎都运行正常。

您能帮助我解决这个问题并了解发生了什么吗？

我也尝试使用 models.TokenType.Aad，但错误是一样的

我没有找到与此相关的任何内容

Answer 1

由于缺少窗口对象（服务器端渲染中不可用），您遇到了错误。

我们有以下 2 个选项可以解决此问题：

选项 1：在代码中使用窗口对象之前检查窗口对象是否存在。但是，这种方法可能需要跳过依赖于窗口对象的代码，这可能不适合我们的用例。

选项 2：使用动态导入或延迟加载仅在客户端加载使用窗口对象的代码。这种方法可确保代码仅在窗口对象可用的浏览器中执行，而无需跳过任何代码。

您可以尝试以下代码来使用动态导入：

import dynamic from 'next/dynamic'

import { EmbedProps } from 'powerbi-client-react';

import { models } from "powerbi-client";

const PowerBIEmbed = dynamic<EmbedProps>(() => 
import('powerbi-client-react').then(m => m.PowerBIEmbed), { ssr: false });

如果您需要任何进一步的帮助或说明，请告诉我。

Answer 2

除了 Madhav 的解决方案之外，我相信您可能还会使用另一个库以及 PowerBIEmbed。

import { models } from "powerbi-client";

这也需要动态导入。这是我在 useEffect 中实现它的方法。

 useEffect(() => {
    const loadModule = async () => {
      const { models } = await import("powerbi-client");
    };
    loadModule();
  }, []);

附注：对我来说，动态导入要求输入模型类型，因此我使用了 useEffect 方法。如果我们可以以某种方式动态导入，请告诉我。