Cannot resolve 'file' or 'directory' ../../webpack-stats.json on first build

[goldensunliu]

since webpack-stats.json is only created after a webpack build, how would the first build ever succeed:
on npm run build for the first time

ERROR in ./src/views/Widgets.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../../webpack-stats.json in /Users/sliu/workplace/react-redux-universal-hot-example/src/views
resolve file
  /Users/sliu/workplace/react-redux-universal-hot-example/webpack-stats.json doesn't exist
  /Users/sliu/workplace/react-redux-universal-hot-example/webpack-stats.json.json doesn't exist
  /Users/sliu/workplace/react-redux-universal-hot-example/webpack-stats.json.js doesn't exist
resolve directory
  /Users/sliu/workplace/react-redux-universal-hot-example/webpack-stats.json doesn't exist (directory default file)
  /Users/sliu/workplace/react-redux-universal-hot-example/webpack-stats.json/package.json doesn't exist (directory description file)
[/Users/sliu/workplace/react-redux-universal-hot-example/webpack-stats.json]
[/Users/sliu/workplace/react-redux-universal-hot-example/webpack-stats.json.json]
[/Users/sliu/workplace/react-redux-universal-hot-example/webpack-stats.json.js]
 @ ./src/views/Widgets.js 38:14-49

[erikras]

Yes, this is a known issue. Suggestions to fix it are welcome. I don't really want to have an empty webpack-stats.json in git. Maybe some part of the build could check if it was there and create a temporary empty one or something?

In production it's not that big of a problem, at least in my experience of deploying the heroku branch, as you end up having webpack-stats.json around anyway.

[goldensunliu]

also shouldn't

  const stats = require('../../webpack-stats.json');
  if (__CLIENT__) {
    return require('./InfoBar.scss');
  }
  return stats.css.modules[relativeToSrc(path.join(__dirname, './InfoBar.scss'))];

be

  if (__CLIENT__) {
    return require('./InfoBar.scss');
  }
  const stats = require('../../webpack-stats.json');
  return stats.css.modules[relativeToSrc(path.join(__dirname, './InfoBar.scss'))];

since the client side shouldn't be aware of the webpack-stats.json

[erikras]

@goldensunliu Yes! Good catch.

[bdefore]

I'm running into this issue also and it's broken my heroku deploys since a recent upstream merge. I get the same error as @goldensunliu except that it's triggered from my App.js where it's attempting to load up the webpack-stats.json styles. As a result of the error my heroku dyno doesn't start up anymore.

@erikras I would also prefer not to have webpack-stats.json in git, but perhaps we need some more bulletproofing around this solution for local css. I wouldn't mind this logic getting ugly as long as it was wrapped up in middleware. Could we wrap this up in a decorator? Something like what we're already doing for @connect but ... @locallyStyled and passing in the path of the css?

[bdefore]

As a workaround for now, I did manage to get Heroku to deploy again by removing webpack-stats.json and checking in a stub of the webpack-stats.json as:

{"script":[],"css":{"files":[],"modules":{}},"images":[]}

Obviously not ideal, since it'll show up as modified to your version control every time webpack builds.

[bdefore]

Also, for those working on Heroku, see #81 for how to support their $PORT env variable.

[erikras]

Yep, I did that webpack-stats stub thing, too.

[korczis]

It will be nice to have this fixed in proper way ...

[catamphetamine]

A possible solution would be to run Node.js webserver after the first webpack-dev-server build finishes (it's needed only in dev mode). Maybe one could write a .js script which would cycle until webpack-stats.json is created. That's a todo for me for the next couple of days.

[erikras]

Good thinking, @halt-hammerzeit. It might be hard to keep them as separate processes, though. Although maybe we don't even want that, since both have to restart on component or css changes.

[catamphetamine]

@erikras I made it by the way. You can have a look:
https://github.com/halt-hammerzeit/cinema/blob/master/code/server/entry.js#L40

webpack-isomorphic-tools now has .ready() method which waits until webpack-stats.json is created.

I also made it work with your project and it looks like this:

global.webpackIsomorphicTools = new WebpackIsomorphicTools(webpackConfiguration, require('./webpack/webpack-isomorphic-tools')).register().ready(function() {
  if (__DEVELOPMENT__) {
    if (!require('piping')({
        hook: true,
        ignore: /(\/\.|~$|\.json|\.scss$)/i
      })) {
      return;
    }
  }
  require('./src/server');
})

I tested it and it works.
If you decide to use webpack-isomorphic-tools in your project then I can make a pull request for this issue.

[bdefore]

@halt-hammerzeit i tried to verify this in my project and had to tweak what you have above:

var webpackConfiguration = require('./webpack/dev.config.js');
var WebpackIsomorphicTools = require('webpack-isomorphic-tools');
global.webpackIsomorphicTools = new WebpackIsomorphicTools(webpackConfiguration, require('webpack-isomorphic-tools')).register().ready(function() {
  if (__DEVELOPMENT__) {
    if (!require('piping')({
        hook: true,
        ignore: /(\/\.|~$|\.json|\.scss$)/i
      })) {
      return;
    }
  }
  require('./src/server');
})

This gets me partway there, but I'm getting the error:

[1] Error: You must specify "assets" parameter
[1]     at new webpack_isomorphic_tools (/[REDACTED]/node_modules/webpack-isomorphic-tools/babel-transpiled-modules/index.js:56:10)
[1]     at Object.<anonymous> (/[REDACTED]/babel.server.js:16:33)
[1]     at Module._compile (module.js:460:26)
[1]     at Object.Module._extensions..js (module.js:478:10)
[1]     at Module.load (module.js:355:32)
[1]     at Function.Module._load (module.js:310:12)
[1]     at Function.Module.runMain (module.js:501:10)
[1]     at startup (node.js:129:16)
[1]     at node.js:814:3

[bdefore]

Ahh, I see, your require('../../webpack/isomorphic.js') in the second param of the constructor is actually loading a configuration file that defines assets. I'd rather not have to define them there as well as in a webpack config file though.

[catamphetamine]

@bdefore Oh, hello, yeah, you missed the party:
#108

This pull request is required for the code I posted here, there's no partial solution.

[catamphetamine]

@bdefore require('./webpack/webpack-isomorphic-tools') outputs the JSON settings object for webpack-isomorphic-tools and the assets are there. If you have any design suggestions feel free to write them in this thread - I made this project about a day earlier, so it's newborn.

[catamphetamine]

well, there's of course a partial solution, my comment wasn't correct.
you can opt in to use just the ".ready()" part in your project, but you still need the configuration.
maybe i'll make assets a non-required parameter.

[bdefore]

@halt-hammerzeit I was initially confused that the name for the configuration was the same as the library itself, but now that I see that, it makes sense.

I skimmed through your PR and it does simplify a lot of idiosyncrasies of this boilerplate.

[erikras]

I'm on vacation this week, but I plan to merge this ASAP. But this is a big PR and I want to test it for myself.

[catamphetamine]

Vacation
Had to get away
Vacation
Meant to be spent alone