[1.0] render component only in browser #931
Comments
|
Simplest way is load the data in componentDidMount. So when the component
renders on the server, only the default state is rendered.
…On Sun, May 7, 2017, 5:58 PM j000i ***@***.***> wrote:
Hello! Great works on the latest Gatsby alpha14!
I have a component that fetches headlines via RSS that I only want to
render in the client. Is there a recommended way to do this?
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#931>, or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAEVh0lQh8r7npFf2UgYwqfLCCxBd_Gsks5r3mivgaJpZM4NTX2N>
.
|
|
Hello @KyleAMathews! Thanks for the quick response (and all your amazing work)! I have a something along the lines of the following in my import Feed from "../components/Feed"
class Index extends React.Component {
constructor() {
super()
this.state = {
renderFeed: false,
}
}
componentDidMount() {
this.setState({ renderFeed: true })
}
render() {
const { renderFeed } = this.state
return (
<div>
{!renderFeed ? null : <Feed />}
</div>
)
}
}This works great in development mode ( AsyncUtils.js:79 Uncaught TypeError: n is not a function
at o (AsyncUtils.js:79)
at AsyncUtils.js:85
at split-child-routes.js:17
at split-child-routes.js:18
at Function.t.e (bootstrap 15f086a…:66)
at split-child-routes.js:15
at Function.t.e (bootstrap 15f086a…:66)
at Object.getComponent (split-child-routes.js:13)
at r (getComponents.js:29)
at getComponents.js:41Any clue what this could be? Not sure what information I can provide to help you help me. I think I tried something like this when I played with alpha12 and it worked, but I trashed the source … :-/ |
|
PS: Just noticed that when visit another route and then go back, the component renders. |
|
What's asyncutils and n?
…On Sun, May 7, 2017, 6:18 PM j000i ***@***.***> wrote:
PS: Just noticed that when visit another route and then go back, the
component renders…
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#931 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAEVh7Te_LXfwXbzk5bkytD7KUAfxVeJks5r3m1ugaJpZM4NTX2N>
.
|
|
It's react-routers |
|
An excerpt of function mapAsync(array, work, callback) {
var length = array.length;
var values = [];
if (length === 0) return callback(null, values);
var isDone = false,
doneCount = 0;
function done(index, error, value) {
if (isDone) return;
if (error) {
isDone = true;
callback(error);
} else {
values[index] = value;
isDone = ++doneCount === length;
// next line is where "n is not a function" occurs
if (isDone) callback(null, values);
}
}
array.forEach(function (item, index) {
work(item, index, function (error, value) {
done(index, error, value);
});
});
} |
|
Try returning an empty |
|
In an effort to at least eliminate all the other stuff that could be wrong on my side, I just cloned your blog (https://github.com/KyleAMathews/blog) and can confirm that the same thing happens if I add the … wow! Your answer just came in. Thank you so much – let me give that a shot! |
|
With |
|
BTW, are you exporting the component? |
|
My original feed component yes. But the inline I just tried the simple NO FEED/FEED "test" with your blog at KyleAMathews/blog@7fa4ded with alpha13 and there things seem to work as expected: The output with JavaScript activated for both |
|
Hmmmm seems like you've found a bug of some sort. Do you want to try using |
|
Here's a good tutorial for using git bisect if you haven't used it before http://webchick.net/node/99 |
|
Of course! Will take a look! |
|
Wow, didn't know about For today I can add one more thing – I found the alpha13 version that I mentioned earlier where things were still working: |
|
That's the nice thing about bisect, you don't have to understand anything
about the code just whether it works or not :-)
…On Sun, May 7, 2017, 7:51 PM Joy ***@***.***> wrote:
Wow, didn't know about git bisect, nice! I will see if I can get my head
around stepping through compiling stuff, don't know if I can go along with
the changes to the GraphQL layer myself. ;-)
For today I can add one more thing – I found the alpha13 version that I
mentioned earlier where things were still working:
1.0.0-alpha13-alpha.537d11c6.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#931 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAEVh54Phe0uQp40_ASkRb_PWdbTW1szks5r3oMsgaJpZM4NTX2N>
.
|
|
Just to be in the clear about this – one should do |
|
Not necessarily... though that'd be safest
…On Sun, May 7, 2017, 8:34 PM Joy ***@***.***> wrote:
Just to be in the clear about this – one should do npm install && lerna
bootstrap && npm run build after every checkout that bisect does, right?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#931 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAEVh9R-o-8rSjjEtZ9IuteT9WcSBV3rks5r3o08gaJpZM4NTX2N>
.
|
|
Many changes are code only. Those are necessary only if package
dependencies change
…On Sun, May 7, 2017, 8:54 PM Kyle Mathews ***@***.***> wrote:
Not necessarily... though that'd be safest
On Sun, May 7, 2017, 8:34 PM Joy ***@***.***> wrote:
> Just to be in the clear about this – one should do npm install && lerna
> bootstrap && npm run build after every checkout that bisect does, right?
>
> —
> You are receiving this because you were mentioned.
>
>
> Reply to this email directly, view it on GitHub
> <#931 (comment)>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/AAEVh9R-o-8rSjjEtZ9IuteT9WcSBV3rks5r3o08gaJpZM4NTX2N>
> .
>
|
So only Going the super-safe My import React from "react"
import PropTypes from "prop-types"
class Index extends React.Component {
constructor() {
super()
this.state = {
renderFeed: false,
}
}
componentDidMount() {
this.setState({ renderFeed: true })
}
render() {
const { renderFeed } = this.state
const author = this.props.data.site.siteMetadata.author
return (
<div>
<h1>
{author}
</h1>
{!renderFeed ? <div>NO FEED</div> : <div>FEED</div>}
</div>
)
}
}
Index.propTypes = {
data: PropTypes.object.isRequired,
}
export default Index
export const pageQuery = `{
site {
siteMetadata {
author
}
}
}
`The TypeError also occurs if I remove the import React from "react"
class Index extends React.Component {
constructor() {
super()
this.state = {
renderFeed: false,
}
}
componentDidMount() {
this.setState({ renderFeed: true })
}
render() {
const { renderFeed } = this.state
return (
<div>
{!renderFeed ? <div>NO FEED</div> : <div>FEED</div>}
</div>
)
}
}
export default Index |
|
That commit added an error log to gatsby-link which wasn't there before. This error is about production code only. It could be that the error was there before but got swallowed. Regarding |
👍
While I don't know that, the behavior def. changes with f66abd3 as the simple |
|
On second thought since you're not even using gatsby-link, I guess the error handling part is likely not related 🙂 The commit is messy because unrelated commits seemed to have merged into one, but I don't see anything suspicious... |
I tried to look through it and didn't see anything jumping at me, but I doubt I can be of any help here. |
|
I had been testing in Chrome only up to now, now I gave Firefox and Safari as well as Safari on iOS a spin: Firefox does not show the error in the console, it just does not render the component at all. Both Safaris raise the same error as Chrome. |
|
@KyleAMathews I did do it manually with I'm still debugging btw. (well, trying to ;-)) – if I strip all tag- and blog-related code and Helmet, etc., things are working. I'm currently removing stuff one-by-one to find out when things start working. |
|
I think I got it! 🎉 ;-) If I would have read more thoroughly, I would have thought a little more about things when @0x80 mentioned the following:
In fact, import React from "react"
import Link from "gatsby-link"
class Index extends React.Component {
constructor() {
super()
this.state = {
renderFeed: false,
}
}
componentDidMount() {
this.setState({ renderFeed: true })
}
render() {
const { renderFeed } = this.state
return (
<div>
<Link to="/">
Home
</Link>
{!renderFeed ? <div>NO FEED</div> : <div>FEED</div>}
</div>
)
}
}
export default Index(which is identical to what I posted in my previous comment apart from adding the |
|
When I move that link from |
|
Last comment (hopefully – I took away too much of your time already): After manually reverting 25dc2f2, rebuilding Gatsby, copying via
earlier. |
no not at all! We're actually secretly training you on how to contribute to Gatsby so once you're trained up you'll save us a lot of time by fixing all sorts of things you run into :-) You're doing a really good job working through the problem. Huh, so yeah, looks like this is a real bug somewhere... I'm actually going to be spending the next few days upgrading Gatsby to use RR v4 so might end up fixing this bug in the process :-) |
:) True, I got to know a bunch of new things! 👍
Really? I wouldn't have thought so, thank you!
Yay for RR4! Good luck! |
|
@j000i Chiming in to confirm your findings. I just upgraded a small site I'm building from alpha13 to alpha14, and while things worked fine on localhost, I also ran into the problems your described after deploying the production build and testing. After patching gatsby-link as per your description everything is "working" again. Thank you for your efforts, and kudos to @KyleAMathews and @0x80 for being so responsive and helpful! |
|
@fk Love your site btw :-) gorgeous! You should add it to the list of Gatsby sites! |
|
@KyleAMathews Thank you so much for your kind words! The site originally started as a small "social links" one pager, but when I saw what you did for https://www.gatsbyjs.org/blog/ regarding (responsive) images, I couldn't help but talking @yisela into adding some of her existing articles. Things are a little rough around the edges still and we have some more ideas for article layout, but Gatsby + Typography.js made it really, really easy to get off the ground. Btw., that Dribbble feed is based on some old component I had laying around … and guess what, it's the only slow thing on the site. Everything else is blazing fast (and 90% your work – which is much appreciated)! Thank you! |
|
Just updated to 1.0.0-alpha14-alpha.ac7022a4 and the issue seems to be resolved! 🎉 |
|
Hello @KyleAMathews ... wow that went fast! |
|
Yeah! |
Hello! Great work on the latest Gatsby alpha14!
I have a component that fetches headlines via RSS that I only want to render in the client. Is there a recommended way to do this?
The text was updated successfully, but these errors were encountered: