[BUG] Constant design-token.js errors

[dougroutledge]

Since version 4.3 the browser console is polluted with thousands of of the same error.

It seems to be related to the underlying fluent UI being used by MGT.

[musale]

@dougroutledge is this happening on a specific component and framework?

[dougroutledge]

It doesn't seem to be any specific components, it errors constantly whether they are in use or not.

[musale]

What about the framework you're using? React, plain js etc? Please fill out the environment details to enable reproduction
Environment (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. edge, chrome, safari]
• Framework [e.g. react, vue, none]
• Context [e.g. Microsoft Teams, SharePoint, Office Add-ins, Web]
• Version [e.g. 0.1]
• Provider [e.g. Msal2Provider] (bonus if you share the provider config)

[dougroutledge]

OS: Any
Browser Any
Framework JS no framework
Context Web
Version 4.4.0
Provider Msal2Provider

const msalConfig = {
auth: {
clientId: "!removed!",
scopes: [ "profile", "email", "Calendars.Read", "Calendars.Read.Shared", "Chat.Read", "Chat.ReadWrite", "Contacts.Read", "Contacts.Read.Shared", "email", "Mail.Read", "Mail.Read.Shared", "Notifications.ReadWrite.CreatedByApp", "People.Read", "profile", "User.Read", "User.ReadBasic.All", "UserNotification.ReadWrite.CreatedByApp", "User.Read.All"],
loginType: "Popup",
forceRefresh: true
},
cache: {
cacheLocation: "sessionStorage", // This configures where your cache will be stored
storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
}
};

[ThomasPe]

Same for me specifically on the PeoplePicker in React

• Windows
• Edge
• Microsoft Teams
• Version: ^4.2.1
• TeamsFxProvider

[dougroutledge]

This is becoming a major issue, it is rendering complex pages unresponsive when no mgt controls on the page are even visible. The underlying MS fast elements library seems unable to deal with circular references or anything more complicated than a very basic static page. Browser reporting hung status as it spews thousands of lines of this.
When did this project switch to being dependent on fluent / fast elements? Can I have the date and version?

[Mnickii]

Hi @dougroutledge, the team is currently looking into this.

The project was built using Fluent Web components and in June last year we migrated to Fluent Web components v2 on our v3.0.0 release. These components are dependent on Fast elements.

[ThomasPe]

issue was introduced with @microsoft/fast-foundation version 2.50.0
I was able to mitigate the issue by pinning the version to:
"@microsoft/fast-foundation": "2.49.6",
in the package.json

Edit: Repro https://stackblitz.com/edit/d5ahzhyb?file=src%2FApp.tsx

[musale]

issue was introduced with @microsoft/fast-foundation version 2.50.0 I was able to mitigate the issue by pinning the version to: "@microsoft/fast-foundation": "2.49.6", in the package.json

Edit: Repro stackblitz.com/edit/d5ahzhyb?file=src%2FApp.tsx

Thank you @ThomasPe for this, I am able to reproduce this locally. What I see is that using the theme toggle with any component throws the range errors. On further scrutiny of the errors, the issue lies with fast-foundation updates in 2.50.0. This work around should work for now. I am also going to pin the version of fast-foundation to 2.49.6 in our latest release until a fix is made by the fast team. We shall monitor microsoft/fast#7057 for this. Cc @dougroutledge please let us know if this workaround works for you for now.

package.json

"resolutions": {
  "@microsoft/fast-foundation": "2.49.6"
}