How can I fix the web-dev-server execution error?

Question

I'm so stuck. I need some help with anything.

My environment : WSL2

I execute webpack-dev-server

npm run dev

This is its log:

> [email protected] dev /mnt/c/Users/J3SUNG/Desktop/react/React Study/lecture
> webpack-dev-server --hot

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /dist/
ℹ ｢wds｣: Content not from webpack is served from /mnt/c/Users/J3SUNG/Desktop/react/React Study/lecture
@babel/preset-env: `DEBUG` option

Using targets:
{
  "chrome": "85",
  "ie": "11",
  "samsung": "12"
}

Using modules transform: auto

Using plugins:
  proposal-numeric-separator { "ie":"11" }
  proposal-logical-assignment-operators { "ie":"11", "samsung":"12" }
  proposal-nullish-coalescing-operator { "ie":"11", "samsung":"12" }
  proposal-optional-chaining { "ie":"11", "samsung":"12" }
  proposal-json-strings { "ie":"11" }
  proposal-optional-catch-binding { "ie":"11" }
  transform-parameters { "ie":"11" }
  proposal-async-generator-functions { "ie":"11" }
  proposal-object-rest-spread { "ie":"11" }
  transform-dotall-regex { "ie":"11" }
  proposal-unicode-property-regex { "ie":"11" }
  transform-named-capturing-groups-regex { "ie":"11" }
  transform-async-to-generator { "ie":"11" }
  transform-exponentiation-operator { "ie":"11" }
  transform-template-literals { "ie":"11" }
  transform-literals { "ie":"11" }
  transform-function-name { "ie":"11" }
  transform-arrow-functions { "ie":"11" }
  transform-classes { "ie":"11" }
  transform-object-super { "ie":"11" }
  transform-shorthand-properties { "ie":"11" }
  transform-duplicate-keys { "ie":"11" }
  transform-computed-properties { "ie":"11" }
  transform-for-of { "ie":"11" }
  transform-sticky-regex { "ie":"11" }
  transform-unicode-escapes { "ie":"11" }
  transform-unicode-regex { "ie":"11" }
  transform-spread { "ie":"11" }
  transform-destructuring { "ie":"11" }
  transform-block-scoping { "ie":"11" }
  transform-typeof-symbol { "ie":"11" }
  transform-new-target { "ie":"11" }
  transform-regenerator { "ie":"11" }
  proposal-export-namespace-from { "ie":"11" }
  syntax-dynamic-import { "chrome":"85", "ie":"11", "samsung":"12" }
  syntax-top-level-await { "chrome":"85", "ie":"11", "samsung":"12" }

Using polyfills: No polyfills were added, since the `useBuiltIns` option was not set.
[BABEL] Note: The code generator has deoptimised the styling of /mnt/c/Users/J3SUNG/Desktop/react/React Study/lecture/node_modules/react-dom/cjs/react-dom.development.js as it exceeds the max of 500KB.
ℹ ｢wdm｣: asset app.js 1.31 MiB [emitted] (name: app)
runtime modules 460 bytes 4 modules
modules by path ./node_modules/ 1.23 MiB
  modules by path ./node_modules/webpack-dev-server/client/ 36.1 KiB 10 modules
  modules by path ./node_modules/webpack/hot/ 6.04 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 60.5 KiB 4 modules
  modules by path ./node_modules/scheduler/ 36.7 KiB 4 modules
  modules by path ./node_modules/react-hot-loader/ 4.44 KiB 3 modules
  modules by path ./node_modules/url/ 42.6 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 6.65 KiB 3 modules
  modules by path ./node_modules/react/ 79.6 KiB 2 modules
  modules by path ./node_modules/react-dom/ 737 KiB 2 modules
modules by path ./*.jsx 7.23 KiB
  ./client.jsx 1.05 KiB [built] [code generated]
  ./WordRelay.jsx 6.18 KiB [built] [code generated]
webpack 5.1.3 compiled successfully in 22601 ms
ℹ ｢wdm｣: Compiled successfully.
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/DumpStack.log.tmp'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/hiberfil.sys'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/pagefile.sys'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/swapfile.sys'

So I tried to change the permission files using sudo, but I get permission denied.

I confirm that I have permission through ls -al, but this file's permission is displayed as -????????.

Please could you advise me?

Answer 1

Windows likely doesn't like the fact you are storing/trying to write files in C:/. Since WSL doesn't always tie in correctly with Window's permission systems, even with sudo WSL likely isn't able to change the permissions of those files.

I'd recommend changing directories to somewhere you know your user has ownership of (e.g. your documents library or C:/users/yourusername), and trying again.

Answer 2

I've had a similar issue and the solution that worked for me was clone (or create) my repository inside a WSL sub-directory from HOME, something like ~/workspace/React Study instead of the mounted C:\.

This solution even improve a lot the performance using VS Code integration, specially when you're editing and saving files.