Comments (13)
Yeah, something along those lines.
- Wrap the search input in its own React component
- Determine if search functionality is disabled (or if docsearch failed to load)
- Render the component in a disabled state if so
Haven't thought a ton about it yet :)
from react.dev.
I experienced a similar issue of the page flashing rendered content and then going blank. The chrome extension Fair AdBlockr was responsible and whitelisting the site solved the problem. (summarized from original description filed on facebook/react#11015 )
On the blank page the react dev tools only show these 4 components & their children:
<t code ="class HelloMessage extends React.Component { ren...">...</t>
<t code ="class Timer extends React.Component { constructo..">...</t>
<t code ="class TodoApp extends React.Component { construc..">...</t>
<t code ="class MarkdownEditor extends React.Component { c..">...</t>
I also get the following errors logged to the console
react-dom.production.min.js:187 ReferenceError: docsearch is not defined
at t.componentDidMount (component---src-layouts-index-js-673385803e28183fd482.js:2)
at commitLifeCycles (react-dom.production.min.js:169)
at n (react-dom.production.min.js:180)
at u (react-dom.production.min.js:183)
at c (react-dom.production.min.js:184)
at h (react-dom.production.min.js:188)
at m (react-dom.production.min.js:187)
at Object.updateContainer (react-dom.production.min.js:248)
at react-dom.production.min.js:254
at Object.unbatchedUpdates (react-dom.production.min.js:190)
d @ react-dom.production.min.js:187
n @ react-dom.production.min.js:181
u @ react-dom.production.min.js:183
c @ react-dom.production.min.js:184
h @ react-dom.production.min.js:188
m @ react-dom.production.min.js:187
updateContainer @ react-dom.production.min.js:248
(anonymous) @ react-dom.production.min.js:254
unbatchedUpdates @ react-dom.production.min.js:190
pt @ react-dom.production.min.js:254
render @ react-dom.production.min.js:255
(anonymous) @ production-app.js:175
setTimeout (async)
(anonymous) @ ready.js:27
(anonymous) @ production-app.js:174
d @ loader.js:283
(anonymous) @ loader.js:295
(anonymous) @ loader.js:95
(anonymous) @ loader.js:78
(anonymous) @ home.js?e849:9
r @ patch.js:18
(anonymous) @ patch.js:39
window.webpackJsonp @ bootstrap 204fe8abcae5944a97df:20
(anonymous) @ component---src-templates-home-js-cacc940266ddbdfb25ea.js:1
component---src-templates-home-js-cacc940266ddbdfb25ea.js:11 ReferenceError: Babel is not defined
at y (component---src-templates-home-js-cacc940266ddbdfb25ea.js:11)
at t._updateState (component---src-templates-home-js-cacc940266ddbdfb25ea.js:11)
at new t (component---src-templates-home-js-cacc940266ddbdfb25ea.js:11)
at constructClassInstance (react-dom.production.min.js:140)
at beginWork (react-dom.production.min.js:150)
at s (react-dom.production.min.js:182)
at u (react-dom.production.min.js:183)
at c (react-dom.production.min.js:184)
at h (react-dom.production.min.js:188)
at m (react-dom.production.min.js:187)
t._updateState @ component---src-templates-home-js-cacc940266ddbdfb25ea.js:11
t @ component---src-templates-home-js-cacc940266ddbdfb25ea.js:11
constructClassInstance @ react-dom.production.min.js:140
beginWork @ react-dom.production.min.js:150
s @ react-dom.production.min.js:182
u @ react-dom.production.min.js:183
c @ react-dom.production.min.js:184
h @ react-dom.production.min.js:188
m @ react-dom.production.min.js:187
updateContainer @ react-dom.production.min.js:248
(anonymous) @ react-dom.production.min.js:254
unbatchedUpdates @ react-dom.production.min.js:190
pt @ react-dom.production.min.js:254
render @ react-dom.production.min.js:255
(anonymous) @ production-app.js:175
setTimeout (async)
(anonymous) @ ready.js:27
(anonymous) @ production-app.js:174
d @ loader.js:283
(anonymous) @ loader.js:295
(anonymous) @ loader.js:95
(anonymous) @ loader.js:78
(anonymous) @ home.js?e849:9
r @ patch.js:18
(anonymous) @ patch.js:39
window.webpackJsonp @ bootstrap 204fe8abcae5944a97df:20
(anonymous) @ component---src-templates-home-js-cacc940266ddbdfb25ea.js:1
react-dom.production.min.js:185 Uncaught ReferenceError: docsearch is not defined
at t.componentDidMount (component---src-layouts-index-js-673385803e28183fd482.js:2)
at commitLifeCycles (react-dom.production.min.js:169)
at n (react-dom.production.min.js:180)
at u (react-dom.production.min.js:183)
at c (react-dom.production.min.js:184)
at h (react-dom.production.min.js:188)
at m (react-dom.production.min.js:187)
at Object.updateContainer (react-dom.production.min.js:248)
at react-dom.production.min.js:254
at Object.unbatchedUpdates (react-dom.production.min.js:190)
t.componentDidMount @ component---src-layouts-index-js-673385803e28183fd482.js:2
commitLifeCycles @ react-dom.production.min.js:169
n @ react-dom.production.min.js:180
u @ react-dom.production.min.js:183
c @ react-dom.production.min.js:184
h @ react-dom.production.min.js:188
m @ react-dom.production.min.js:187
updateContainer @ react-dom.production.min.js:248
(anonymous) @ react-dom.production.min.js:254
unbatchedUpdates @ react-dom.production.min.js:190
pt @ react-dom.production.min.js:254
render @ react-dom.production.min.js:255
(anonymous) @ production-app.js:175
setTimeout (async)
(anonymous) @ ready.js:27
(anonymous) @ production-app.js:174
d @ loader.js:283
(anonymous) @ loader.js:295
(anonymous) @ loader.js:95
(anonymous) @ loader.js:78
(anonymous) @ home.js?e849:9
r @ patch.js:18
(anonymous) @ patch.js:39
window.webpackJsonp @ bootstrap 204fe8abcae5944a97df:20
(anonymous) @ component---src-templates-home-js-cacc940266ddbdfb25ea.js:1
The new page is super fast when it works! Hope this helps debug the issue.
from react.dev.
While reproducing this error in development, got the following error in console
Where will the error boundary have to be added to tackle this? (maybe at .cache/root.js:120)
from react.dev.
Maybe we can check if docsearch is unavailable and change the layout screen e.g asking the user to whitelist the page, clean site data, etc?
I did it here by checking if the variable is available on window, maybe I can open a PR? I think this can help #9 as well.
I still need the layout and the message to display in this case.
from react.dev.
I think just gracefully disabling the site-search feature is probably a safer bet. This would enable people to access the site docs even if the CDN was down, or they didn't want to add the site to the whitelist, etc.
from react.dev.
I think I got it.
Ok, in this case it's just a different behavior from i've mentalized. Instead of displaying a new screen, It should just hide the algolia docsearch form away. Tell me what you think on passing a prop to the Header component that says if the global variable docsearch is defined?
from react.dev.
Can you assign this to me? :)
from react.dev.
It's all yours, @SadPandaBear. (I can't actually assign to you b'c GitHub won't let me, but I've marked it "in progress" so no one else will take it.)
If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.
Cheers!
from react.dev.
Removing the in-progress label since the docsearch related changes don't resolve the issue originally reported :)
from react.dev.
Marking as in-progress for @emmafallancy 👍
from react.dev.
@bvaughn I've made a fix regarding the error when cookies disabled directly at Gatsby #2614
I am not particularly sure if there's any way that error boundary would be possible to do the fix on preventing the page being unmounted since the error itself happened within the ScrollContext
, which is being used in router middleware. I've tried implementing the error boundary in within the pages too but it still couldn't capture the error. Also, I could possibly overlook on this if anyone has any clue how to prevent it.
Let me know what you have in mind 😃
from react.dev.
Thanks for all of your hard work on this issue, @emmafallancy.
from react.dev.
@bvaughn No probs 👍 Glad that it worked well
from react.dev.
Related Issues (20)
- [Mistake]: React 19 says that startTransition callback must be synchronous. It is not true. HOT 1
- React Fiber documentation not present in the current Docs
- [Bug]: ERR_SSL_PROTOCOL_ERROR on Translations Page
- [Suggestion]: Update the starter code in sandbox of Tic tac toe game tutorial
- [Suggestion]: Improve code in Tic-Tac-Toe demo HOT 3
- [Suggestion]: How to avoid null checks when initializing useRef later
- Doc not found: https://react.dev/contributing/design-principles.html
- [Bug]: No Mention of RFCs (or ANY Way to Provide Feedback) on Site HOT 1
- React components should be pure, not "idempotent" HOT 2
- page does not exist HOT 1
- Fetching data with Effects
- [Bug]: The sandpack bundler aint working HOT 1
- [Bug]: Missing explanation
- [Suggestion]: Reference: component prop list shoud be more readable
- [Suggestion]: Broken link in README.md for react-html package HOT 4
- [Suggestion]: items in the sidebar tree should collapse on clicking.
- [Typo]: Minor typo in Updating Objects in State HOT 2
- Several pages not found in Prerequisites at React Fiber Architecture.
- Link in react console warning is not found
- Broken warning URL in console HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.dev.