Server Error ReferenceError: window is not defined

[Nexxo]

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

[v-shex-msft · Accepted solution]

HI @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

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <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"
        />
      </div>
    );
  }
}

export default App;

Regards,

Xiaoxin Sheng

[Sanjeevan]

could you help me to navigate between the report pages by using this code