webpack icon indicating copy to clipboard operation
webpack copied to clipboard

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

Open felix-alonso opened this issue 2 years ago • 9 comments

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:

  ~/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

felix-alonso avatar Mar 08 '23 16:03 felix-alonso

thanks so much

JTHuang-Nunu avatar Mar 13 '23 10:03 JTHuang-Nunu

Reproducible example (code from dev server):

const additionalEntry = [
  '/home/akait/IdeaProjects/webpack-cli/test#/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',
  '/home/akait/IdeaProjects/webpack-cli/test#/webpack/node_modules/webpack/hot/dev-server.js'
];

if (typeof webpack.EntryPlugin !== "undefined") {
      for (const additionalEntry of additionalEntries) {
        new webpack.EntryPlugin(compiler.context, additionalEntry, {
          name: undefined,
        }).apply(compiler);
      }
    }

And the problem in '/home/akait/IdeaProjects/webpack-cli/test#/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', if we remove all after ?... we will not have the problem, so I think we have a problem in our resolver, somwhere here https://github.com/webpack/enhanced-resolve/blob/main/lib/util/identifier.js

alexander-akait avatar Mar 14 '23 00:03 alexander-akait

@vankop Hello, can you give an advice here, I feel like we don't resolve it valid way

alexander-akait avatar Mar 14 '23 00:03 alexander-akait

yeah looks like we reverted this https://github.com/webpack/enhanced-resolve/pull/244 unsure why..

vankop avatar Mar 14 '23 16:03 vankop

I would still consider this as a webpack limitation since webpack treat file path as url path ( with # and ? as a "special" chars )

vankop avatar Mar 14 '23 16:03 vankop

@vankop I tried to use file:// but it doesn't work, maybe we can fix this limitation using file://, so file:// will always parsered and handled as URL without any limitations

And it should not break nothing (I hope :smile: )

alexander-akait avatar Mar 14 '23 17:03 alexander-akait

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

webpack-bot avatar Jun 20 '23 16:06 webpack-bot

bump

alexander-akait avatar Jun 20 '23 18:06 alexander-akait

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

webpack-bot avatar Oct 05 '23 10:10 webpack-bot