webpack: Webpack 4.2.0 is not loading due to javascript error in the "webpack/lib/RequestShortener.js

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Running the webpack config ends with the below error, this is a major error which prevents loading my environment.

used packge.json npm script to run the below command

webpack --watch --config webpack.config.js

or even only

webpack --watch

I was expecting that the system will load as was for webpack 3.5.1 but ended with error

] C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack-cli\bin\webpack.js:242
[0] throw err;
[0] ^
[0]
[0] TypeError: Cannot read property 'replace' of undefined
[0] at normalizeBackSlashDirection (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack\lib\RequestShortener.js:18:17)[0] at new RequestShortener (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack\lib\RequestShortener.js:28:15)
[0] at new Compiler (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack\lib\Compiler.js:132:27)
[0] at Object. (C:\Users\YossiH\projects\ag4c\ui-project\webpack.config.js:4:18)
[0] at Module._compile (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
[0] at Object.Module._extensions..js (module.js:671:10)
[0] at Module.load (module.js:573:32)
[0] at tryModuleLoad (module.js:513:12)
[0] at Function.Module._load (module.js:505:3)
[0] at Module.require (module.js:604:17)
[0] at require (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
[0] at WEBPACK_OPTIONS (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack-cli\bin\convert-argv.js:133:13)
[0] at requireConfig (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack-cli\bin\convert-argv.js:135:6)
[0] at C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack-cli\bin\convert-argv.js:142:17
[0] at Array.forEach ()
[0] at module.exports (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack-cli\bin\convert-argv.js:140:15)
[0] at yargs.parse (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack-cli\bin\webpack.js:239:39)
[0] at Object.parse (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack-cli\node_modules\yargs\yargs.js:543:18)
[0] at C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack-cli\bin\webpack.js:217:8
[0] at Object. (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack-cli\bin\webpack.js:512:3)
[0] at Module._compile (module.js:660:30)
[0] at Object.Module._extensions..js (module.js:671:10)
[0] at Module.load (module.js:573:32)
[0] at tryModuleLoad (module.js:513:12)
[0] at Function.Module._load (module.js:505:3)
[0] at Module.require (module.js:604:17)
[0] at require (internal/module.js:11:18)
[0] at Object. (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack\bin\webpack.js:12:2)
[0] at Module._compile (module.js:660:30)
[0] at Object.Module._extensions..js (module.js:671:10)
[0]
[0] npm ERR! Windows_NT 10.0.16299
[0] npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\YossiH\projects\ag4c\ui-project\node_modules\npm\bin\npm-cli.js" "run" "build"
[0] npm ERR! node v9.5.0
[0] npm ERR! npm v3.10.10
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! cs-prod@0.0.0 build: webpack --watch --config webpack.config.js
[0] npm ERR! Exit status 1
[0] npm ERR!
[0] npm ERR! Failed at the cs-prod@0.0.0 build script 'webpack --watch --config webpack.config.js'.
[0] npm ERR! Make sure you have the latest version of node.js and
npm installed.
npm ERR! If you do, this is most likely a problem with the cs-prod package,
[0] npm ERR! not with npm itself.
[0] npm ERR! Tell the author that this fails on your system:
[0] npm ERR! webpack --watch --config webpack.config.js
[0] npm ERR! You can get information on how to open an issue for this project with:
[0] npm ERR! npm bugs cs-prod
[0] npm ERR! Or if that isn't available, you can get their info via:
[0] npm ERR! npm owner ls cs-prod
[0] npm ERR! There is likely additional logging output above.
[0]
[0] npm ERR! Please include the following file with any support request:
[0] npm ERR! C:\Users\YossiH\projects\ag4c\ui-project\npm-debug.log
[0] npm run build exited with code 1
[1] C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack\lib\RequestShortener.js:18
[1] return request.replace(NORMALIZE_SLASH_DIRECTION_REGEXP, "/");
[1] ^
[1]
[1] TypeError: Cannot read property 'replace' of undefined
[1] at normalizeBackSlashDirection (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack\lib\RequestShortener.js:18:17)[1] at new RequestShortener (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack\lib\RequestShortener.js:28:15)
[1] at new Compiler (C:\Users\YossiH\projects\ag4c\ui-project\node_modules\webpack\lib\Compiler.js:132:27)
[1] at Object. (C:\Users\YossiH\projects\ag4c\ui-project\webpack.config.js:4:18)
[1] at Module._compile (module.js:660:30)
[1] at Object.Module._extensions..js (module.js:671:10)
[1] at Module.load (module.js:573:32)
[1] at tryModuleLoad (module.js:513:12)
[1] at Function.Module._load (module.js:505:3)
[1] at Module.require (module.js:604:17)
[1]
[1] npm ERR! Windows_NT 10.0.16299
[1] npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\YossiH\projects\ag4c\ui-project\node_modules\npm\bin\npm-cli.js" "run" "server"
[1] npm ERR! node v9.5.0
[1] npm ERR! npm v3.10.10
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! cs-prod@0.0.0 server: webpack-dev-server
npm ERR! Exit status 1
[1] npm ERR!
[1] npm ERR! Failed at the cs-prod@0.0.0 server script 'webpack-dev-server'.
[1] npm ERR! Make sure you have the latest version of node.js and
npm installed.
[1] npm ERR! If you do, this is most likely a problem with the cs-prod package,
[1] npm ERR! not with npm itself.
[1] npm ERR! Tell the author that this fails on your system:
[1] npm ERR! webpack-dev-server
[1] npm ERR! You can get information on how to open an issue for this project with:
[1] npm ERR! npm bugs cs-prod
[1] npm ERR! Or if that isn't available, you can get their info via:
[1] npm ERR! npm owner ls cs-prod
[1] npm ERR! There is likely additional logging output above.
[1]
[1] npm ERR! Please include the following file with any support request:
[1] npm ERR! C:\Users\YossiH\projects\ag4c\ui-project\npm-debug.log
[1] npm run server exited with code 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cs-prod@0.0.0 start: concurrently "npm run build" "npm run server"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cs-prod@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\YossiH\AppData\Roaming\npm-cache_logs\2018-03-21T09_42_23_028Z-debug.log

I’ve succeeded in solving it locally adding few changes in the RequestShortener.js I’ve added the file solution just in order to help…

       /*
             MIT License http://www.opensource.org/licenses/mit-license.php
              Author Tobias Koppers @sokra
       */
       "use strict";

           const path = require("path");
            const NORMALIZE_SLASH_DIRECTION_REGEXP = /\\/g;
           const PATH_CHARS_REGEXP = /[-[\]{}()*+?.,\\^$|#\s]/g;
           const SEPARATOR_REGEXP = /[/\\]$/;
           const FRONT_OR_BACK_BANG_REGEXP = /^!|!$/g;
            const INDEX_JS_REGEXP = /\/index.js(!|\?|\(query\))/g

         const normalizeBackSlashDirection = request => {
            //ADDED PEACE OF CODE
            if(!request){
 	       return;
              }
             return request.replace(NORMALIZE_SLASH_DIRECTION_REGEXP, "/");
         };

         const createRegExpForPath = path => {
            const regexpTypePartial = path.replace(PATH_CHARS_REGEXP, "\\$&");
           return new RegExp(`(^|!)${regexpTypePartial}`, "g");
         };

    class RequestShortener {
     constructor(directory) {		
	     directory = normalizeBackSlashDirection(directory);
	     if (SEPARATOR_REGEXP.test(directory))
		   directory = directory.substr(0, directory.length - 1);

	    if (directory) {
		    this.currentDirectoryRegExp = createRegExpForPath(directory);

            //ADDED PEACE OF CODE
	  //}
         //console.log('************** ', path, ' **** directory ', directory);
	   const dirname = path.dirname(directory);
	   const endsWithSeparator = SEPARATOR_REGEXP.test(dirname);
	   const parentDirectory = endsWithSeparator
		  ? dirname.substr(0, dirname.length - 1)
		  : dirname;
	if (parentDirectory && parentDirectory !== directory) {
		this.parentDirectoryRegExp = createRegExpForPath(parentDirectory);
	}

	if (__dirname.length >= 2) {
		const buildins = normalizeBackSlashDirection(path.join(__dirname, ".."));
		const buildinsAsModule =
			this.currentDirectoryRegExp &&
			this.currentDirectoryRegExp.test(buildins);
		this.buildinsAsModule = buildinsAsModule;
		this.buildinsRegExp = createRegExpForPath(buildins);
	}
        
        //ADDED PEACE OF CODE
         }

	   this.cache = new Map();
      }

       shorten(request) {
	      if (!request) return request;
	          const cacheEntry = this.cache.get(request);
	      if (cacheEntry !== undefined) return cacheEntry;
	            let result = normalizeBackSlashDirection(request);
	      if (this.buildinsAsModule && this.buildinsRegExp)
		  result = result.replace(this.buildinsRegExp, "!(webpack)");
	     if (this.currentDirectoryRegExp)
		  result = result.replace(this.currentDirectoryRegExp, "!.");
	     if (this.parentDirectoryRegExp)
		result = result.replace(this.parentDirectoryRegExp, "!..");
	     if (!this.buildinsAsModule && this.buildinsRegExp)
		 result = result.replace(this.buildinsRegExp, "!(webpack)");
	      result = result.replace(INDEX_JS_REGEXP, "$1");
	      result = result.replace(FRONT_OR_BACK_BANG_REGEXP, "");
	      this.cache.set(request, result);

	     return result;
           }
      }
      module.exports = RequestShortener;

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.