Window is not defined

[moh-altimimi]

Hi,

I have installed powerbi-client-react, and have hardcoded in a valid token, report ID and embed URL.

I keep getting the following error, and I'm not sure why:

ReferenceError: window is not defined
    at Object.<anonymous> (...\powerbi-client-react\dist\powerbi-client-react.js:1:452)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.powerbi-client-react (...\.next\server\pages\reports\current-allocations.js:181:18)
    at __webpack_require__ (...\.next\server\pages\reports\current-allocations.js:23:31)
    at Module../pages/reports/current-allocations/index.tsx (...\.next\server\pages\reports\current-allocations.js:107:78)

Any help would be appreciated. Thanks!

[moh-altimimi]

Noticed this was a Next JS issue.

For anyones reference, I needed to dynamically load in the powerbi-client-react lib.

Closing!

[noahgary]

I also have this issue. Really need a workaround!

[pksorensen]

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 });

[lucasramosdev]

I tried what @pksorensen suggested and kept the same error. Anybody else can help me?

[rumurillo]

I'm having this exact same issue on my Nextjs app. I also tried the workaround suggested by @pksorensen, but I keep getting the same ReferenceError: window is not defined error.

[rumurillo]

Hey, @moh-altimimi -- do you have a workaround for this, since the issue was closed? If so, would you, please, share it with us?

Thanks!

[lucasramosdev]

Hi from Brazil!!

To resolve, do the following:

Create the entire Dashboard with its all its configurations in one component. Then dynamically import that componente on the page you want to display the dashboard.

Enviado do Emailhttps://go.microsoft.com/fwlink/?LinkId=550986 para Windows

De: Rubén @.> Enviado:terça-feira, 4 de janeiro de 2022 13:12 Para: @.> @.>; @.> Assunto: Re: [microsoft/powerbi-client-react] Window is not defined (#28)

I'm having this exact same issue on my Nextjs app. I also tried the workaround suggested by @pksorensenhttps://github.com/pksorensen, but I keep getting the same ReferenceError: window is not defined error.

— Reply to this email directly, view it on GitHubhttps://github.com/microsoft/powerbi-client-react/issues/28#issuecomment-1004941688, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ASCW3JGYDYIDBBEVIZNVCCTUUML5BANCNFSM4UPXCTGQ. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you commented.Message ID: @.***>

[rumurillo]

Yeah, that worked. Thanks, @mrproscrite -- appreciate the help!

[mcdowellalex]

What do you mean by "dynamically import"? I have all of the code in it's own component, and I'm importing that component onto my page. However, I still get this error. (I have copy and paste code from microsofts github demo on the powerbi embed library. Everything works fine locally because it isn't on a server, hence the window error)

I came across this before as well, and it does not help me either. (Supposed to be a nextjs wrapper for the powerbi embed component).

This window reference error is also the case with Gatsby or any other js framework. It is not a NextJS specific thing. It's because the powerbi-client dependency doesn't check if it is on a server before using the window. It should have the following in order to do that

if (typeof window !== 'undefined') {
  console.log('You are on the browser')
  // ✅ Can use window here
} else {
  console.log('You are on the server')
  // ⛔️ Don't use window here
}

[rumurillo]

So, by dynamically importing the component solved that issue for me.

Here's how:

My nextjs' page:

import dynamic from 'next/dynamic';
import { NextPage } from 'next';

const Dashboard: NextPage = () => {
  const DynamicDashboard = dynamic(() =>
    import('../components/dashboard/dynamicDashboard').then((dashboard) => dashboard.default),
  );

  return (
    <>
        <DynamicDashboard />
    </>
  );
};

export default Dashboard;

And then, my dynamic component: (simplified for brevity)

import { useIsAuthenticated } from '@azure/msal-react';
import { NextPage } from 'next';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';
...

const DynamicDashboard: NextPage = () => {
  ...
  return (
    <>
      <div className="dashboard">
              <PowerBIEmbed
                embedConfig={{
                  type: 'report',
                  id: powerBiCreds.reportId,
                  embedUrl: powerBiCreds.embedUrl,
                  accessToken: powerBiCreds.accessToken,
                  tokenType: models.TokenType.Embed,
                  settings: {
                    panes: {
                      filters: {
                        expanded: false,
                        visible: false,
                      },
                    },
                    background: models.BackgroundType.Transparent,
                  },
                  filters: filters,
                }}
                cssClassName={'powerbi-style'}
              />
            )}
      </div>
    </>
  );
};

export default DynamicDashboard;

Hope that helps, @mcdowellalex

[mcdowellalex]

Thank you! That seems to throw the window not defined error when running locally now, although it still runs fine. The build command doesn't throw any errors which is good, but I'll have to toss it up on a test site to see if it all works okay.

Still seems like something microsoft should fix. I feel like we shouldn't have to dynamically import their dependencies just to get them to work.

[mcdowellalex]

Hmmmm, now the dashboard won't take any CSS so it's stuck at like 50px by 50px haha.

Update: As I figured. I'm silly. The default setup for Next is a bit restricting when it comes to using classnames. Had to change up the way I the microsoft demo styled the component. Still have the log in console of the window not defined. Got a test site up and running on AWS though so clearly it works!