Great configurations shown in this project!

I have one question regarding consumption of https://github.com/mikeal/request.
When using webpack with application that uses request module I am getting something like:

ERROR in .//request/request.js
Module not found: Error: Cannot resolve module 'net' in
@ .//request/request.js 32:10-24

ERROR in .//request//forever-agent/index.js
Module not found: Error: Cannot resolve module 'tls' in
@ .//request//forever-agent/index.js 7:10-24

Is there a way to make webpack and request working together ?

I'm having problems with loading .scss files as my stylesheets.

I tried adding https://github.com/jtangelder/sass-loader but I see what I should change in the config to add this rule:

require("!style!css!sass!./file.scss");

I renamed style.css to style.scss and changed require("./style.scss"); in my index.jsx file, but I get:

ERROR in ./app/Application/style.scss
Module parse failed: /Users/jonas/Development/github/react-starter/app/Application/style.scss Line 1: Unexpected token {
You may need an appropriate loader to handle this file type.

Where do I add this sass-loader in the current make-webpack-config.js ?

Hey,

I could not manage to install 'asyncawait' (https://github.com/yortus/asyncawait). I got the following errors after I run the 'dev-server'

You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ .//asyncawait//fibers ^./.*$

WARNING in .//asyncawait//fibers/bin/win32-ia32-v8-3.6/fibers.node
Module parse failed: /home/djan/dev/wort_vis/node_modules/asyncawait/node_modules/fibers/bin/win32-ia32-v8-3.6/fibers.node Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ .//asyncawait//fibers ^./.*$

WARNING in .//asyncawait//fibers/bin/win32-ia32-v8-3.14/fibers.node
Module parse failed: /home/djan/dev/wort_vis/node_modules/asyncawait/node_modules/fibers/bin/win32-ia32-v8-3.14/fibers.node Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ .//asyncawait//fibers ^./.*$

ERROR in .//asyncawait//fibers/fibers.js
Module not found: Error: Cannot resolve module 'fs' in /home/djan/dev/wort_vis/node_modules/asyncawait/node_modules/fibers
@ .//asyncawait//fibers/fibers.js 1:9-22

ERROR in .//asyncawait//fibers/test/child-process.js
Module not found: Error: Cannot resolve module 'child_process' in /home/djan/dev/wort_vis/node_modules/asyncawait/node_modules/fibers/test
@ .//asyncawait//fibers/test/child-process.js 5:12-36

ERROR in .//asyncawait//fibers/test/exec.js
Module not found: Error: Cannot resolve module 'child_process' in /home/djan/dev/wort_vis/node_modules/asyncawait/node_modules/fibers/test
@ .//asyncawait//fibers/test/exec.js 9:2-26

Can you help me out?

Kind Regards
Jan

It'd be great to have tests as part of this React starter kit!

I'm trying to load an image from my /public folder using the image-loader.

What's the best way to get the path in my components? In dev mode, the publicPath is different than on production mode.

I tried to deploy my web application on Azure today and after hours of searching I came to realize that the problem I had was with the port.

Basically, in https://github.com/webpack/react-starter/blob/master/lib/server.js#L69 there's +(process.env.PORT || options.defaultPort || 8080); where we cast all these values to a number.

The problem is that in Azure, the port is provided through process.env.PORT and is not a number. It's something like ".\pipe\somehash". I don't remember the exact syntax but it look like that.

The solution I found, was obviously to remove the cast to a number.
Also, if we look at https://nodejs.org/api/http.html#http_server_listen_port_hostname_backlog_callback we can see To listen to a unix socket, supply a filename instead of port and hostname. which means, the port can be a path instead of a number.

Therefore, I think it's fair to remove the cast and avoid these kind of headaches to others :)

When running npm run dev-server and subsequently npm run start-dev on the Vagrant installation created by the Vagrantfile, accessing http://localhost:8080 on the host machine results in a Failed to load resource: net::ERR_CONNECTION_RESET with an empty http://localhost:2992/_assets/main.js.

However, running npm run build and npm run start seems to work flawlessly.

Is it wrong of me to think that the development should work, too?

There are times when you need to include third-party code and it expects its CSS classes to be global, for example react-bootstrap or when you're wrapping a jQuery plugin.

The only ways I found to let the CSS be unmangled by the module loading, are to import them with "!style!css!...bootstrap.css" or to include them in the html. Both have big disadvantages.

Is there a way to have the css loader not modularize for everything under node_modules?

[email protected] start /Users/henrik.feldt/dev/react-starter
node lib/server-production

module.js:338
throw err;
^
Error: Cannot find module '../build/prerender/main.js'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at module.exports (/Users/henrik.feldt/dev/react-starter/lib/server.js:11:3)
at Object. (/Users/henrik.feldt/dev/react-starter/lib/server-production.js:1:82)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)

npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "start"
npm ERR! node v0.12.0
npm ERR! npm v2.5.1
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: node lib/server-production
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node lib/server-production'.
npm ERR! This is most likely a problem with the react-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node lib/server-production
npm ERR! You can get their info via:
npm ERR! npm owner ls react-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/henrik.feldt/dev/react-starter/npm-debug.log

This happens when I'm using the domquery module. The issue can be reproduced in the following four steps:
#1. install the components

$ npm install domquery; npm install matches-selector; npm install closest; npm install event;
#2. change the following file:

--- a/app/Home/index.jsx
+++ b/app/Home/index.jsx
@@ -1,5 +1,6 @@
var React = require("react");
var Link = require("react-router").Link;
+var dom = require('domquery')
#3. run build

$ npm run build;
#4. run start, which gives the error:

$ npm run start

error message below

[email protected] start /Users/shen/Documents/workspace/react-starter
node lib/server-production

/Users/shen/Documents/workspace/react-starter/build/prerender/main.js:5860
var doc = document
^
ReferenceError: document is not defined
at /Users/shen/Documents/workspace/react-starter/build/prerender/main.js:5860:14
at doc (/Users/shen/Documents/workspace/react-starter/build/prerender/main.js:5856:73)
at Object. (/Users/shen/Documents/workspace/react-starter/build/prerender/main.js:5859:4)
at webpack_require (/Users/shen/Documents/workspace/react-starter/build/prerender/main.js:21:30)
at Object.module.exports.module.exports (/Users/shen/Documents/workspace/react-starter/build/prerender/main.js:5029:14)
at webpack_require (/Users/shen/Documents/workspace/react-starter/build/prerender/main.js:21:30)
at Object. (/Users/shen/Documents/workspace/react-starter/build/prerender/main.js:4760:17)
at webpack_require (/Users/shen/Documents/workspace/react-starter/build/prerender/main.js:21:30)
at Object. (/Users/shen/Documents/workspace/react-starter/build/prerender/main.js:4987:15)
at webpack_require (/Users/shen/Documents/workspace/react-starter/build/prerender/main.js:21:30)

npm ERR! [email protected] start: node lib/server-production
npm ERR! Exit status 8
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is most likely a problem with the react-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node lib/server-production
npm ERR! You can get their info via:
npm ERR! npm owner ls react-starter
npm ERR! There is likely additional logging output above.
npm ERR! System Darwin 13.4.0
npm ERR! command "/usr/local/Cellar/node/0.10.24/bin/node" "/usr/local/bin/npm" "run" "start"
npm ERR! cwd /Users/shen/Documents/workspace/react-starter
npm ERR! node -v v0.10.24
npm ERR! npm -v 1.3.21
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /Users/shen/Documents/workspace/react-starter/npm-debug.log
npm ERR! not ok code 0

What is the cause of this error? Please help! Thanks.

I have written a Flux-like framework called Redux that, in my view, preserves the best properties of Flux, but also fixes a few problems with it. In Redux, instead of Stores, you describe everything with “reducers”—pure functions with (state, action) => state signature.

This allows us to have hot reloading for everything: Stores (really, Reducers), Action Creators and Components. In fact Redux makes it possible to build developer tools like “time travel” debugger that also take advantage of hot reloading. I'm going to demo this in my talk at React Europe. Of course, Redux works on client and on server—it's universal.

Would you be interested in porting this kit to use Redux? In JS land, per-module hot reloading is a unique feature of Webpack, and it would be cool to truly show off its power.

Any way how to use a different port other than 8080? It is used by my vagrant box.

I tried to use 6to5-loader to allow me to use ES6 syntax in regular JS files (not JSX). I updated make-webpack-config.js like this:

var loaders = {
    "js": '6to5-loader',
    ...

However, now when I initially load the app in the browser it crashes somewhere inside socket.io.js. The global variable in the following snippet is undefined, causing an exception.

  util.load = function (fn) {
    if ('document' in global && document.readyState === 'complete' || pageLoaded) {
      return fn();
    }

Am I using the 6to5 loader incorrectly? Is there anther loader I can use to transpile ES6 into ES5 instead?

In order to avoid to load a gigantic javascript with all the application, in other words one entry in webpack, would be necessary to create more than one entry.

So I can't decide how should this be done in a practical use of case, for example, let's say we have an entry for a Blog application.

A built-in example should help a lot with that challenge 👍
I'm going to try to do it, but I'm really new at this stack and definitively items-store module which adds a lot of stuff to learn in to use this starter kit.

Cheers!

Hello, I'm trying to make an app that uses the domain/hostname to load different data, for the prerender I was thinking I could use req.get('host') but I can't really see where I should set it/pass it in.

Preferably I'd like to have it in the route like

<Route name="blog" path=":domain/blog/:id" handler={BlogPage} />

so I can get them in my props, obviously I know I can't but yeah..

I'm using ES6 syntax for filter() and for development build is it right. But for production build it failed. After change back to older syntax is all right again.

Thank you for this very cool starter template, is it so much helpful for me, I'm Javascript/React beginner.

Steps to reproduce:

hub clone webpack/react-starter test
cd test

# dev
npm run dev-server
npm run start-dev (in new window)

# or prod
npm run build
npm run start

Testing in both Chrome and Firefox, localhost:8080 displays a page that says "react-starter", and a button labeled "Update data". There is no other page content, and clicking the button does nothing.

There are a number of occasions when you want to pass the remaining properties into an object rather than explicitly defining them all all the time ...

Quoting from react: https://facebook.github.io/react/docs/transferring-props.html

"Sometimes it's fragile and tedious to pass every property along. In that case you can use destructuring assignment with rest properties to extract a set of unknown properties.
List out all the properties that you would like to consume, followed by ...other."

i.e.

var { checked, ...other } = this.props;

So when you do this WebPack / Babel / rebuild fails to parse the code change and you get a

 Unexpected token (16:17)

 render() {
         var { checked, ...other } = this.props;
                        ^
         return <div className={loading ? "application loading" : "app

Hi,
I was wondering if it is possible to generate a static build using this starter package? For production, I'd quite like to just plonk a folder into an nginx server, rather than having express running the application. Is that possible?

Thanks,
Chris

I noticed that the items-store used is v0.4.2, whereas the current is v0.6.1 that doesn’t have the StateFromStoresMixin but has replaced it with a createContainer wrapper method.

Currently, the application uses the mixin, but to my knowledge, this is considered bad practice. Are there any plans on changing this? What if I’d like to transition away from the mixin myself, how is that possible?

Hi, I think this boilerplate seems very comprehensive and advanced for production usage.
However I am having trouble understanding the code.

Would you be able to place some inline comments to help readers understand your code design?

Thanks :)

I'm trying to use the hot dev server and failing with a pretty vague error message process.env is undefined.

I've written a better description https://stackoverflow.com/questions/29096018/react-webpack-process-env-is-undefined <- there, but in general -- how would I even go about debugging an error like this?

var xhr = new Parse.XMLHttpRequest();
^
TypeError: undefined is not a function

I had the above error when I tried to use parse in my webpack project. The project works fine in dev build. I doubt it is because the npm parse library should be used on the server side instead of the front end. Googling suggests calling <script src="//www.parsecdn.com/js/parse-1.4.2.min.js"></script> might be the key to solve this but I don't think I can do this in webpack? Is there way I can change the backend server of my webpack project to invoke calls related to parse? i.e my front end will communicate back the data to the backend to invoke the calls that are related to parse.

Thanks.

I think it would be nice to switch to Babel instead of jsx-loader as it's got better ES6 support.

Hi guys,

Thanks for sucha a great starter :)

I'm trying to add includePaths[]=./node_modules/zurb-foundation-5/scss/ in the definition of the sass-loader:

var stylesheetLoaders = {
    "css": cssLoader,
    "less": [cssLoader, "less-loader"],
    "styl": [cssLoader, "stylus-loader"],
    "scss|sass": [cssLoader, "sass-loader?includePaths[]=./node_modules/zurb-foundation-5/scss/"]
};

But webpack crash with this error:
60% 236/278 build modulesBus error: 10

Any clues?

Thanks in advance

additionalLoaders = [] is in make-webpack-config, but never modified or appended to the generated list of loaders.

In the main.js file built for production I am getting an error when running npm run start

$ npm run start

> [email protected] start /Users/mduncan/FDC/Code/com.fdc.ui
> node lib/server-production


/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:3944
        })( jQuery, window , document );
                    ^
ReferenceError: window is not defined
    at Object.<anonymous> (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:3944:14)
    at Object.<anonymous> (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:21890:31)
    at __webpack_require__ (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:21:30)
    at Object.<anonymous> (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:1269:2)
    at __webpack_require__ (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:21:30)
    at Object.module.exports.desc.applyUpdate (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:150:51)
    at __webpack_require__ (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:21:30)
    at Object.<anonymous> (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:52:15)
    at __webpack_require__ (/Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:21:30)
    at /Users/mduncan/FDC/Code/com.fdc.ui/build/prerender/main.js:41:18

npm ERR! Darwin 14.1.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "start"
npm ERR! node v0.10.35
npm ERR! npm  v2.5.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node lib/server-production`
npm ERR! Exit status 8

I am using almost all default settings for my webpack configs. Any suggestions on where to look to find out why this is happening?

What is this simple flag?

Hello,

I installed bootstrap via npm and tried to put '@import "~bootstrap/less/bootstrap";' in my main less file which is referred to in Main.jsx like this: 'require("./Application.less");'
I get the following errors:

ERROR in .//css-loader!.//less-loader!./app/Application.less
Module not found: Error: Cannot resolve module 'url-loader' in /home/djan/dev/wiz/app
@ .//css-loader!.//less-loader!./app/Application.less 2:4182-4258

ERROR in .//css-loader!.//less-loader!./app/Application.less
Module not found: Error: Cannot resolve module 'url-loader' in /home/djan/dev/wiz/app
@ .//css-loader!.//less-loader!./app/Application.less 2:4389-4464

ERROR in .//css-loader!.//less-loader!./app/Application.less
Module not found: Error: Cannot resolve module 'file-loader' in /home/djan/dev/wiz/app
@ .//css-loader!.//less-loader!./app/Application.less 2:4284-4359

ERROR in .//bootstrap/fonts/glyphicons-halflings-regular.eot
Module parse failed: /home/djan/dev/wiz/node_modules/bootstrap/fonts/glyphicons-halflings-regular.eot Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ .//css-loader!./~/less-loader!./app/Application.less 2:3967-4042 2:4061-4136

Is there a way how to resolve this?.
Many thanks for your help

Kind Regards
Jan

Plz excuse my n00bness..
I added some authentication on top of your boilerplate, and naturally, when I run "npm run start" , this line of code fails during the prerender.

/home/clacey/react-flask/build/prerender/main.js:224
var jwt = localStorage.getItem('jwt');
^
ReferenceError: localStorage is not defined

It makes sense that there is no localStorage.. i've included a
if (canUseDOM){
let jwt = localStorage.getItem('jwt');

in my code to protect it, but it still enters the if loop..not sure the best way of doing this - or if i'm violating some sort of pre-render rule to begin with.

Any help would be greatly appreciated!

Hi @sokra !

https://github.com/webpack/react-starter/blob/master/make-webpack-config.js#L110

Here in config styles loader is replaced with null-loader, so in pre-rendered server markup css placeholders are undefined, but on client side after load they will get their class names. This will cause page repaint after getting new classes

and also you will get warnings from react (if react env isnt production ofc)

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) <div class="z53edca59e642b4b8502
 (server) <div class="undefined" data-reac

I have some trouble deploying this kit with Dokku:

=====> test container output:
       > [email protected] start /app
       > node lib/server-production
       module.js:338
           throw err;
                 ^
       Error: Cannot find module '../build/prerender/main.js'
           at Function.Module._resolveFilename (module.js:336:15)
           at Function.Module._load (module.js:278:25)
           at Module.require (module.js:365:17)
           at require (module.js:384:17)
           at module.exports (/app/lib/server.js:11:3)
           at Object.<anonymous> (/app/lib/server-production.js:1:82)
           at Module._compile (module.js:460:26)
           at Object.Module._extensions..js (module.js:478:10)
           at Module.load (module.js:355:32)
           at Function.Module._load (module.js:310:12)

Not quite sure how to fix it. Any tips?

Hi there,

To add facebook share button to my website, I need to add some open graph meta tag.
See https://developers.facebook.com/docs/plugins/share-button/
I tried to use react-helmet and it didn't work. (the description didn't show up in the share page.) Can anyone please help? Thanks.

-S

Following the instructions in the README, I cloned the repo to a new folder, ran npm install
in it, and tried to build and run the server. I doubt it's relevant, but I'm running Mac OS X 10.10.3. I get the same results using Vagrant, only the paths are different.

> npm run dev-server

> [email protected] dev-server /Users/broberson/Projects/react-starter
> webpack-dev-server --config webpack-dev-server.config.js --progress --colors --port 2992 --inline

module.js:333
    throw err;
    ^
Error: Cannot find module './app/routeHandlers/async'
    at Function.Module._resolveFilename (module.js:331:15)
    at Function.Module._load (module.js:273:25)
    at Module.require (module.js:357:17)
    at require (module.js:373:17)
    at module.exports (/Users/broberson/Projects/react-starter/make-webpack-config.js:95:9)
    at Object.<anonymous> (/Users/broberson/Projects/react-starter/webpack-dev-server.config.js:1:112)
    at Module._compile (module.js:449:26)
    at Object.Module._extensions..js (module.js:467:10)
    at Module.load (module.js:349:32)
    at Function.Module._load (module.js:305:12)
    at Module.require (module.js:357:17)
    at require (module.js:373:17)

> node --version
v0.11.13

> npm --version
2.5.0

Seems very similar to #59 from last month, which has been resolved.

packages like these:
webpack, webpack-dev-server, extract-text-webpack-plugin and others
should be on devDependencies of packages.json

Regards.

Unless I misunderstand, I haven't seen a Webpack config yet that uses the production React build in production. They all seem to get it from the npm package, which still prints warnings, checks PropTypes, etc. I'm trying to figure out if it's possible to configure Webpack so that I can require() React from this pre-bundled production build, so if you have any idea, would you mind letting me know?

Hi,

First just insane job you have done, bravo !

Could you give some explanations when using jsx rendering on server side with images and the following known message. I know the purpose of it but can not find any solutions to fix it:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. ...:
 (client) .86c8uxdds0.0"><img src="V2d-uc_.png" he
 (server) .86c8uxdds0.0"><img height="60" data-rea

This question might be out of react-starter context but how to deal with it when rendering is made on server side with component containing a reference to image not in css but with img html tag ?

My component code is something like:

if (process.env.BROWSER) {
  reactLogo = require('../images/react-logo.png');
}

export default class Header extends React.Component {  

  render() {
    return (
        <div>        
        <img src={reactLogo} height="60" />
                <header>

Webpack bundle contains image hashed name but when rendered on server side with expressjs in my case I do not see how to handle this case.

Thx,

Julien

Using the latest version for some reason this.state==null in render() and i dont understand why.

I keep getting errors.

Ran npm install to begin:

m03:react-starter-master thesisb$ npm install
npm WARN package.json [email protected] No repository field.

When I try starting it:

m03:react-starter-master thesisb$ npm run start-dev

> [email protected] start-dev /Users/thesisb/Websites/react-starter-master
> node lib/server-development

events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: listen EADDRINUSE
    at exports._errnoException (util.js:746:11)
    at Server._listen2 (net.js:1129:14)
    at listen (net.js:1155:10)
    at Server.listen (net.js:1240:5)
    at EventEmitter.app.listen (/Users/thesisb/Websites/react-starter-master/node_modules/express/lib/application.js:559:24)
    at module.exports (/Users/thesisb/Websites/react-starter-master/lib/server.js:143:6)
    at Object.<anonymous> (/Users/thesisb/Websites/react-starter-master/lib/server-development.js:1:82)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)

npm ERR! Darwin 14.0.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "start-dev"
npm ERR! node v0.12.0
npm ERR! npm  v2.5.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start-dev: `node lib/server-development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start-dev script 'node lib/server-development'.
npm ERR! This is most likely a problem with the react-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node lib/server-development
npm ERR! You can get their info via:
npm ERR!     npm owner ls react-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/thesisb/Websites/react-starter-master/npm-debug.log
m03:react-starter-master thesisb$

The contents of the file it tells me to include:

0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/local/bin/npm', 'run', 'start-dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart-dev', 'start-dev', 'poststart-dev' ]
5 info prestart-dev [email protected]
6 info start-dev [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start-dev script
9 verbose stack Error: [email protected] start-dev: `node lib/server-development`
9 verbose stack Exit status 1
9 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
9 verbose stack     at EventEmitter.emit (events.js:110:17)
9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:14:12)
9 verbose stack     at ChildProcess.emit (events.js:110:17)
9 verbose stack     at maybeClose (child_process.js:1008:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:1080:5)
10 verbose pkgid [email protected]
11 verbose cwd /Users/thesisb/Websites/react-starter-master
12 error Darwin 14.0.0
13 error argv "node" "/usr/local/bin/npm" "run" "start-dev"
14 error node v0.12.0
15 error npm  v2.5.0
16 error code ELIFECYCLE
17 error [email protected] start-dev: `node lib/server-development`
17 error Exit status 1
18 error Failed at the [email protected] start-dev script 'node lib/server-development'.
18 error This is most likely a problem with the react-starter package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     node lib/server-development
18 error You can get their info via:
18 error     npm owner ls react-starter
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

I can run the dev tasks and they work ok but when I run the production build task and check the main.js file it isn't minified in any way. I tried adding a couple of log statements into the guts of the UglifyjsPlugin and found that the execution never reached the uglifyjs code.

The webpack-with-common-libs example works ok, final targets are minified.

Any ideas as to whats happening? I'm running on OSX 10.9.5.

Thanks.

After a fresh clone and npm install, npm run dev-server fails because the build folder doesnt exist.

Hello,
@gaearon was helping me to understand why hot reload doesn't work with gulp. I use this repo, and just trying to combine with other gulp task. The gulpfile is below.

@gaearon

Maybe you’re missing webpack-dev-server/client or webpack/hot/only-dev-server in entry
 I don’t really understand where it’s in react-starter but hot reload can’t work without these two servers

I too couldn't see any refrence to hot reload related entries, except one for the app https://github.com/webpack/react-starter/blob/master/make-webpack-config.js#L9. Can you please help us to understand.

from the discussion at
https://gitter.im/webpack/webpack
https://gitter.im/gaearon/react-hot-loader

Hello,
I am using react-starter from webpack repo, and everything works including hot reload with the default command

npm run hot-dev-server ("webpack-dev-server --config webpack-hot-dev-server.config.js --hot --progress --colors --port 2992 --inline")

I am trying to extract this to gulp so that I can combine with other tasks. The implementation is

var gulp = require('gulp');
var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var $ = require('gulp-load-plugins')();

function wpkServer(wpkConf, srvConf, cb) {
    var compiler = webpack(wpkConf);
    new WebpackDevServer(compiler, srvConf).listen(srvConf.port, "localhost", function (err) {
        if (err) throw new $.util.PluginError("webpack-dev-server", err);
        // Server listening
        $.util.log("[webpack-dev-server]", "http://localhost:8080");
        // keep the server alive or continue?
        cb();
    });
}
gulp.task("webpack-hot-dev-server", function (cb) {
    var wpkConf =  require("./webpack-hot-dev-server.config.js");
    wpkServer(wpkConf,
        { // server and middleware options
            publicPath: wpkConf.output.publicPath,
            hot: true,
            port: 2992,
            stats: { colors: true }
        },
        cb)
});
hot realod stop working, but if I refresh I could see the changes. What is wrong.
I used different ports for listen, but only 2992 works (in examples I see it is different like 8080, 3000)

so what is the above gulp config different from

webpack-dev-server --config webpack-hot-dev-server.config.js --hot --progress --colors --port 2992 --inline"
which works !!!

I know this is a duplicated issue #16 , but given is closed and not really fixed I'm opening another.

Debugging I get to the conclusion that the "ItemsStoreFetcher.fetch" function of the item-store module isn't resolving the callbacks given from the async.forEach at the prerender.jsx file in line 28.

You can prove it by passing an error into the callback and then it will finally execute the complete function which is rendering the react components. Only way I have it working.

Maybe I'm tripping but I think is something about the "unavailableItems" variable in the "ItemsStoreFetcher.fetch" function, because if is missing one callback, the async.each wont execute the complete function.

UPDATE: Please see pull request #25

I found that "npm run build" produces very small js file comparing to just using uglify. Just wondering what you did to achieve such high level of compression? I tried to look at make-webpack-config.js, but couldn't find anything special there. Thanks.

Some are straight forward, but some are not, especially on production, I don't know where is the index file.. I have to resort to reading source code for learning, waaah, I hope the react-starter will improve.

Was there anyway, that you don't have to build then deploy? I can see that you have to run a command, followed by another?

Also, if I weren't using express-node for launching server, wouldn't it be good, if on production, there's a dist file, were index.html lives there, along with its resources?

Hello,

It seems that prerendering does not work on master. route.handler.chargeStores never calls the async callback which makes it hangs. I'm not very familiar with your items-store project. Any idea that could point me in the right direction ?

Thanks a lot and btw, great job with webpack!

I'm trying to use an svg file and an mp4 file using file loader as follow:

var bg = require('./bg.mp4');
...
<video className="home-bgVideo-video" autoPlay loop 
    <source src={bg} type="video/mp4" />
</video>

var svgFile = require('./icons.svg');
...
<svg {...others} className={cx('svgIcon', className)} dangerouslySetInnerHTML={{ __html: ['<use xlink:href="', svgFile, '#icon-', this.props.icon, '" />'].join('') }} />

but both fail. The video is not played (though the mp4 file request in Chrome's Network tab return code 200 OK and no error in the console), and the svg is not displayed (there's an error in the console: Unsafe attempt to load URL http://localhost:2992/_assets/fa87dfdfe18be5a7343deca35c9473bc.svg from frame with URL http://localhost:8080/. Domains, protocols and ports must match.)

When opening those urls in other tabs, it's perfectly loaded. I guess this is a cross-origin request problem, but adding

devServer {
    headers: {'Access-Control-Allow-Origin': '*'}
}

to the config doesn't fix the problem. Any solution?

When doing 'npm run build' to build a production version, it gives an error:
Error: Cannot resolve module vertx

Upgrading react-router in package.json to 0.12.0 fixes this.

After npm installing I "npm run devserver" and get the following error. Must be something silly but I get the same thing if I do it in vagrant using the provided Vagrantfile.

$ ./node_modules/.bin/webpack-dev-server --config webpack-dev-server.config.js --progress --colors --port 2992 --inline
module.js:338
throw err;
^
Error: Cannot find module 'webpack-dev-server.config.js'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at module.exports (/Volumes/DREWSDATA/tmp/react-starter/node_modules/webpack/bin/convert-argv.js:56:12)
at Object. (/Volumes/DREWSDATA/tmp/react-starter/node_modules/webpack-dev-server/bin/webpack-dev-server.js:46:48)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
:( drw900@eloop:/tmp/react-starter(master)
$ ls
README.md config npm-debug.log webpack-dev-server.config.js
Vagrantfile lib npm_global_packages.txt webpack-hot-dev-server.config.js
app make-webpack-config.js package.json webpack-production.config.js
build node_modules public webpack.config.js
:) drw900@eloop:/tmp/react-starter(master)

First, I'm totally new to react and webpack. Thank you for this excellent, detailed example of usage for me to learn from.
Question:
When I npm run build I get the following output:

    ERROR in ./config/prerender.jsx?Main
    Module not found: Error: Cannot resolve module 'html-loader' in <abspath>/react-test/config
     @ ./config/prerender.jsx?Main 5:11-43

Does this have to do with "loaders resolved relative to the resource their applied to..."?

Full error output with --display-error-details
Thanks in advance,
Alex