Sp-dev-docs: Blank screen caused by loadTheme of Office Fabric starting 2019-03-12

[coreyroth]

We have several SPFx web parts in multiple solutions that use loadTheme from Office Fabric with a custom color palette. Starting yesterday, we started having issues reported that our pages were showing up as blank. The page renders and then nothing but the suite bar is shown.

This issue started on the afternoon of 2019-03-12 and affects multiple tenants for us.

Looking at the console, we see the following error:

sp-pages-assembly_en-us_1ba58d40502a1529520e7281a1c23097.js:920 TypeError: Cannot read property 'roundedCorner2' of undefined
at C (sp-pages-assembly_en-us_1ba58d40502a1529520e7281a1c23097.js:91)
at Wn (sp-pages-assembly_en-us_1ba58d40502a1529520e7281a1c23097.js:920)
at u (sp-pages-assembly_en-us_1ba58d40502a1529520e7281a1c23097.js:920)
at sp-pages-assembly_en-us_1ba58d40502a1529520e7281a1c23097.js:920
at t.render (sp-pages-assembly_en-us_1ba58d40502a1529520e7281a1c23097.js:91)
at t.e.(/sites/DigitalIndex/SitePages/anonymous function) [as render] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-03-01.015/sp-pages-assembly_en-us_1ba58d40502a1529520e7281a1c23097.js:920:67795)
at Dn (sp-pages-assembly_en-us_1ba58d40502a1529520e7281a1c23097.js:920)
at Mn (sp-pages-assembly_en-us_1ba58d40502a1529520e7281a1c23097.js:920)
at zn (sp-pages-assembly_en-us_1ba58d40502a1529520e7281a1c23097.js:920)
at Zn (sp-pages-assembly_en-us_1ba58d40502a1529520e7281a1c23097.js:920)

Removing the call to loadTheme allows the page to render successfully.

Category

• [ ] Question
• [ ] Typo
• [X] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Page should render.

Observed Behavior

See images in the links below.
Image showing Issue

Image showing no issue with code removed

Steps to Reproduce

Add a call to your web part with loadTheme such as the snippet below:

loadTheme({ palette: { themePrimary: '#ee1100', themeLighterAlt: '#ff1a08', themeLighter: '#ff3222', themeLight: '#ff1a08', themeTertiary: '#71afe5', themeSecondary: '#2b88d8', themeDarkAlt: '#d50f00', themeDark: '#d50f00', themeDarker: '#bb0d00', neutralLighterAlt: '#f8f8f8', neutralLighter: '#f4f4f4', neutralLight: '#eaeaea', neutralQuaternaryAlt: '#dadada', neutralQuaternary: '#d0d0d0', neutralTertiaryAlt: '#c8c8c8', neutralTertiary: '#c2c2c2', neutralSecondary: '#858585', neutralPrimaryAlt: '#4b4b4b', neutralPrimary: '#333333', neutralDark: '#272727', black: '#1d1d1d', white: '#ffffff', } });

You may also see it caused in the repo below.
Repo

Submission Guidelines

Thanks for your contribution! Sharing is caring.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[Pekes317]

I just wanted to add that It seems to be an issue with Our tenant as well. On the modern pages. We've also noticed that random color changes occurred on other pages that didn't have SPFx webparts on them be theme to the default blue. Wonder if they are connected in some way. Thank you.

[gmparky]

I just wanted to add we are also having this issue and it's killed our company portal

[Promhize]

It's caused by the newer 6.x versions of ui-fabric which SharePoint online now uses. You need to upgrade to SharePoint Framework 1.8.0 or 😬patch the createTheme function in node_modules\@uifabric\styling\lib\styles\theme.js; add this to the object literal that it returns:

effects: { 
  elevation4: "0 0 5px 0 rgba(0,0,0,.4)", 
  elevation8: "0 0 5px 0 rgba(0,0,0,.4)", 
  elevation16: "0 0 5px 0 rgba(0,0,0,.4)", 
  elevation64: "0 0 5px 0 rgba(0,0,0,.4)", 
  roundedCorner2: "0px" 
},
spacing: { 
  l1: "20px", 
  l2: "32px", 
  m: "16px", 
  s1: "8px", 
  s2: "4px" 
}

Then rebuild and redeploy your webpart

[gmparky]

Thanks that worked a Treat

[mikeschaefer]

The 1.8 framework I was on didn't support fabric 6 either, had to follow instructions here:

http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2019/03/14/spfx-1-8-now-support-office-fabric-react-6-156-0.aspx

[TomasNielsen]

We ran into the same problem, following Promhize's suggestion solved it for us.

[gmparky]

I have been advised MS has a fix that is going through roll out but not sure when we will actually see it.

[srideshpande]

Hello Everyone,

Thanks for the patience. This issue should now be fixed. The fix is also rolled out to all the production tenants. So, can you please re-try and let us know, if you still see the issue?

For now, I am closing the issue, but please feel free to re-open it, if the issue persists.

Thanks,
Srikanth

[gmparky]

I am still having the same issue both in our Preview Tenant and our Live Tenant

[srideshpande]

Sorry for the confusion.

I tried to repro the issue in-house and I am not seeing the issue in a production tenant. This is what I did.

1. Created an out of the box SPFx web part with both 1.7.0 and 1.7.1
2. Added a loadTheme() call as below
   ~
   loadTheme({
   palette: {
   themePrimary: "#fe6e39",
   themeLighterAlt: "#fff9f7",
   themeLighter: "#ffe8df",
   themeLight: "#ffd3c3",
   themeTertiary: "#ffa788",
   themeSecondary: "#ff7f50",
   themeDarkAlt: "#e66232",
   themeDark: "#c2532b",
   themeDarker: "#8f3d1f",
   neutralLighterAlt: "#f8f8f8",
   neutralLighter: "#f4f4f4",
   neutralLight: "#eaeaea",
   neutralQuaternaryAlt: "#dadada",
   neutralQuaternary: "#d0d0d0",
   neutralTertiaryAlt: "#c8c8c8",
   neutralTertiary: "#b4bbc6",
   neutralSecondary: "#737e8c",
   neutralPrimaryAlt: "#404957",
   neutralPrimary: "#2d3540",
   neutralDark: "#222830",
   black: "#191d24",
   white: "#ffffff"
   }
   });
   ~
3. packaged the web part
4. Deployed it on a production tenant.
5. Added to the site and then a page.
6. Published and refreshed the page

I did not see that error.

Am I missing anything here?

Thanks,
Sri

[andrewconnell]

Can you confirm this issue is still present OP? Seems like this has been fixed in the latest Fabric & SPFx releases.

[coreyroth]

Hi Andrew. I pulled down the repo and got that version of SPFx running again and it seems to work now without any code changes. It's no longer an issue running on the existing version SPFx 1.5.1. I assume something changed service-side to correct this.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues