Instruction to pass Lesson 8 - Isomorphic?

[fmcarvalho]

I already completed the implementation of Lesson 8 Isomorphic and apparently it is everything running fine when I test the program via browser.

I also understand instruction when it says: “NOTE: I think some of you might notice the difference of HTML in which by running verify and accessing http://localhost:3000.”

However I am not guessing what I have to do more to pass learnyoureact verification and complete this Lesson.

Can somebody help please?

[caoxiaoshuai1]

I use the same solution.js as it recommends,but can't pass Lesson 8 either.

[delaguilaluis]

Check if you're problem is related to the dependencies versions.

[johnykov]

I have a problem with this one, I managed to verify solution, code is being copied from solutions dir. But I see proper html file only after first page load and then when I reload or I try to navigate to /bundle.js I see this error in console:

events.js:160
      throw er; // Unhandled 'error' event
      ^

TypeError: Cannot read property 'error' of undefined (While processing preset: "/Users/jankowalski/projects/nodeschool/learnyoureact/node_modules/babel-preset-es2015/index.js") while parsing file: /Users/jankowalski/projects/nodeschool/learnyoureact/app.js

which indicates a problem with /babel-preset-es2015

[delaguilaluis]

Are you using the same packages versions used in the solution?

[johnykov]

yes, I copied from your repo:

  "dependencies": {
    "babel": "^5.8.23",
    "babelify": "~7.2.0",
    "babel-preset-react": "~6.1.18",
    "babel-preset-es2015": "~6.1.18",
    "body-parser": "~1.12.3",
    "browserify": "~10.1.3",
    "express": "~4.12.3",
    "express-react-views": "~0.9.0",
    "react": "~0.14.0",
    "reactify": "~1.1.1",
    "react-dom": "~0.14.0"

can you plese rm -rf node_modules / npm i and check your code with above dependecies? how does it behave after refresh?

[delaguilaluis]

@hanskoff I just tried that and I'm having the same problem as you do. Page load fines but crashes after reloading. :(

[johnykov]

Yes and that is how it works, now :( 26.01.2017 5:23 AM "Luis Del Aguila" <[email protected]> napisał(a):

…

@hanskoff <https://github.com/hanskoff> I just tried that and I'm having the same problem as you do. Page load fines but crashes after reloading. :( — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#111 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABFFM15YnC5SkyMkdMuWMpkvUnQFpNmbks5rWB-ngaJpZM4KV_Ly> .

[kaz080]

I had the same crash problem. And finally I found a way to avoid the crash. (I don't know why this causes crash problem, though.)

In program.js, change the code

require('babel/register')({
    ignore: false
});

as like this:

require('babel/register');

[johnykov]

hmm, thanks for hint but this time after refresh I see :(

$ node program.js 3000 Milk 13:00
(node:80175) DeprecationWarning: Using Buffer without `new` will soon stop working. Use `new Buffer()`, or preferably `Buffer.from()`, `Buffer.allocUnsafe()` or `Buffer.alloc()` instead.
/Users/jankowalski/projects/nodeschool/learnyoureact/node_modules/inline-source-map/node_modules/source-map/lib/source-map/source-map-generator.js:275
        throw new Error('Invalid mapping: ' + JSON.stringify({
        ^

Error: Invalid mapping: {"generated":{"line":19230,"column":11},"source":"index.jsx","original":{},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (/Users/jankowalski/projects/nodeschool/learnyoureact/node_modules/inline-source-map/node_modules/source-map/lib/source-map/source-map-generator.js:275:15)```

[kaz080]

Oh, yeah, sorry. I could reproduce that crash.

I forgot I had changed one more code when I was confirming behavior from simple example.
https://github.com/babel/babelify

I also changed this part of code:

    browserify({ debug: true })
        .transform(babelify.configure({
            presets: ["react", "es2015"],
            compact: false
        }))
        .require("./app.js", { entry: true })
        .bundle()
        .pipe(res);

to:

    browserify("./app.js")
        .transform("babelify", {presets: ["es2015", "react"]})
        .bundle()
        .pipe(res);

Here is full code of my program.js.

[johnykov]

Damn, that works like charm! thx ;) so maybe that will work with newer babel/react versions? not those specific? will check... and no, it doesn't work I fall into gulpjs/gulp#1359 2017-01-31 1:43 GMT+01:00 Kaz <[email protected]>:

…

Oh, yeah, sorry. I could reproduce that crash. I forgot I had changed one more code when I was confirming behavior from simple example. I also changed this part of code: browserify({ debug: true }) .transform(babelify.configure({ presets: ["react", "es2015"], compact: false })) .require("./app.js", { entry: true }) .bundle() .pipe(res); to: browserify("./app.js") .transform("babelify", {presets: ["es2015", "react"]}) .bundle() .pipe(res); Here <https://gist.github.com/kaz080/443312e3092e45c858126bcc94665ff2> is full code of my program.js. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#111 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABFFMzszalilg3OJxD9A3LKxfwJQeTiHks5rXoO8gaJpZM4KV_Ly> .

[kaz080]

Nice trial!
I also updated all packages to the latest version, and I had some errors.
But finally, it works fine!

I needed to change program.js like:

require("babel-core/register")({
    "presets": ["es2015", "react"]
});

and needed to add the line to index.jsx:

module.exports = TodoBox;

Here is my working answer, including package.json:
https://github.com/kaz080/learnyourreact-answer

[johnykov]

that is soo cool! great, thx 2017-02-02 6:39 GMT+01:00 Kaz <[email protected]>:

…

Nice trial! I also updated all packages to the latest version, and I had some errors. But finally, it works fine! I needed to change program.js like: require("babel-core/register")({ "presets": ["es2015", "react"] }); and needed to add the line to index.jsx: module.exports = TodoBox; Here is my working answer, including package.json: https://github.com/kaz080/learnyourreact-answer — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#111 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABFFM5_TyjggKpOah7L9zircUonbCRlaks5rYWwEgaJpZM4KV_Ly> .

[loganmay]

@kaz080 I'm still somewhat confused about this - can you clarify? I just cloned your answer repo and ran it, and the result was a working '/' route (which also contained some text input fields I'm not sure were a part of this lesson). Then, when I visit '/bundle.js' I just see a styleless page containing all of the post-complied javascript:

Is that the intended result? If so, what was the point of setting up the '/bundle.js' route?

In general, what should my main takeaways from this lesson be? Can you clarify what the author was saying about the event not working in the previous State lesson. I used this code instead there and it passed, rather than using an event handler:

handleChange() { this.setState((props, state) => !state.checked) }

I want to understand the nuances of using React on both the client and server... but, all I've taken away so far is that there is a dependency issue in learnyoureact on this lesson, and we actually need to rework the code provided in the lesson.

Got here because I had the same problem described by @hanskoff in #103

[kaz080]

@loganmay

Is that the intended result? If so, what was the point of setting up the '/bundle.js' route?

Yes. '/bundle.js' is the entire JavaScript code for client-side, which includes app.js, views/index.jsx, react, react-dom.

In general, what should my main takeaways from this lesson be? Can you clarify what the author was saying about the event not working in the previous State lesson.

Maybe this learnyourreact scenario is a bit tricky because the scenario starts from server-side rendering.

Before this lesson ISOMORPHIC, the logics in the index.jsx are evaluated only once in server-side to make HTML DOM. The rendered HTML doesn't include JavaScript anymore. That's why event wasn't working in the previous STATE lesson.

This lesson first introduces client-side JavaScript code (/bundle.js) to make the server-side-rendered HTML interactive. Now logics in index.jsx are also in client-side, so event become working.

I guess most learners imagine that JavaScript is evaluated in the browser, but it's not in this learnyourreact scenario before this lesson.

[loganmay]

@kaz080 Thanks so much for the reply! Very helpful.

Before ISOMORPHIC, we are just rendering static html. In ISOMORPHIC, we also send a bundle to the browser to run client side JS. Got it.

I think this also helps me to understand better Webpack. Am I correct in saying that when we use Webpack, it intelligently bundles our React code to run some or all of the JS on the client, much like we did here in the ISOMORPHIC lesson? I'm especially interested to know how much of our JS Webpack sends to the client and/or how much runs on the server (as well as if you can control how much renders on the client or server using Webpack). I appreciate your help!

[mjohnson518]

Hi,

I'm having an issue with learnyoureact Isomorphic exercise. I continue to get an error:

var body = DOM.body;
^
Cannot read property 'body' of undefined

Can you assist? Thanks