Server Error ReferenceError: window is not defined

Nexxo — Fri, 07 Jan 2022 10:33:54 GMT

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

Re: Server Error ReferenceError: window is not defined

Anonymous — Tue, 04 Jan 2022 06:53:35 GMT

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)

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

Re: Server Error ReferenceError: window is not defined

Sanjeevan — Tue, 03 Oct 2023 08:48:03 GMT

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

topic Server Error ReferenceError: window is not defined in Developer

Server Error ReferenceError: window is not defined

Re: Server Error ReferenceError: window is not defined

Re: Server Error ReferenceError: window is not defined