I have a ten-year old Node application which I am now (at long last) upgrading to the latest packages. I have finally got everything compiled without error, and the reward is that npm creates a new dist folder which, I guess, should allow the browser to run the application. However, when I access the application from the web, it loads the index.html file but then nothing happens. The dist folder contains just two files: app.bundle.js and t.bundle.js. Now here is the odd thing: if I replace this dist folder by the original dist folder, as compiled months ago before I started the upgrade, everything works! This original dist folder contains 66 items,including app.bundle.js and t.bundle.js.

However, this is very unsatisfactory. The working dist folder is frozen, and all the changes I made in the last months to the source are ignored. I am guessing this is due to the configuration in the package.json and webpack.js files still pointing at the legacy implementation. However, I can not work out from all the documentation I have looked at just how the package.json and webpack.js should be set up now.

Here is how files are arranged:

tc (top level)    
    -- package.json
    -- public folder
    -- various other folders containing source for the server backend
    -- node-modules folder

public (folder contained in tc)
   -- dist folder
   -- app folder
   -- index.html
   -- t.html
   -- webpack.js

app (folder contained in public)
   -- app.html 
   -- hundreds of files holding all the code presented by the browser

Here is the package.json file:

{
  "name": "tc",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "pm2 startOrReload pm2.json",
    "prod": "pm2 startOrReload pm2.json --env production",
    "logs": "pm2 logs",
    "test": "node --use_strict $(npm bin)/jasmine"
  },
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "async": "^3.2.6",
    "base64url": "^3.0.1",
    "bcrypt": "^5.1.1",
    "body-parser": "^1.20.2",
    "bootstrap": "^5.3.3",
    "bootstrap-less": "^3.3.8",
    "bson": "^6.8.0",
    "codemirror": "^5.65.17",
    "connect-flash": "^0.1.1",
    "connect-mongo": "^5.1.0",
    "cookie-parser": "^1.4.6",
    "dropzone": "^6.0.0-beta.2",
    "ejs": "^3.1.10",
    "express": "^4.19.2",
    "express-session": "^1.18.0",
    "file-saver": "^2.0.5",
    "gridfs-stream": "^1.1.1",
    "jquery": "^3.7.1",
    "jsdom": "^24.1.1",
    "jszip": "^3.10.1",
    "jszip-utils": "^0.1.0",
    "libxmljs": "^1.0.11",
    "lodash": "^4.17.21",
    "mongo-connect": "^0.0.6",
    "mongoose": "^8.5.3",
    "morgan": "^1.10.0",
    "multer": "^1.4.5-lts.1",
    "nodemailer": "^6.9.14",
    "nodemailer-mailgun-transport": "^2.1.5",
    "openseadragon": "^5.0.0",
    "passport": "^0.7.0",
    "passport-facebook": "^3.0.0",
    "passport-google-oauth": "^2.0.0",
    "passport-local": "^1.0.0",
    "passport-twitter": "^1.0.4",
    "promise-defer": "^1.0.0",
    "require-in-the-middle": "^7.4.0",
    "serve-favicon": "^2.5.0",
    "sort-array": "^4.1.5",
    "urijs": "^1.19.11"
  },
  "devDependencies": {
    "css-loader": "^7.1.2",
    "jasmine": "^5.2.0",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "mini-css-extract-plugin": "^2.9.1",
    "style-loader": "^4.0.0",
    "webpack": "^5.94.0"
  }
}

And here is the webpack.js file which creates the bundle for the browser:

var _ = require('lodash')
  , webpack = require('webpack')
  , ResolverPlugin = webpack.ResolverPlugin
  , ProvidePlugin = webpack.ProvidePlugin
  , IgnorePlugin = webpack.IgnorePlugin
//  , ExtractTextPlugin = require("extract-text-webpack-plugin")
  , path = require('path')
  , clientRoot = path.resolve(__dirname)
  , bowerRoot = path.resolve(clientRoot, '..', 'bower_components')
  , nodeRoot = path.resolve(clientRoot, '..', 'node_modules')
  , devtool = 'eval-source-map'
  , debug = true
;
switch (process.env.NODE_ENV) {
  case 'production':
    devtool = '#source-map';
    debug = false;
    break;
  case 'development':
    devtool = 'eval-source-map';
    debug = true;
    break;
}
var config = {
  context: clientRoot,
  mode: "development",
  entry: {
    app: path.join(clientRoot, 'app/boot.js'),
    t: path.join(clientRoot, 'app/t.js'),
  },
  output: {
    path: path.join(clientRoot, 'dist'),
    filename: '[name].bundle.js',
    devtoolModuleFilenameTemplate(info) {
     return `file:///${info.absoluteResourcePath.replace(/\/g, '/')}`;
   },
  },
  externals: {
    jquery: 'jQuery',
    rxjs: 'Rx',
    lodash: '_',
    bson: 'bson',
    'codemirror/lib/codemirror': 'CodeMirror',
    'codemirror/mode/xml/xml': false,
  },
  module: {
    rules: [
      {
        test: /.png(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=image/jpg&prefix=dist/"
      }, {
        test: /.jpg(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=image/jpg&prefix=dist/"
      }, {
        test: /.woff(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
      }, {
        test: /.woff2(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=application/font-woff&prefix=dist/"
      }, {
        test: /.ttf(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=application/octet-stream&prefix=dist/"
      }, {
        test: /.eot(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=application/vnd.ms-fontobject&prefix=dist/"
      }, {
        test: /.svg(?v=d+.d+.d+)?$/,
        use: "url?limit=1000&minetype=image/svg+xml&prefix=dist/"
      },
      {
        test: /.css$/, 
        use:["style-loader", "css-loader"]
        //loader: 'style!css'
      },
      {
        test: /.less$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "less-loader",
            options: {
              lessOptions: {
    //          javascriptEnabled: true,
              },
            }, 
          },
        ],
      },
    ], /*,
    noParse: [
    ] */
  },
  resolve: {
 /*   root: [clientRoot], */
    modules: [clientRoot, 'web_modules', 'node_modules', 'bower_components', ],
    fallback: {
        "fs": false,
        "tls": false,
        "net": false,
        "path": false,
        "zlib": false,
        "http": false,
        "https": false,
        "stream": false,
        "crypto": false,
        "crypto-browserify": false, //if you want to use this module also don't forget npm i crypto-browserify 
      },
    alias: {
      bower: bowerRoot,
      node: nodeRoot,
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
     new webpack.LoaderOptionsPlugin({
        debug: true
    }),
  ],
  devtool: devtool,
};
var compiler = webpack(config);
if (process.env.NODE_ENV === 'development') {
  compiler.watch({
    aggregateTimeout: 300,
    poll: 1000,
  }, handleError);
} else {
 compiler.watch({
    aggregateTimeout: 300,
    poll: 1000,
  }, handleError);
  //compiler.run(handleError);
}
function handleError(err, stats) {
  console.log(JSON.stringify({
    colors: true,
    cached: false,
  }));
}

I am running Node 20.17.0.

More information: comparing old and new dist

I have been comparing what happens in the browser with the legacy and new dists. Both begin by successfully loading the index.html file in the public folder and then successfully load various files referenced in index.html. All good. However, the legacy dist loads up app.css and vendorbundle.js but these are NOT in the new dist folder. After these load correctly in the legacy version, the app goes on to load a bunch of html files within public/app (header.html etc), as invoked by the Angular app running all this.

However, in the new version the app stops after it fails to get vendorbundle.js. It carries on to load appbundle.js (created in the compile) and other files referenced in index.html but then stops. It does not try to load any of the html files within public/app.

I copied the app.css and vendorbundle.js files from the legacy dist folder into the new dist. They now loaded fine. But once more, the app stalled at the same place when I tried to reload.

The problem appears to be that the compiler is not creating new versions of app.css and vendorbundle.js and placing them in the new dist folder. How do I get the compile to create these files? There are no error messages in the npm compile. The legacy version used “webpack”: “^1.15.0”; the new version uses “webpack”: “^5.94.0”. A lot of water between those versions.

I have also tried to use npx to build the bundle. However, this gives an error because it expects the source to be in ./src and I have the source in ./public/app and I don’t see how to direct npx to look for the source there.

Update: it now looks like the problem is this piece of code in the webpack configuration file:

new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor', filename: 'vendor.bundle.js',
      chunks: ['app'],
      minChunks: function(module, count) {
        return module.resource && module.resource.indexOf(clientRoot) === -1;
      }
    }),

This currently does not compile. But it should generate the vendor.bundle missing in the new application. Will continue to explore.