webpack: webpack gets stuck in compile stage

All of the sudden, without me changing anything in my Webpack config, Webpack started in the middle of building modules. Unlike other issues, this is before the the optimizing chunk assets stage and involves no UglifyJS. I’ve repro’d with:

  • Webpack 1.10.1 and 1.11.0
  • Node v0.10.36
  • Ubuntu 14.10 64-bit. When it hangs, its CPU usage appears to go to zero. I don’t know if Webpack or a loader is at fault, but if loaders could be at fault, is there a way for me to get better debug output?

webpack.config.client.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'babel/polyfill',
    './client',
  ],
  output: {
    path: path.join(__dirname, 'assets'),
    filename: 'client.bundle.js',
    publicPath: '/assets/',
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      'mindfront-react-components': path.resolve(__dirname, 'mindfront-react-components'),
    }
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel?stage=0',
        exclude: /node_modules/,
      }, 
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }, 
      {
        test: /\.sass/,
        loader: 'style-loader!css-loader!sass-loader?indentedSyntax&outputStyle=expanded&' +
        "includePaths[]=" +
        (path.resolve(__dirname, "./node_modules"))
      }, 
      {
        test: /\.scss/,
        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&' +
        "includePaths[]=" +
        (path.resolve(__dirname, "./node_modules"))
      }, 
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader?limit=8192'
      },
    ],
  },
};

webpack.config.client.dev.js:

var webpack = require('webpack');
var config = require('./webpack.config.client');
var _ = require('lodash');

var devProps = require('./devProps');

var config = module.exports = _.assign(_.cloneDeep(config), {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?' + devProps.baseUrl,
    'webpack/hot/only-dev-server',
  ].concat(config.entry),
  output: _.assign(_.cloneDeep(config.output), {
    publicPath: devProps.baseUrl + '/assets/',
  }),
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.PrefetchPlugin('react/addons'),
  ],
  devServer: {
    publicPath: devProps.baseUrl + '/assets/',
    hot: true,
    historyApiFallback: true,
    contentBase: devProps.contentBase,
  }
});

// inject react-hot loader

var jsLoader = _.find(config.module.loaders, function(loader) {
  return loader.test.test('.js');
});

if (jsLoader) {
  jsLoader.loader = 'react-hot!' + jsLoader.loader;
}

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Comments: 17

Most upvoted comments

@jedwards1211 how did you figure out it is sass-loader/node-sass blocking the build?

@sumantka I’m only suggesting to use url-loader temporarily for diagnosing the problem – it isn’t a workaround for sass-loader, and wouldn’t actually make your webapp show the correct CSS. All this change does is help you determine if sass-loader is hanging the build.

@leoselig Sass itself is ancient in JS-time, haven’t you gotten on the CSS-in-JS bandwagon yet? :trollface: