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

Fix: Clean up desktop UI console errors/warnings #2226

Merged
merged 1 commit into from
Jan 16, 2024
Merged

Conversation

leblowl
Copy link
Collaborator

@leblowl leblowl commented Jan 15, 2024

On desktop, the browser was emitting several errors/warnings that filled up the console. Some of these were related to React and then some of them related to HTML preload. The preload warning says, "A preload for {url} is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute." and then a little later it says, "The resource {url} was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally." Removing the crossorigin attribute on the font links removed the preload warning and it looks like everything is preloading correctly to me in dev/production (fonts load at the very beginning and no warnings). Maybe if CORS is not used then it also doesn't want crossorigin attribute.

Pull Request Checklist

  • I have linked this PR to related GitHub issue.
  • I have updated the CHANGELOG.md file with relevant changes (the file is located at the root of monorepo).

(Optional) Mobile checklist

Please ensure you completed the following checks if you did any changes to the mobile package:

  • I have run e2e tests for mobile
  • I have updated base screenshots for visual regression tests

@leblowl leblowl requested review from EmiM and siepra January 15, 2024 21:24
Leave community
</Typography>
</Grid>
)}
Copy link
Collaborator Author

@leblowl leblowl Jan 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apparently, when nesting certain things inside of material components that are not expecting it, weird errors can happen where it passes attributes to the DOM that it shouldn't. I figured this out by stumbling upon an issue that was describing something similar. I'm not sure where that issue went now, but can probably find it. Of course, it's easy to see how this causes errors by running the current version and the new changes.

@leblowl leblowl force-pushed the fix-js-warnings branch 2 times, most recently from ab646a6 to c56f115 Compare January 16, 2024 18:19
On desktop, the browser was emitting several errors/warnings that
filled up the console. Some of these were related to React and then
some of them related to HTML preload. The preload warning says, "A
preload for {url} is found, but is not used because the request
credentials mode does not match. Consider taking a look at crossorigin
attribute." and then a little later it says, "The resource {url} was
preloaded using link preload but not used within a few seconds from
the window's load event. Please make sure it has an appropriate `as`
value and it is preloaded intentionally." Removing the crossorigin
attribute on the font links removed the preload warning and it looks
like everything is preloading correctly to me in dev/production (fonts
load at the very beginning and no warnings). Maybe if CORS is not used
then it also doesn't want crossorigin attribute.
@leblowl leblowl merged commit 570a7a9 into develop Jan 16, 2024
16 of 21 checks passed
siepra pushed a commit that referenced this pull request Jan 17, 2024
On desktop, the browser was emitting several errors/warnings that
filled up the console. Some of these were related to React and then
some of them related to HTML preload. The preload warning says, "A
preload for {url} is found, but is not used because the request
credentials mode does not match. Consider taking a look at crossorigin
attribute." and then a little later it says, "The resource {url} was
preloaded using link preload but not used within a few seconds from
the window's load event. Please make sure it has an appropriate `as`
value and it is preloaded intentionally." Removing the crossorigin
attribute on the font links removed the preload warning and it looks
like everything is preloading correctly to me in dev/production (fonts
load at the very beginning and no warnings). Maybe if CORS is not used
then it also doesn't want crossorigin attribute.
leblowl added a commit that referenced this pull request Jan 18, 2024
On desktop, the browser was emitting several errors/warnings that
filled up the console. Some of these were related to React and then
some of them related to HTML preload. The preload warning says, "A
preload for {url} is found, but is not used because the request
credentials mode does not match. Consider taking a look at crossorigin
attribute." and then a little later it says, "The resource {url} was
preloaded using link preload but not used within a few seconds from
the window's load event. Please make sure it has an appropriate `as`
value and it is preloaded intentionally." Removing the crossorigin
attribute on the font links removed the preload warning and it looks
like everything is preloading correctly to me in dev/production (fonts
load at the very beginning and no warnings). Maybe if CORS is not used
then it also doesn't want crossorigin attribute.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants