"npm run" hanging on ts-loader (webpack)

Question

I am building a web app that consists of static HTML and other assets using webpack on Mac OS X 10.11.3. The app talks to an API that is on another server.

I am having trouble building my app using webpack. The build process appears to hang at or around the ts-loader execution. I am running my build like this:

npm run go --loglevel verbose

which executes this command from my package.json:

./node_modules/.bin/webpack-dev-server --display-reasons --display-chunks --watch

The output in the Terminal window ends with

ts-loader: Using [email protected] and /Users/mn/Documents/source/J/appstore/store-front/app/ts/tsconfig.json

I have tried deleting the node_modules folder and reinstalling these; I have tried uninstalling webpack and reinstalling; I have tried reverting my webpack.config.js to a version I know works; but it just hangs here!

My webpack.config.js looks like this:

var webpack = require('webpack'),
    ReloadPlugin = require('webpack-reload-plugin'),
    path = require('path'),
    ChunkManifestPlugin = require('chunk-manifest-webpack-plugin'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    WebpackNotifierPlugin = require('webpack-notifier'),
    ExtractTextPlugin = require("extract-text-webpack-plugin");

/**
 * optimist has been depracted. Find an alternative? minimist?  
 */
var argv = require('optimist')
    .alias('r', 'release').default('r', false)
    .argv;

/**
 * Useful variables
 */
var cwd = process.cwd();
var DEBUG = !argv.release;
var isDevServer = process.argv.join('').indexOf('webpack-dev-server') > -1;
var version = require(path.resolve(cwd, 'package.json')).version;
var reloadHost = "0.0.0.0";
var npmRoot = __dirname + "/node_modules";
var appDir = __dirname + "/app";

var entry = ["./app/ts/bootstrap"]

if (isDevServer) {
    entry.unshift("webpack-dev-server/client?http://" + reloadHost + ":8080");
}

function makeConfig(options) {
    return {
        cache: true,
        debug: true,
        verbose: true,
        displayErrorDetails: true,
        displayReasons: true,
        displayChunks: true,
        context: __dirname,
        entry: {
            app: entry,
            vendor: './app/ts/vendor.ts'
        },
        stats: {
            colors: true,
            reasons: DEBUG
        },
        devtool: 'source-map',
        recordsPath: path.resolve('.webpack.json'),
        devServer: {
            inline: true,
            colors: true,
            contentBase: path.resolve(cwd, "build"),
            publicPath: "/"
        },
        output: {
            path: path.resolve(cwd, "build"),
            filename: "[name].js",
            publicPath: "/",
            chunkFilename: "[id].bundle.js",

            // Hot Module Replacement settings:
            hotUpdateMainFilename: "updates/[hash].update.json",
            hotUpdateChunkFilename: "updates/[hash].[id].update.js"
        },
        plugins: [
            new webpack.IgnorePlugin(/spec\.js$/),
            new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js', minChunks: Infinity }),
            new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor'] }),
            new ExtractTextPlugin("styles.css"),
            new webpack.DefinePlugin({
                VERSION: JSON.stringify(version),
                ENV: JSON.stringify(options.env)
            }),
            new HtmlWebpackPlugin({
                template: path.join(appDir, "index.html"),
            }),
            new ReloadPlugin(isDevServer ? 'localhost' : ''),
            new WebpackNotifierPlugin({
                title: "Jisc AppStore App"
            }),
        ],
        resolveLoader: {
            root: path.join(__dirname, 'node_modules'),
            modulesDirectories: ['node_modules'],
            fallback: path.join(__dirname, "node_modules")
        },
        resolve: {
            root: [path.resolve(cwd)],
            modulesDirectories: [
                'node_modules', 'app', 'app/ts', '.'
            ],
            extensions: ["", ".ts", ".js", ".json", ".css"],
            alias: {
                'app': 'app',
                'scripts': npmRoot
            }
        },
        module: {
            preLoaders: [
                { test: /\.ts$/, loader: "tslint" }
            ],

            loaders: [
                { test: /\.(png|jp?g|gif)$/, loaders: ["url", "image"] },
                { test: /\.json$/, loader: 'json' },
                { test: /^(?!.*\.min\.css$).*\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap") },
                { test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] },
å                { test: /\.html$/, loader: "html" },
                { test: /\.ts$/, loader: 'ts', exclude: [/test/, /node_modules/] },
                { test: /vendor\/.*\.(css|js)/, loader: 'file-loader?name=[path][name].[ext]', exclude: [/node_modules/] },
                { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader?limit=10000&minetype=application/font-woff" },
                { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
            ],
            noParse: [
                /\.min\.js/,
                /vendor[\/\\].*?\.(js|css)$/
            ]
        },
        tslint: {
            emitErrors: false,
            failOnHint: false
        }
    }
}

var config = makeConfig(argv)

console.log(require('util').inspect(config, { depth: 10 }))
module.exports = config;

My tsconfig.json looks like this:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noEmitHelpers": false,
        "sourceMap": true
    },
    "filesGlob": [
        "./app/**/*.ts",
        "!./node_modules/**/*.ts"
    ],
    "compileOnSave": false,
    "buildOnSave": false
}

Can anyone suggest what might be happening? I don't seem to be able to produce any logs from either the webpack dev server or the npm build.

Answer 1

After hours of reverse-engineering ts-loader I finally found out what was causing this "freeze" (as it may seem) in my case:

I am building a web scraper and had amassed around 40Gb of cached data in a hashed directory structure between the previous, successful deployment and the now failing/freezing deployment.

Turned out, since I'd forgotten to include the root cache directory in the "exclude" option in my tsconfig.json, ts-loader was going through all sub-folders in the cache directory. So, it wasn't actually hanging, it was just looking through millions of files.

When I added the cache directory to the excluded files option, everything went back to normal.

Hope this helps you with your issue. In case you want to look into what's going on with typescript, I'd recommend to experiment with some console.logs in the visitDirectory-function in typescript.js. This was what finally helped me resolve this problem.

Cheers Sam