Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blank screen caused by loadTheme of Office Fabric starting 2019-03-12 #3593

Closed
coreyroth opened this issue Mar 13, 2019 · 13 comments

Comments

@coreyroth
Copy link

commented Mar 13, 2019

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
  • 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

This comment has been minimized.

Copy link
Collaborator

commented Mar 13, 2019

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

@Pekes317

This comment has been minimized.

Copy link

commented Mar 15, 2019

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

This comment has been minimized.

Copy link

commented Mar 18, 2019

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

@Promhize

This comment has been minimized.

Copy link

commented Mar 18, 2019

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

This comment has been minimized.

Copy link

commented Mar 21, 2019

Thanks that worked a Treat

@mikeschaefer

This comment has been minimized.

Copy link

commented Mar 29, 2019

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

This comment has been minimized.

Copy link

commented Apr 1, 2019

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

@gmparky

This comment has been minimized.

Copy link

commented Apr 1, 2019

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

@srideshpande

This comment has been minimized.

Copy link
Contributor

commented Apr 6, 2019

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

This comment has been minimized.

Copy link

commented Apr 8, 2019

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

@srideshpande srideshpande reopened this Apr 8, 2019

@srideshpande

This comment has been minimized.

Copy link
Contributor

commented Apr 8, 2019

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"
      }
    });
  1. packaged the web part
  2. Deployed it on a production tenant.
  3. Added to the site and then a page.
  4. Published and refreshed the page

I did not see that error.

Am I missing anything here?

Thanks,
Sri

@andrewconnell

This comment has been minimized.

Copy link
Collaborator

commented Jun 19, 2019

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

@coreyroth

This comment has been minimized.

Copy link
Author

commented Jun 19, 2019

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.

@coreyroth coreyroth closed this Jun 19, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.