Webpack-dev-server: Malformed paths when trying to view `/webpack-dev-server` route [Windows]

[kaiyoma]

• Operating System: Windows 10
• Node Version: 8.9.0
• NPM Version: 5.5.1
• webpack Version: 4.6.0
• webpack-dev-server Version: 3.1.3

• [x] This is a bug
• [ ] This is a modification request

Expected Behavior

According to this page:

If you're having trouble, navigating to the /webpack-dev-server route will show where files are served. For example, http://localhost:9000/webpack-dev-server.

However, when I try that with my dev server, I get a JS backtrace in the console:

Error: no such file or directory
    at MemoryFileSystem.readdirSync (C:\...\node_modules\memory-fs\lib\MemoryFileSystem.js:126:10)
    at writeDirectory (C:\...\node_modules\webpack-dev-server\lib\Server.js:124:34)
    at Server.app.get (C:\...\node_modules\webpack-dev-server\lib\Server.js:156:5)
    at Layer.handle [as handle_request] (C:\...\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\...\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (C:\...\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\...\node_modules\express\lib\router\layer.js:95:5)
    at C:\...\node_modules\express\lib\router\index.js:281:22
    at Function.process_params (C:\...\node_modules\express\lib\router\index.js:335:12)
    at next (C:\...\node_modules\express\lib\router\index.js:275:10)

Actual Behavior

I'm not sure exactly (since I've never used this feature), but I was expecting something helpful to happen.

For Bugs; How can we reproduce the behavior?

Visit http://localhost:9000/webpack-dev-server for a dev server.

[kaiyoma]

I'm having a lot of trouble upgrading our project to webpack 4 (webpack-dev-server refuses to "just work") and this feature appears to be the only thing that could help. And it's seemingly broken. 😭

[joyfulelement]

I'm having the exact same issue with a setup of webpack 4 + webpack-dev-server setup with node.js (version v8.9.1). Still digging...

[andreasschuele]

I had the same issue. It looks like to be an issue with path handling, since after removing white space from my project path it did work again.

There is already an issue for that: webpack/memory-fs#59

[kaiyoma]

Ah, very interesting. I'm also on Windows and also have spaces in my path, but they can't be removed because they're in the username portion of the path.

[andreasschuele]

As a quick fix I've added in node_modules\memory-fs\lib\MemoryFileSystem.js the following line to the pathToArray function.

path = path.replace(/\%20/g, " "); // replace encoded white space

The altered function:

function pathToArray(path) {
    path = path.replace(/\%20/g, " "); // replace encoded white space
    path = normalize(path);
    var nix = /^\//.test(path);
    if(!nix) {
        if(!/^[A-Za-z]:/.test(path)) {
            throw new MemoryFileSystemError(errors.code.EINVAL, path);
        }
        path = path.replace(/[\\\/]+/g, "\\"); // multi slashs
        path = path.split(/[\\\/]/);
        path[0] = path[0].toUpperCase();
    } else {
        path = path.replace(/\/+/g, "/"); // multi slashs
        path = path.substr(1).split("/");
    }
    if(!path[path.length-1]) path.pop();
    return path;
}

[alexander-akait]

Closing in favor https://github.com/webpack/memory-fs/issues/59, also we have problem in webpack-dev-middleware and already fixed this problem, so update deps, if problem still exists feel fee to open new issue with reproducible test repo, thanks