andreypopp / react-quickstart

[DEPRECATED] React project template with server-side UI rendering and routing
371 stars 47 forks source link

Can't start the project #24

Open olebedev opened 9 years ago

olebedev commented 9 years ago

I am trying to start the project like this:

$ npm i
$ npm run start 

as in README file.

At the start I get this:

$ npm run start 

> react-quickstart@0.0.0 start /Users/olebedev/pro/csmnt/react-quickstart
> supervisor -i node_modules -e js,jsx server.js

Running node-supervisor with
  program 'server.js'
  --watch '.'
  --ignore 'node_modules'
  --extensions 'js,jsx'
  --exec 'node'

Starting child process with 'node server.js'
Ignoring directory '/Users/olebedev/pro/csmnt/react-quickstart/node_modules'.
Watching directory '/Users/olebedev/pro/csmnt/react-quickstart' for changes.
Point your browser at http://localhost:3000

But I get an error each time requested to http://localhost:3000/:

Error: Error transforming /Users/olebedev/pro/csmnt/react-quickstart/node_modules/fibers/fibers.js to JSX: Error: Parse Error: Line 2: Illegal return statement
    at Object.require.extensions.(anonymous function) [as .js] (/Users/olebedev/pro/csmnt/react-quickstart/node_modules/node-jsx/index.js:24:13)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.renderComponentToStringWithAsyncState (/Users/olebedev/pro/csmnt/react-quickstart/node_modules/react-async/index.js:60:17)
    at Layer.renderApp [as handle] (/Users/olebedev/pro/csmnt/react-quickstart/server.js:16:14)
    at trim_prefix (/Users/olebedev/pro/csmnt/react-quickstart/node_modules/express/lib/router/index.js:230:15)
    at c (/Users/olebedev/pro/csmnt/react-quickstart/node_modules/express/lib/router/index.js:198:9)
    at Function.proto.process_params (/Users/olebedev/pro/csmnt/react-quickstart/node_modules/express/lib/router/index.js:253:12)

Fibers installed, as expected:

$ npm ls | grep fibers
├── fibers@1.0.5

So, maybe package's versions in package.json are outdated? Thoughts?

vlafiser commented 9 years ago

Yes, I have the same problem guys.

@olebedev Do you know, where is the problem and how I can fix it? Thanks man!

vermilion1 commented 9 years ago

@olebedev @vlafiser I've fixed an issue in this fork. I'm just not sure that it's a good idea to create a pull request for it.

olebedev commented 9 years ago

@vermilion1 I will try this soon, thanks! Unfortunately, It looks like the project is abandoned.

andreypopp commented 9 years ago

Hi, in my opinion this project template doesn't demo best practices when building an app with React.

olebedev commented 9 years ago

Could you please show up right way to do it?

andreypopp commented 9 years ago

The gist for code execution:

  1. Bundle server code with browserify/webpack (entry point should be a function).
  2. Compile bundle using vm Node module
  3. Execute that bundle for each request to produce markup.

The approach in this template doesn't do this and allows to leak per-user data into other user sessions because modules' scope remains the same between requests.

The gist for data fetching (assuming something like Flux):

  1. Send INIT_APP (or something like that) action via dispatcher
  2. Wait for action to be processed (don't know how exactly, probably requires us to wait for other action, like INIT_APP_COMPLETE/INIT_APP_ERROR)
  3. Render markup
  4. Serialize data into markup and send to browser.

P.S. as a bonus — Flux stores could be backed by Swarm.js data structures!

konsumer commented 9 years ago

@vermilion1 had the right idea in their fork. Change

var nodejsx = require('node-jsx').install();

to

var nodejsx = require('node-jsx').install({extension: '.jsx'});

to make it work. I'd definitely be interested in seeing an example of what @andreypopp is talking about, though.

zzarcon commented 9 years ago

@vermilion1 your fork works perfectly :+1:. Why you think that isn't a good idea to create a PR for this repo? Sorry if my question it's stupid, I'm a completely React noob :)