Skip to content

webpack-dev-server fails if # in project path #16819

@felix-alonso

Description

@felix-alonso

Bug report

If you run the npx webpack serve on a project whose path contains a # character, then webpack-dev-server will fail to serve the content.

Actual Behavior

Here are some error logs:

Details
  ~/projects/f#/webpack                                                                      07:57:20
❯ npx webpack serve
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.225:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::c3db:1547:cf82:8d44]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/felix/projects/f#/webpack/public' directory
assets by status 87.9 KiB [cached] 1 asset
runtime modules 27.1 KiB 12 modules
cacheable modules 551 KiB
  modules by path ../../f#/webpack/node_modules/webpack/hot/*.js 4.59 KiB
    ../../f#/webpack/node_modules/webpack/hot/dev-server.js 1.88 KiB [built] [code generated]
    ../../f#/webpack/node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]
    ../../f#/webpack/node_modules/webpack/hot/log-apply-result.js 1.29 KiB [built] [code generated]
    ../../f#/webpack/node_modules/webpack/hot/emitter.js 75 bytes [built] [code generated]
  ../../f#/webpack/src/index.js 217 bytes [built] [code generated]
  ../../f#/webpack/node_modules/lodash/lodash.js 531 KiB [built] [code generated]
  ../../f#/webpack/node_modules/events/events.js 14.5 KiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in Module not found: Error: Can't resolve '/home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true' in '/home/felix/projects/f#/webpack'
resolve '/home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true' in '/home/felix/projects/f#/webpack'
  using description file: /home/felix/projects/f#/webpack/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    root path /home/felix/projects/f#/webpack
      using description file: /home/felix/projects/f#/webpack/package.json (relative path: ./home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true)
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          /home/felix/projects/f#/webpack/home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /home/felix/projects/f#/webpack/home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true.js doesn't exist
        .json
          Field 'browser' doesn't contain a valid alias configuration
          /home/felix/projects/f#/webpack/home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true.json doesn't exist
        .wasm
          Field 'browser' doesn't contain a valid alias configuration
          /home/felix/projects/f#/webpack/home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true.wasm doesn't exist
        as directory
          /home/felix/projects/f#/webpack/home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true doesn't exist
    using description file: /home/felix/projects/f#/webpack/node_modules/webpack-dev-server/package.json (relative path: ./client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true.wasm doesn't exist
      as directory
        /home/felix/projects/f#/webpack/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true doesn't exist
  using description file: /home/felix/projects/f#/webpack/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    root path /home/felix/projects/f#/webpack
      using description file: /home/felix/projects/f#/webpack/package.json (relative path: ./home/felix/projects/f)
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          /home/felix/projects/f#/webpack/home/felix/projects/f doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          /home/felix/projects/f#/webpack/home/felix/projects/f.js doesn't exist
        .json
          Field 'browser' doesn't contain a valid alias configuration
          /home/felix/projects/f#/webpack/home/felix/projects/f.json doesn't exist
        .wasm
          Field 'browser' doesn't contain a valid alias configuration
          /home/felix/projects/f#/webpack/home/felix/projects/f.wasm doesn't exist
        as directory
          /home/felix/projects/f#/webpack/home/felix/projects/f doesn't exist
    No description file found in /home/felix/projects or above
    no extension
      Field 'browser' doesn't contain a valid alias configuration
      /home/felix/projects/f doesn't exist
    .js
      Field 'browser' doesn't contain a valid alias configuration
      /home/felix/projects/f.js doesn't exist
    .json
      Field 'browser' doesn't contain a valid alias configuration
      /home/felix/projects/f.json doesn't exist
    .wasm
      Field 'browser' doesn't contain a valid alias configuration
      /home/felix/projects/f.wasm doesn't exist
    as directory
      /home/felix/projects/f doesn't exist

webpack 5.75.0 compiled with 1 error and 1 warning in 2701 ms
^C<i> [webpack-dev-server] Gracefully shutting down. To force exit, press ^C again. Please wait...

Expected Behavior

The server should run regardless of the characters in the folder path.

How Do We Reproduce?

Here is a minimal project that can trigger this behavior.

webpack.tar.gz

This script should reproduce the behavior if you are using something POXIX-y.

mkdir "test#"
tar -xzvf webpack.tar.gz -C "test#"
cd "test#/webpack"
npx webpack serve

System:
OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
Memory: 8.45 GB / 15.31 GB
Binaries:
Node: 16.19.1 - ~/.asdf/installs/nodejs/16.19.1/bin/node
npm: 9.6.0 - ~/.asdf/plugins/nodejs/shims/npm
Browsers:
Chrome: 106.0.5249.119
Firefox: 102.8.0esr
Packages:
webpack: ^5.75.0 => 5.75.0
webpack-cli: ^5.0.1 => 5.0.1
webpack-dev-server: ^4.11.1 => 4.11.1

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions