search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.44k stars 2.72k forks source link

Cannot read property 'toLowerCase' of undefined #19070

Closed rushj22 closed 3 years ago

rushj22 commented 3 years ago

Environment Information

Describe the issue:

I have added a fluent dependency @fluentui/react-file-type-icons": "^8.0.3 to my package.json. On running the code, my app is crashing with the following stack

Actual behavior:

07-21 21:38:44.876 15705 15849 E ReactNativeJS: V8Runtime:: webpack-internal:///../../common/temp/node_modules/.pnpm/@fluentui/style-utilities@8.2.0_71b5a23078fbc1f5ab3b45729a7ec774/node_modules/@fluentui/style-utilities/lib/index.js:645: TypeError: Cannot read property 'toLowerCase' of undefined 07-21 21:38:44.876 15705 15849 E ReactNativeJS: var userAgent = nav ? nav.userAgent.toLowerCase() : undefined; 07-21 21:38:44.876 15705 15849 E ReactNativeJS: ^ 07-21 21:38:44.876 15705 15849 E ReactNativeJS: TypeError: Cannot read property 'toLowerCase' of undefined 07-21 21:38:44.876 15705 15849 E ReactNativeJS: at getVendorSettings (webpack-internal:///../../common/temp/node_modules/.pnpm/@fluentui/style-utilities@8.2.0_71b5a23078fbc1f5ab3b45729a7ec774/node_modules/@fluentui/style-utilities/lib/index.js:645:45) 07-21 21:38:44.876 15705 15849 E ReactNativeJS: at prefixRules (webpack-internal:///../../common/temp/node_modules/.pnpm/@fluentui/style-utilities@8.2.0_71b5a23078fbc1f5ab3b45729a7ec774/node_modules/@fluentui/style-utilities/lib/index.js:678:26) 07-21 21:38:44.876 15705 15849 E ReactNativeJS: at serializeRuleEntries (webpack-internal:///../../common/temp/node_modules/.pnpm/@fluentui/style-utilities@8.2.0_71b5a23078fbc1f5ab3b45729a7ec774/node_modules/@fluentui/style-utilities/lib/index.js:1048:9) 07-21 21:38:44.876 15705 15849 E ReactNativeJS: at styleToRegistration (webpack-internal:///../../common/temp/node_modules/.pnpm/@fluentui/style-utilities@8.2.0_71b5a23078fbc1f5ab3b45729a7ec774/node_modules/@fluentui/style-utilities/lib/index.js:1075:46) 07-21 21:38:44.876 15705 15849 E ReactNativeJS: at styleToClassName (webpack-internal:///../../common/temp/node_modules/.pnpm/@fluentui/style-utilities@8.2.0_71b5a23078fbc1f5ab3b45729a7ec774/node_modules/@fluentui/style-utilities/lib/index.js:1113:44) 07-21 21:38:44.876 15705 15849 E ReactNativeJS: at mergeCss (webpack-internal:///../../common/temp/node_modules/.pnpm/@fluentui/style-utilities@8.2.0_71b5a23078fbc1f5ab3b45729a7ec774/node_modules/@fluentui/style-utilities/lib/index.js:1147:22) 07-21 21:38:44.876 15705 15849 E ReactNativeJS: at mergeStyles (webpack-internal:///../../common/temp/node_modules/.pnpm/@fluentui/style-utilities@8.2.0_71b5a23078fbc1f5ab3b45729a7ec774/node_modules/@fluentui/style-utilities/lib/index.js:1135:12) 07-21 21:38:44.876 15705 15849 E ReactNativeJS: at eval (webpack-internal:///../../common/temp/node_modules/.pnpm/@fluentui/style-utilities@8.2.0_71b5a23078fbc1f5ab3b45729a7ec774/node_modules/@fluentui/style-utilities/lib/index.js:2275:31) 07-21 21:38:44.876 15705 15849 E ReactNativeJS: at Module.../../common/temp/node_modules/.pnpm/@fluentui/style-utilities@8.2.0_71b5a23078fbc1f5ab3b45729a7ec774/node_modules/@fluentui/style-utilities/lib/index.js (:582:1) 07-21 21:38:44.876 15705 15849 E ReactNativeJS: at __webpack_require__ (:20:30)

Expected behavior:

App does not crash at runtime

If applicable, please provide a codepen repro:

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? (Yes, No) No

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

ling1726 commented 3 years ago

@rushj22 looking at that stack trace, are you using React Native ?

rushj22 commented 3 years ago

Yes @ling1726

ecraig12345 commented 3 years ago

It looks like something is accessing navigator.userAgent without a check for whether it's defined. Adding that check would be easy enough, but since typescript typings for Navigator list userAgent as required, it's entirely possible that the issue will come back in the future.

The easiest way to work around this and ensure the issue won't reoccur would be setting navigator.userAgent = '' or navigator.userAgent = 'ReactNative' (the value doesn't really matter) within your app.

If anyone does want to fix this, it looks like the issue is present in the following files (search for userAgent):

Augani commented 3 years ago

@ecraig12345 Can i take this?

rushj22 commented 3 years ago

@ecraig12345 I see the call stack code in getVendorSettings.ts. What is the relevance of the other two files?

FYI: userAgent is a readonly element so setting it to empty may not work/be feasible

rushj22 commented 3 years ago

Fixed in above PR and verified on local that the crash is not reproing anymore. Hence, closing this issue.