Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more.
Get startedGrow your Fabric skills and prepare for the DP-600 certification exam by completing the latest Microsoft Fabric challenge.
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
Ask questions in Eventhouse and KQL, Eventstream, and Reflex.
Check out the May 2024 Power BI update to learn about new features.
User | Count |
---|---|
12 | |
3 | |
1 | |
1 | |
1 |
User | Count |
---|---|
15 | |
4 | |
3 | |
3 | |
2 |