Server Error ReferenceError: window is not defined

Question

Hi, I'm developing an application in next.js (typescript) that uses powerbi-client-react to render powerbi dashboards in the application.

In a simple react application I can do what I want but would like to do it in next.js.

Here's the error and code:

Server Error ReferenceError: window is not defined This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack new WindowPostMessageProxy file:///C:/Users/user/coding/project/node_modules/powerbi-client/dist/powerbi.js (5959:56) wpmpFactory file:///C:/Users/user/coding/project/node_modules/powerbi-client/dist/powerbi.js (8252:12) new Service file:///C:/Users/user/coding/project/node_modules/powerbi-client/dist/powerbi.js (10554:21) Object../src/powerbi-client.ts file:///C:/Users/user/coding/project/node_modules/powerbi-client/dist/powerbi.js (8858:15) __webpack_require__ file:///C:/Users/user/coding/project/node_modules/powerbi-client/dist/powerbi.js (33:30) <unknown> file:///C:/Users/user/coding/project/node_modules/powerbi-client/dist/powerbi.js (97:18) <unknown> file:///C:/Users/user/coding/project/node_modules/powerbi-client/dist/powerbi.js (100:10) webpackUniversalModuleDefinition file:///C:/Users/user/coding/project/node_modules/powerbi-client/dist/powerbi.js (6:20) Object.<anonymous> file:///C:/Users/user/coding/project/node_modules/powerbi-client/dist/powerbi.js (13:3) Module._compile node:internal/modules/cjs/loader (1101:14) import type { NextPage } from 'next' import React, { useState} from 'react' import Head from '../components/head' 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 }); const Home: NextPage = () => { const reportId = process.env.REACT_APP_REPORT_ID; const accessToken = process.env.REACT_APP_ACCESS_TOKEN; const embedUrl = `https://app.powerbi.com/reportEmbed?reportId=${reportId}&groupId=${groupId]` const [config] = useState<models.IReportEmbedConfiguration>({ type: 'report', embedUrl: embedUrl, tokenType: models.TokenType.Aad, accessToken: accessToken, settings: { panes: { filters: { expanded: false, visible: false } }, filterPaneEnabled: false, navContentPaneEnabled: false, zoomLevel: 1, background: 1, customLayout: { displayOption: models.DisplayOption.FitToWidth } } }); return ( <div> <Head/> <main> <div> <PowerBIEmbed embedConfig = { config } cssClassName = { "report-style-class vh-100"} /> </div> </main> </div> ) } export default Home

anonymous · Accepted Answer

HI&nbsp;Nexxo,
I'd like to suggest you take a look at the following link that includes usage sample with power bi embedded content and 'nextjs' if it helps:nextjs-powerbi - npm (npmjs.com)
Spoiler (Highlight to read)import React, { Component } from "react";
import PowerbiEmbedded from "nextjs-powerbi";

class App extends Component {
  render() {
    return (
      &lt;div className="App"&gt;
        &lt;PowerbiEmbedded
          id={`${YOUR_REPORT_ID}`} // required
          embedUrl={`${YOUR_EMBED_URL}`} // required
          accessToken={`${YOUR_EMBED_TOKEN}`} // required
          filterPaneEnabled={false}
          navContentPaneEnabled={false}
          pageName={`${YOUR_PAGE_ID}`}
          embedType={`${EMBED_TYPE}`}
          tokenType={`${TOKEN_TYPE}`}
          permissions={`${PERMISSIONS}`}
          settings={
            {
              // any settings including localeSettings
            }
          }
          width="600px"
          height="900px"
        /&gt;
      &lt;/div&gt;
    );
  }
}

export default App;import React, { Component } from "react";
import PowerbiEmbedded from "nextjs-powerbi";

class App extends Component {
  render() {
    return (
      &lt;div className="App"&gt;
        &lt;PowerbiEmbedded
          id={`${YOUR_REPORT_ID}`} // required
          embedUrl={`${YOUR_EMBED_URL}`} // required
          accessToken={`${YOUR_EMBED_TOKEN}`} // required
          filterPaneEnabled={false}
          navContentPaneEnabled={false}
          pageName={`${YOUR_PAGE_ID}`}
          embedType={`${EMBED_TYPE}`}
          tokenType={`${TOKEN_TYPE}`}
          permissions={`${PERMISSIONS}`}
          settings={
            {
              // any settings including localeSettings
            }
          }
          width="600px"
          height="900px"
        /&gt;
      &lt;/div&gt;
    );
  }
}

export default App;
Regards,
Xiaoxin Sheng

Forum Discussion

Server Error ReferenceError: window is not defined

2 Replies

Related content

Uncaught ReferenceError: ClipboardItem is not defined

un define

Uncaught ReferenceError: pbi is not defined

ClipboardItem is not defined

Fabric User Define Functions