webpack-assets.json not found, can't figure out to actually create the files

[phun-ky]

I have this in my dev-config of webpack:

import webpack from 'webpack';
import _ from 'lodash';
import webpack_isomorphic_tools_plugin from 'webpack-isomorphic-tools/plugin';

const webpackIsomorphicToolsPlugin = new webpack_isomorphic_tools_plugin(
  require('./webpack-isomorphic-tools-configuration')
).development(true);

const regular_expressions = {
  images : /\.(png|jpg|gif|svg|ico)$/,
  fonts: /\.(woff|woff2|eot|ttf)$/,
  radars: /(.*\.)?radar.yml$/,
  javascript: /\.(js|jsx)$/,
  stylus: /\.styl/
};

const baseConfig = require('./base');
const config = _.merge({
  progress: true,
  debug: true,
  entry: [
    'eventsource-polyfill',
    'webpack-hot-middleware/client',
    './src/boot-client'
  ],
  module: {
    preLoaders: [{
      test: regular_expressions.stylus,
      loader: 'stylint'
    }],
    loaders: [{
      test: webpackIsomorphicToolsPlugin.regular_expression('css'),
      loader: 'style_loader!css'
    },{
      test: webpackIsomorphicToolsPlugin.regular_expression('styl'),
      loader: 'style-loader!css-loader!stylus-loader'
    },{
      test: webpackIsomorphicToolsPlugin.regular_expression('fonts'),
      loader: 'url-loader?limit=8192&name=[path][name].[ext]?[hash]'
    },{
      test: webpackIsomorphicToolsPlugin.regular_expression('images'),
      loader: 'url-loader?limit=8192&name=[path][name].[ext]?[hash]'
    },{
      test: webpackIsomorphicToolsPlugin.regular_expression('yml'),
      loader: 'radar-loader'
    }]
  },
  cache: true,
  devtool: 'eval',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    webpackIsomorphicToolsPlugin
  ]
}, baseConfig);

module.exports = config;

and this is the base config:

const path = require('path');
const fs = require('fs');
const autoprefixer = require('autoprefixer');
const poststylus = require('poststylus');

const port = 8000;
const srcPath = path.join(__dirname, '/../src');
const virtualPath = process.env.BEKKRADAR_VIRTUAL_PATH || '';
const publicPath = virtualPath + '/assets/';
const rootDir = path.join(__dirname, '..');

module.exports = {
  port: port,
  context: rootDir,
  debug: true,
  output: {
    path: path.resolve(rootDir, 'dist', 'assets'),
    filename: 'app.js',
    publicPath: publicPath
  },
  devServer: {
    contentBase: './src/',
    historyApiFallback: true,
    hot: true,
    port: port,
    publicPath: publicPath,
    noInfo: false
  },
  resolve: {
    extensions: ['', '.js', '.jsx','.styl', '.css'],
    alias: {
      actions: srcPath + '/actions/',
      components: srcPath + '/components/',
      containers: srcPath + '/containers/',
      content: srcPath + '/content/',
      store: srcPath + '/store/',
      styles: srcPath + '/styles/',
      config: srcPath + '/config/' + process.env.REACT_WEBPACK_ENV
    }
  },
  stylus: {
    use: [
      poststylus([
        autoprefixer({browsers: 'last 2 versions, > 1%'})
      ])
    ]
  },
  stylint: JSON.parse(fs.readFileSync(path.join(__dirname, '../.stylintrc'), 'utf-8'))
};

And this in the isomorphic tools config:

import webpack_isomorphic_tools_plugin from 'webpack-isomorphic-tools/plugin';
import path from 'path';

const srcPath = path.join(__dirname, '/../src');

module.exports = {
  debug: true,
  alias: {
    actions: srcPath + '/actions/',
    components: srcPath + '/components/',
    containers: srcPath + '/containers/',
    content: srcPath + '/content/',
    store: srcPath + '/store/',
    styles: srcPath + '/styles/',
    config: srcPath + '/config/' + process.env.REACT_WEBPACK_ENV
  },
  assets:
  {
    images: {
      extensions: ['png', 'jpg', 'gif', 'ico'],
      parser: webpack_isomorphic_tools_plugin.url_loader_parser
    },
    svg: {
      extension: 'svg',
      parser: webpack_isomorphic_tools_plugin.url_loader_parser
    },
    fonts: {
      extensions: ['woff', 'woff2', 'ttf', 'eot'],
      parser: webpack_isomorphic_tools_plugin.url_loader_parser
    },
    css: {
      extension: 'css',
      filter: function(module, regular_expression, options, log){
        if (options.development){
          return webpack_isomorphic_tools_plugin.style_loader_filter(module, regular_expression, options, log);
        }
      },
      path: webpack_isomorphic_tools_plugin.style_loader_path_extractor,
      parser: webpack_isomorphic_tools_plugin.css_loader_parser
    },
    styl: {
      extension: 'styl'
    },
    yml: {
      extension: 'yml'
    }
  }
};

And this is my dev server:

/*eslint no-console:0 */
const webpackIsomorphicTools = require('webpack-isomorphic-tools');
const express = require('express');
const webpack = require('webpack');
const path = require('path');
const rootDir = path.join(__dirname, '..');
const config = require('../webpack.config');
const compiler = webpack(config);

global.webpack_isomorphic_tools = new webpackIsomorphicTools(require('../cfg/webpack-isomorphic-tools-configuration'))
  .development(true)
  .server(rootDir,function(){
    const app = new express();

    // app.use('/assets', express.static(path.join(__dirname, '../dist/assets')));

    app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: false,
      stats: {
        colors: true,
        chunks: false,
        timings: false,
        version: false
      },
      publicPath: config.output.publicPath
    }));

    app.use(require('webpack-hot-middleware')(compiler));

    app.use(require('../src/boot-server'));

    app.get('*', function(req, res) {
      res.status(404).send('Server.js > 404 - Page Not Found');
    });

    app.use((err, req, res) => {
      console.error('Error on request %s %s', req.method, req.url);
      console.error(err.stack);
      res.status(500).send('Server error');
    });

    process.on('uncaughtException', evt => {
      console.log( 'uncaughtException: ', evt );
    });

    app.listen(config.port, function(error) {
      if (error) {
        console.error(error);
      } else {
        console.info('----\n==> 💻  Open up http://localhost:%s/ in your browser.', config.port, config.port);
      }
    });
  }
);

And all I get outputed is the debug info and wait messages, no files produced (I've checked all dirs down and up)

> node -r babel-register servers/server.dev.js --env=dev

[webpack-isomorphic-tools/plugin] [debug] entering development mode
[webpack-isomorphic-tools] [debug] instantiated webpack-isomorphic-tools with options {
  "debug": true,
  "alias": {
    "actions": "/<dir>/src/actions/",
    "components": "/<dir>/src/components/",
    "containers": "/<dir>/src/containers/",
    "content": "/<dir>/src/content/",
    "store": "/<dir>/src/store/",
    "styles": "/<dir>/src/styles/",
    "config": "/<dir>/src/config/dev"
  },
  "assets": {
    "images": {
      "extensions": [
        "png",
        "jpg",
        "gif",
        "ico"
      ]
    },
    "svg": {
      "extensions": [
        "svg"
      ]
    },
    "fonts": {
      "extensions": [
        "woff",
        "woff2",
        "ttf",
        "eot"
      ]
    },
    "css": {
      "extensions": [
        "css"
      ]
    },
    "styl": {
      "extensions": [
        "styl"
      ]
    },
    "yml": {
      "extensions": [
        "yml"
      ]
    }
  },
  "webpack_assets_file_path": "webpack-assets.json",
  "webpack_stats_file_path": "webpack-stats.json"
}
[webpack-isomorphic-tools] [debug] entering development mode
[webpack-isomorphic-tools] [debug] registering require() hooks for assets
[webpack-isomorphic-tools] [debug]  registering a require() hook for *.png
[require-hook] [debug] Hooking into *.png files loading
[webpack-isomorphic-tools] [debug]  registering a require() hook for *.jpg
[require-hook] [debug] Hooking into *.jpg files loading
[webpack-isomorphic-tools] [debug]  registering a require() hook for *.gif
[require-hook] [debug] Hooking into *.gif files loading
[webpack-isomorphic-tools] [debug]  registering a require() hook for *.ico
[require-hook] [debug] Hooking into *.ico files loading
[webpack-isomorphic-tools] [debug]  registering a require() hook for *.svg
[require-hook] [debug] Hooking into *.svg files loading
[webpack-isomorphic-tools] [debug]  registering a require() hook for *.woff
[require-hook] [debug] Hooking into *.woff files loading
[webpack-isomorphic-tools] [debug]  registering a require() hook for *.woff2
[require-hook] [debug] Hooking into *.woff2 files loading
[webpack-isomorphic-tools] [debug]  registering a require() hook for *.ttf
[require-hook] [debug] Hooking into *.ttf files loading
[webpack-isomorphic-tools] [debug]  registering a require() hook for *.eot
[require-hook] [debug] Hooking into *.eot files loading
[webpack-isomorphic-tools] [debug]  registering a require() hook for *.css
[require-hook] [debug] Hooking into *.css files loading
[webpack-isomorphic-tools] [debug]  registering a require() hook for *.styl
[require-hook] [debug] Hooking into *.styl files loading
[webpack-isomorphic-tools] [debug]  registering a require() hook for *.yml
[require-hook] [debug] Hooking into *.yml files loading
[webpack-isomorphic-tools] [debug] (/<dir>/webpack-assets.json not found)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] [debug] (/<dir>/webpack-assets.json not found)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] [debug] (/<dir>/webpack-assets.json not found)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)

What am I doing wrong here?

[catamphetamine]

Well, I guess that's the same issue as this one:
#23

The .server(rootDir,function(){ method call waits for webpack-assets.json to be generated by the webpack plugin, but since you are running your Webpack inside the callback it never gets called.

app.use(require('webpack-dev-middleware')(compiler, {

I don't see a reason for such a way to run webpack-dev-server.
See, for example react-redux-universal-hot-example
They run a separate webpack-dev-server node.js process
https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/webpack-dev-server.js
They run it as node webpack/webpack-dev-server.js in parallel to the main server script e.g. node main.js

@mattkrick
@bulby97

Full code:

global.webpack_isomorphic_tools = new webpackIsomorphicTools(require('../cfg/webpack-isomorphic-tools-configuration'))
  .development(true)
  .server(rootDir,function(){
    const app = new express();

    // app.use('/assets', express.static(path.join(__dirname, '../dist/assets')));

    app.use(require('webpack-dev-middleware')(compiler, {
      noInfo: false,
      stats: {
        colors: true,
        chunks: false,
        timings: false,
        version: false
      },
      publicPath: config.output.publicPath
    }));

[catamphetamine]

FYI
I'm posting this in every issue and PR to notify whoever may be interested:
today I've released an alternative helper library called universal-webpack.
It takes a different approach than webpack-ismorphic-tools and instead of hacking Node.js require() calls it just compiles all code with target: 'node' webpack configuration option.
As a result, all Webpack plugins and features are supported.
If you think you might need that here's an example project:
https://github.com/halt-hammerzeit/webpack-react-redux-isomorphic-render-example