These are chat archives for redfin/react-server

14th
Jul 2016
Perry Shuman
@Noirbot
Jul 14 2016 01:36
Does Json-loader come with React-Server?
Perry Shuman
@Noirbot
Jul 14 2016 17:48
Ah, cool, that explains some things
That said, i'm now hung up on an odd problem
I had a bit of hardcoded test JSON that I was using
and I moved to doing the JSON Loader
And now it's not rendering and throwing an error about the server-rendered content not checking cleanly on the client side
Douglas Wade
@doug-wade
Jul 14 2016 17:49
e.g. var json = require("json!./file.json”); ?
Perry Shuman
@Noirbot
Jul 14 2016 17:49
Yea
Douglas Wade
@doug-wade
Jul 14 2016 17:50
It’s the checksum error?
Perry Shuman
@Noirbot
Jul 14 2016 17:50
Yup
Exact same data, but if I pull it in from a file instead of just making it inline it breaks the checksum
Douglas Wade
@doug-wade
Jul 14 2016 17:50
That is very strange. I would have expected a Error: Cannot find module 'json!./file.json’
Perry Shuman
@Noirbot
Jul 14 2016 17:50
Oh, wait
No, I had that error
and it's working now without the json!
Which is, itself, somewhat confusing
Douglas Wade
@doug-wade
Jul 14 2016 17:51
Seems reasonable — the node module loader handles json natively
But webpack didn’t emit any errors?
Perry Shuman
@Noirbot
Jul 14 2016 17:52
Not that I've seen
the local console says it's fine
and I see the content flash up on the page for a split second when I load the page
and then it disappears
Bo Borgerson
@gigabo
Jul 14 2016 17:53
:confused:
Perry Shuman
@Noirbot
Jul 14 2016 17:53
I didn't finish completely debugging it this morning
before work
Just wasn't sure if there was some known issue with JSON
Bo Borgerson
@gigabo
Jul 14 2016 17:54
Not something we've tried, I think.
Definitely worth getting working!
Douglas Wade
@doug-wade
Jul 14 2016 17:55
hmmm, sounds like the server-rendering is sending reasonable markup, but that client-rendering is failing
Perry Shuman
@Noirbot
Jul 14 2016 17:55
I know almost nothing about how server-rendering actually works in React-land
Which, I suppose is credit to how easy this framework is to use that I got this far :P
Douglas Wade
@doug-wade
Jul 14 2016 17:56
:heart:
Do you have a simple repro I can hack on?
Perry Shuman
@Noirbot
Jul 14 2016 17:56
yea, let me pull it up
I warn, it's probably an abomination to good code :P
This is what happens when a QA/Ops engineer decides to do front-end
Douglas Wade
@doug-wade
Jul 14 2016 17:57

pokefight

I like it already

Perry Shuman
@Noirbot
Jul 14 2016 17:57
haha
Yea, recreating a Pokemon type-matchup site that used to exist
Douglas Wade
@doug-wade
Jul 14 2016 17:58
kk, so this is the json you’re trying to require: https://gitlab.com/Noirbot/pokefight/blob/master/data/pokemon.json
Perry Shuman
@Noirbot
Jul 14 2016 17:58
yea
Douglas Wade
@doug-wade
Jul 14 2016 18:03
yeah, I def repro locally
Perry Shuman
@Noirbot
Jul 14 2016 18:03
I really wish the checksum error was clearer about what part was actually breaking
it seems like it's just giving me 10 characters from the middle of a tag
which is pretty much worthless for debugging
I wonder if this is unique to loading a local file, or if it would repro against an API that returned JSON
Douglas Wade
@doug-wade
Jul 14 2016 18:11
I suspect this is unique to loading a local file
Perry Shuman
@Noirbot
Jul 14 2016 18:11
Hmm, interesting
Douglas Wade
@doug-wade
Jul 14 2016 18:12
I’ve added the json loader to react-server-cli and linked it locally, and am getting an exception from your styles
ERROR in ./styles/style.css
Module build failed: SyntaxError: Unexpected token b
    at Object.parse (native)
    at Object.module.exports (/Users/doug.wade/code/react-server/packages/react-server-cli/node_modules/json-loader/index.js:7:48)
 @ ./pokefight.js 31:0-29
Bo Borgerson
@gigabo
Jul 14 2016 18:14
Why is the json loader picking up css?
Douglas Wade
@doug-wade
Jul 14 2016 18:14
:face palm:
            loaders: [
                …
                {
                    test: /\.css/,
                    loader: "json",
                    exclude: /node_modules/,
                },
Perry Shuman
@Noirbot
Jul 14 2016 18:15
wut
Douglas Wade
@doug-wade
Jul 14 2016 18:15
I loaded css with the json loader because copypasta
Perry Shuman
@Noirbot
Jul 14 2016 18:15
haha
So it's an issue with loading it via node's loader vs. through Webpack, it seems?
Douglas Wade
@doug-wade
Jul 14 2016 18:17
:grinning:
Screen Shot 2016-07-14 at 11.17.00 AM.png
Perry Shuman
@Noirbot
Jul 14 2016 18:18
Nice
So, what was the fix?
Douglas Wade
@doug-wade
Jul 14 2016 18:18
redfin/react-server#348
Perry Shuman
@Noirbot
Jul 14 2016 18:20
Ah, awesome
So does the server rendering just require that everything be pulled in through Webpack?
In order to checksum correctly?
Because in that case, there may be some issues with other data-file formats like .csv
Douglas Wade
@doug-wade
Jul 14 2016 18:39
does the server rendering just require that everything be pulled in through Webpack
I don’t really get what you’re asking
On the server, we’re using the node.js built-in commonjs module loader
For the client, we’re using webpack
Perry Shuman
@Noirbot
Jul 14 2016 18:40
Ah
Ok
Douglas Wade
@doug-wade
Jul 14 2016 18:40
For me, the real question is: “Why didn’t we get a webpack error when loading an unsupported file?”
Perry Shuman
@Noirbot
Jul 14 2016 18:41
Potentially, it doesn't actually need to send the JSON to the client side
so maybe it's not going through webpack?
I have no idea
Assume I am very bad at this.