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)
- [Suggestion]: Add `isPending` example to `useActionState` docs HOT 1
- [Bug]: Error Boundaries Caveats are not added in the new docs
- [Bug]: Code editor not displaying code when scrolling
- [Typo]: In Sharing State Between Components HOT 2
- [Typo]: Spelling Mistake in Resource and Metadata Components
- [Suggestion]: Adding a Scroll-To-top Button .
- .
- Link to React 16 documentation (https://16.react.dev/) is redirecting to React 17 documentation. HOT 3
- Some recommended alternatives to useEffect are less declarative and concise
- useState
- not open the page HOT 1
- Error in section "What happens if you replace state after updating it" explanation of code execution HOT 5
- [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
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.