Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Window is not defined

See original GitHub issue

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!

Issue Analytics

State:
Created 3 years ago
Comments:12

Top GitHub Comments

2reactions

rumurillocommented, Mar 21, 2022

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

2reactions

pksorensencommented, Sep 10, 2021

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