Next.js 14.2.6 集成 powerbi-client-react 1.4.0 构建时出现 ReferenceError: self is not defined 错误求助

兄弟，我之前也踩过这个坑！这个错误的根源很明确：Next.js在做静态页面生成（SSG）的时候，会在服务器端执行你的代码，但self是浏览器环境独有的全局对象，而powerbi-client-react依赖的window-post-message-proxy库直接引用了它，服务器端找不到这个对象就炸了。

给你几个亲测有效的解决办法：

方案一：动态导入PowerBI组件，彻底禁用SSR #

这是最稳妥的方法，让PowerBI相关组件只在浏览器端加载渲染，完全避开服务器端执行的场景。

你可以用Next.js的dynamic导入API，指定ssr: false：

import dynamic from 'next/dynamic';

// 动态导入PowerBIEmbed组件，只在客户端渲染
const PowerBIEmbed = dynamic(
  () => import('powerbi-client-react').then(mod => mod.PowerBIEmbed),
  {
    ssr: false,
    loading: () => <div>正在加载PowerBI报表...</div> // 可选的加载占位符
  }
);

之后在你的页面组件里直接使用这个PowerBIEmbed就行，它不会在服务器端执行，自然就不会触发self未定义的错误。

方案二：在Next配置中给webpack添加兼容处理 #

如果不想用动态导入，也可以通过webpack配置，在服务器端给self提供一个替代的全局对象：

// next.config.js
const webpack = require('webpack');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      // 给服务器端环境定义self为globalThis
      config.plugins.push(
        new webpack.DefinePlugin({
          self: 'globalThis',
        })
      );
      // 或者禁用掉window/self的fallback
      config.resolve.fallback = {
        ...config.resolve.fallback,
        window: false,
        self: false,
      };
    }
    return config;
  },
};

module.exports = nextConfig;

不过这个方案要注意，有些PowerBI的API可能还是依赖浏览器的其他特性，不如动态导入来得可靠。

方案三：确保工厂函数只在客户端执行 #

看你报错信息里提到了src/factories.ts，如果这个文件里有初始化PowerBI的代码，记得要把这些代码包裹在浏览器环境判断里，避免服务器端执行：

// src/factories.ts
let powerbiInstance;

// 只有在浏览器环境下才初始化PowerBI
if (typeof window !== 'undefined') {
  import('powerbi-client').then(mod => {
    powerbiInstance = mod.powerbi;
  });
}

export { powerbiInstance };

优先试试方案一，我当时就是用这个方法解决的，基本上一步到位。

备注：内容来源于stack exchange，提问作者VitorMendonca62