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 reactjs.org.
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 reactjs.org.
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 reactjs.org.
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 reactjs.org.
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 reactjs.org.
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 reactjs.org.
Can you assign this to me? :)
from reactjs.org.
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 reactjs.org.
Removing the in-progress label since the docsearch related changes don't resolve the issue originally reported :)
from reactjs.org.
Marking as in-progress for @emmafallancy 👍
from reactjs.org.
@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 reactjs.org.
Thanks for all of your hard work on this issue, @emmafallancy.
from reactjs.org.
@bvaughn No probs 👍 Glad that it worked well
from reactjs.org.
Related Issues (20)
- [Typo]: Separating Events from Effects HOT 2
- te.react.dev push access issue HOT 2
- [Bug]: mouse hover generates too much traffic
- Capitalize React concepts in docs HOT 5
- [Typo]: useStateの例3/4の説明文で "liked" state変数が "linked" state変数となっている
- Add a Dynamic Footer HOT 1
- [Bug]: Unable to access the React.dev website in Nigeria HOT 2
- [Suggestion]: Adding an Explanation Text to Avoid any Confusion
- [Bug]: No new lines in error decoder errors HOT 2
- Changement de numero de telephone HOT 1
- [Suggestion]: Section from useContext might not be entirely accurate
- Unpredicted behaviour in Online Code editor[Bug]:
- Hey
- [Bug]: "Referencing Values with Refs" ref illustration leads to sketchy site
- This page doesn’t exist.
- [Suggestion]: Add some elaboration to the docs for TypeScript DOM events and Pure Functions
- ⚠Phishing Website Warning!!! There are phishing website links in the document. HOT 1
- [Bug]: photos in ref section of the tutorial are down
- [Suggestion]: shortcuts to localized sites?
- Not Found
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 reactjs.org.