Haul becomes unresponsive while building - is there a way to enable logging?

Current Behavior

While building for iOS i.e. yarn haul start --platform ios Haul gets stuck at 98% and becomes unresponsive. yarn haul bundle --platform ios on the other hand runs successfully to completion

I can isolate the offending line of code which causes haul to hang but I’d like to know why. I’ve tried the --verbose flag on the start command but I see no additional output on the console. Is there some way I can see whats happening leading up to the hang?

Expected Behavior

I’d like to get more detail on why we’re hanging

Haul Configuration (webpack.haul.js)

import { createWebpackConfig } from 'haul';
const path = require('path');
const paths = require('./config/paths');
const autoprefixer = require('autoprefixer');
const StatsPlugin = require('stats-webpack-plugin');
let resolveModules = [];
resolveModules.push(path.resolve(__dirname, 'src'));
resolveModules.push(paths.appNodeModules);
resolveModules = resolveModules.concat(paths.nodePaths);
const isProduction = false;

const jsonToSassVars = require('./config/json_to_sass_vars');
const sassVars = jsonToSassVars({
  fontPath: isProduction ? '/home/' : '/',
});

const options = {
  cssModuleNiceNames: true,
};
const cssLoaderConfig = options.cssModuleNiceNames
  ? {
      modules: true,
      localIdentName: '[path]-[name]-[local]-[hash:base64:5]',
    }
  : {
      modules: true,
      '-autoprefixer': true,
    };

// ------------------------------------------------------------
// We use PostCSS for autoprefixing only.
function postcss() {
  return [
    require('stylelint')({
      configFile: paths.stylelintConfig,
    }),
    autoprefixer({
      browsers: [
        '>1%',
        'last 4 versions',
        'Firefox ESR',
        'not ie < 9', // React doesn't support IE8 anyway
      ],
    }),
  ];
}

export default {
  webpack: env => {
    const config = createWebpackConfig({
      entry: `./src/index.${env.platform}.js`,
    })(env);

    if (false)
      config.plugins.push(
        new StatsPlugin('stats.json', {
          chunkModules: true,
          exclude: [/node_modules[\\\/]react/],
        })
      );
    config.module.rules = [
      {
        // typescript
        include: paths.appSrc,
        exclude: [paths.textEngineCompiledSrc, /_pb/, /node_modules/, /\.test/],
        test: /\.tsx?$/,
        use: [
          'cache-loader',
          {
            loader: 'ts-loader',
            options: {
              happyPackMode: true,
            },
          },
        ],
      },
      {
        // kiwi
        test: /\.(kiwi)$/,
        use: 'raw-loader',
        exclude: /node_modules/,
        include: [paths.appSrc],
      },
      {
        // wasm
        type: 'javascript/auto',
        test: /\.wasm$/,
        loader: 'wasm-loader',
      },
      {
        test: /\.(js|jsx)$/,
        include: [
          paths.appSrc,
          paths.fileTypeNodeModule,
          /node_modules\/@react-navigation\//,
          /node_modules\/rn-fetch-blob\//,
        ],
        // Exclude all node_modules EXCEPT for the top-level file-type module,
        // which the maintain has no interest in making browser-compatible
        // https://github.com/sindresorhus/file-type/issues/78
        // Unit tests for regex: https://regex101.com/r/fUZJlR/7/tests
        exclude: [paths.textEngineCompiledSrc, /_pb/],
        use: [
          // cacheLoader,
          // threadLoader,
          {
            loader: 'babel-loader',
            options: { cacheDirectory: true },
          },
        ],
      },
      {
        // "postcss" loader applies autoprefixer to our CSS.
        // "css" loader resolves paths in CSS and adds assets as dependencies.
        // "style" loader turns CSS into JS modules that inject <style> tags.
        // In production, we use a plugin to extract that CSS to a file, but
        // in development "style" loader enables hot editing of CSS..
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader?importLoaders=1',
          {
            loader: 'postcss-loader',
            options: {
              plugins: postcss,
            },
          },
        ],
      },
      {
        test: /\.scssm$/,
        use: [
          { loader: 'cache-loader' },
          'style-loader',
          {
            loader: 'css-loader',
            options: cssLoaderConfig,
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: postcss,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              data: sassVars,
            },
          },
        ],
      },
      {
        test: /\.(eot|otf|ttf|woff|woff2)(\?.*)?$/,
        loader: 'ignore-loader',
      },

      ...config.module.rules,
    ];

    config.resolve.extensions = [
      `.${env.platform}.ts`,
      '.native.ts',
      `.${env.platform}.tsx`,
      '.native.tsx',
      '.ts',
      '.tsx',
      ...config.resolve.extensions,
    ];
    config.resolve = { modules: resolveModules, ...config.resolve };
    config.node = {
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
      ...config.node,
    };
    // config.mode = 'development';
    config.optimization = {
      minimize: false,
      removeAvailableModules: false,
      removeEmptyChunks: false,
      splitChunks: false,
    };

    return config;
  },
};

Your Environment

software	version
Haul	1.0.0-rc.10
react-native	0.57.7
node	v8.12.0
npm or yarn	1.9.2

[zamotany]

This shouldn’t be an issue on the next branch where we’re doing a revamp of Haul. If you’re using RN 0.59 or 0.60 go check it out - it’s much more stable.

[zamotany]

If anyone is having this issue please use @haul-bundler/cli (if not already using) and feel free to open a new issue or reopen this one.