Power BI is turning 10! Tune in for a special live episode on July 24 with behind-the-scenes stories, product evolution highlights, and a sneak peek at what’s in store for the future.
Save the dateEnhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.
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
Solved! Go to 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)
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
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
could you help me to navigate between the report pages by using this code