React Native Windows: Unhandled 'error' event

[max-pv]

Environment

1. npx react-native --version: 5.0.1-alpha.2
2. npx react-native info

System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 2700 Eight-Core Processor
    Memory: 6.77 GB / 15.95 GB
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.14393.0, 10.0.16299.0, 10.0.17134.0, 10.0.17763.0, 10.0.18362.0, 10.0.19041.0
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.8.30804.86 (Visual Studio Community 2019), 16.8.30804.86 (Visual Studio Enterprise 2019)
  Languages:
    Java: 14.0.1
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.0 => 0.64.0
    react-native-windows: 0.64.3 => 0.64.3
  npmGlobalPackages:
    *react-native*: Not Found

Description

When running npx react-native webpack-start in React Native Windows application, the webpack process crashes with the following error within 30 seconds of running:

⠸ Running: (windows)  100% events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
Emitted 'error' event on Socket instance at:
    at emitErrorNT (internal/streams/destroy.js:106:8)

Sometimes it crashes after editing a file. But it never runs for more than 1 minute.

Also, possibly related: fast refresh doesn't seem to work, always failing with the following error:

What have tried to fix this

1. Removing node_modules and running yarn
2. Rebooting the system
3. Upgrading and downgrading node version
4. Disabling HMR
5. Running on a different port (3001)

Reproducible Demo

To reproduce this issue without demo repo, please follow next steps:

1. npx react-native init demo --template react-native-template-typescript
2. cd demo
3. npx react-native-windows-init --version 0.64.3 --language cs --overwrite
4. npx react-native run-windows
5. yarn add -D webpack terser-webpack-plugin babel-loader react-native-webpack-toolkit react-refresh
6. Copy config from the repro repo into the root of the project
7. npx react-native webpack-start

Repo with the reproducible problem:
https://github.com/br4in3x/rnw-rnwt-problem
To reproduce in the repo, please follow next steps:

1. yarn
2. npx react-native run-windows
3. npx react-native webpack-start

[zamotany]

Can you run webpack-start in verbose mode: npx react-native webpack-start --verbose and post the logs? Also does the issue happen when using default port (8081)?

[max-pv]

@zamotany sure, here is the log:

npx react-native webpack-start --verbose

PS C:\Users\max\Code\exp643> npx react-native webpack-start --verbose
i [06:56:31.584Z][DevServerProxy] Server listening at http://[::]:8081
i [07:00:31.356Z][DevServerProxy] Opening debugger UI { url: 'http://localhost:8081/debugger-ui' }
? [07:00:31.370Z][DevServerProxy] Message client connected { clientId: 'client#0' }
i [07:00:31.373Z][DevServerProxy] React Native app connected to debugger
i [07:00:31.977Z][DevServerProxy] GET 200 /launch-js-devtools
i [07:00:31.984Z][DevServerProxy] Starting compiler worker { platform: 'windows', port: 57474 }
? [07:00:31.986Z][DevServerProxy] Compiler worker settings {
env: {
  RNWT_CLI_OPTIONS: '{"config":{"root":"C:\\\\Users\\\\max\\\\Code\\\\exp643","reactNativePath":"C:\\\\Users\\\\max\\\\Code\\\\exp643\\\\node_modules\\\\react-native","webpackConfigPath":"C:\\\\Users\\\\max\\\\Code\\\\exp643\\\\webpack.config.js"},"command":"start","arguments":{"start":{"port":57474,"host":"","interactive":true,"platform":"windows"}}}',
  RNWT_WORKER: '1',
  RNWT_VERBOSE: '1'
}
}
i [07:00:33.170Z][DevServerProxy] GET 200 /debugger-ui
i [07:00:33.668Z][DevServerProxy] GET 200 /debugger-ui/static/js/main.88636ef1.js
i [07:00:33.671Z][DevServerProxy] GET 200 /debugger-ui/static/css/main.cc6b8829.css
i [07:00:33.693Z][DevServerProxy] Chrome Remote JS debugger connected
i [07:00:34.098Z][DevServerProxy] GET 200 /debugger-ui/static/js/debuggerWorker.273ef27e.worker.js
i [07:00:34.467Z][DevServer@windows] Server listening at http://[::]:57474
? [07:00:34.470Z][DevServerProxy] Fetching from worker {
url: 'http://localhost:57474/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true',
method: 'GET',
body: null
}
i [07:00:34.525Z][webpack-dev-middleware] wait until bundle finished: /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
? [07:00:49.382Z][ReactNativeAssetResolver] Processing asset: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\NewAppScreen\components\logo.png
? [07:00:50.315Z][ReactNativeAssetResolver] Asset resolved: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\NewAppScreen\components\logo.png -> C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\NewAppScreen\components\logo.png
? [07:00:53.005Z][reactNativeAssetsLoader] Processing: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\NewAppScreen\components\logo.png
? [07:00:53.009Z][reactNativeAssetsLoader] Asset emitted: assets\node_modules\react-native-windows\Libraries\NewAppScreen\components\logo.png
? [07:00:53.135Z][reactNativeAssetsLoader] Asset processed: {
resourcePath: 'C:\\Users\\max\\Code\\exp643\\node_modules\\react-native-windows\\Libraries\\NewAppScreen\\components\\logo.png',
platform: 'windows',
context: 'C:\\Users\\max\\Code\\exp643',
relativeDirname: 'node_modules\\react-native-windows\\Libraries\\NewAppScreen\\components',
type: 'png',
assetsPath: 'assets',
outputPath: 'C:\\Users\\max\\Code\\exp643\\dist',
filename: 'logo',
normalizedName: 'node_modules_reactnativewindows_libraries_newappscreen_components_logo.png',
scales: { '@1x': { name: 'logo.png' } },
assets: [
  'assets\\node_modules\\react-native-windows\\Libraries\\NewAppScreen\\components\\logo.png'
],
publicPath: 'assets/node_modules/react-native-windows/Libraries/NewAppScreen/components',
width: 512,
height: 512
}
? [07:00:53.531Z][ReactNativeAssetResolver] Processing asset: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\close.png
? [07:00:53.565Z][ReactNativeAssetResolver] Asset resolved: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\close.png -> C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\close.png
? [07:00:53.613Z][reactNativeAssetsLoader] Processing: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\close.png
? [07:00:53.613Z][reactNativeAssetsLoader] Asset emitted: assets\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\close.png
? [07:00:53.619Z][reactNativeAssetsLoader] Asset processed: {
resourcePath: 'C:\\Users\\max\\Code\\exp643\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\close.png',
platform: 'windows',
context: 'C:\\Users\\max\\Code\\exp643',
relativeDirname: 'node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages',
type: 'png',
assetsPath: 'assets',
outputPath: 'C:\\Users\\max\\Code\\exp643\\dist',
filename: 'close',
normalizedName: 'node_modules_reactnativewindows_libraries_logbox_ui_logboximages_close.png',
scales: { '@1x': { name: 'close.png' } },
assets: [
  'assets\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\close.png'
],
publicPath: 'assets/node_modules/react-native-windows/Libraries/LogBox/UI/LogBoxImages',
width: 28,
height: 28
}
? [07:00:55.799Z][ReactNativeAssetResolver] Processing asset: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-left.png
? [07:00:55.799Z][ReactNativeAssetResolver] Processing asset: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-right.png
? [07:00:55.799Z][ReactNativeAssetResolver] Asset resolved: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-left.png -> C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-left.png
? [07:00:55.800Z][ReactNativeAssetResolver] Asset resolved: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-right.png -> C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-right.png
? [07:00:55.849Z][reactNativeAssetsLoader] Processing: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-left.png
? [07:00:55.850Z][reactNativeAssetsLoader] Asset emitted: assets\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-left.png
? [07:00:55.850Z][reactNativeAssetsLoader] Processing: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-right.png
? [07:00:55.850Z][reactNativeAssetsLoader] Asset emitted: assets\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-right.png
? [07:00:55.935Z][reactNativeAssetsLoader] Asset processed: {
resourcePath: 'C:\\Users\\max\\Code\\exp643\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\chevron-left.png',
platform: 'windows',
context: 'C:\\Users\\max\\Code\\exp643',
relativeDirname: 'node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages',
type: 'png',
assetsPath: 'assets',
outputPath: 'C:\\Users\\max\\Code\\exp643\\dist',
filename: 'chevron-left',
normalizedName: 'node_modules_reactnativewindows_libraries_logbox_ui_logboximages_chevronleft.png',
scales: { '@1x': { name: 'chevron-left.png' } },
assets: [
  'assets\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\chevron-left.png'
],
publicPath: 'assets/node_modules/react-native-windows/Libraries/LogBox/UI/LogBoxImages',
width: 16,
height: 28
}
? [07:00:55.936Z][reactNativeAssetsLoader] Asset processed: {
resourcePath: 'C:\\Users\\max\\Code\\exp643\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\chevron-right.png',
platform: 'windows',
context: 'C:\\Users\\max\\Code\\exp643',
relativeDirname: 'node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages',
type: 'png',
assetsPath: 'assets',
outputPath: 'C:\\Users\\max\\Code\\exp643\\dist',
filename: 'chevron-right',
normalizedName: 'node_modules_reactnativewindows_libraries_logbox_ui_logboximages_chevronright.png',
scales: { '@1x': { name: 'chevron-right.png' } },
assets: [
  'assets\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\chevron-right.png'
],
publicPath: 'assets/node_modules/react-native-windows/Libraries/LogBox/UI/LogBoxImages',
width: 16,
height: 28
}
? [07:00:56.367Z][ReactNativeAssetResolver] Processing asset: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\alert-triangle.png
? [07:00:56.367Z][ReactNativeAssetResolver] Processing asset: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\loader.png
? [07:00:56.368Z][ReactNativeAssetResolver] Asset resolved: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\alert-triangle.png -> C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\alert-triangle.png
? [07:00:56.368Z][ReactNativeAssetResolver] Asset resolved: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\loader.png -> C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\loader.png
? [07:00:56.434Z][reactNativeAssetsLoader] Processing: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\alert-triangle.png
? [07:00:56.435Z][reactNativeAssetsLoader] Asset emitted: assets\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\alert-triangle.png
? [07:00:56.439Z][reactNativeAssetsLoader] Processing: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\loader.png
? [07:00:56.441Z][reactNativeAssetsLoader] Asset emitted: assets\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\loader.png
? [07:00:56.442Z][reactNativeAssetsLoader] Asset processed: {
resourcePath: 'C:\\Users\\max\\Code\\exp643\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\alert-triangle.png',
platform: 'windows',
context: 'C:\\Users\\max\\Code\\exp643',
relativeDirname: 'node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages',
type: 'png',
assetsPath: 'assets',
outputPath: 'C:\\Users\\max\\Code\\exp643\\dist',
filename: 'alert-triangle',
normalizedName: 'node_modules_reactnativewindows_libraries_logbox_ui_logboximages_alerttriangle.png',
scales: { '@1x': { name: 'alert-triangle.png' } },
assets: [
  'assets\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\alert-triangle.png'
],
publicPath: 'assets/node_modules/react-native-windows/Libraries/LogBox/UI/LogBoxImages',
width: 48,
height: 42
}
? [07:00:56.443Z][reactNativeAssetsLoader] Asset processed: {
resourcePath: 'C:\\Users\\max\\Code\\exp643\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\loader.png',
platform: 'windows',
context: 'C:\\Users\\max\\Code\\exp643',
relativeDirname: 'node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages',
type: 'png',
assetsPath: 'assets',
outputPath: 'C:\\Users\\max\\Code\\exp643\\dist',
filename: 'loader',
normalizedName: 'node_modules_reactnativewindows_libraries_logbox_ui_logboximages_loader.png',
scales: { '@1x': { name: 'loader.png' } },
assets: [
  'assets\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\loader.png'
],
publicPath: 'assets/node_modules/react-native-windows/Libraries/LogBox/UI/LogBoxImages',
width: 44,
height: 44
}
i [07:01:05.417Z][LoggerPlugin] Bundle built with warnings { time: 30774 }
! [07:01:05.417Z][LoggerPlugin] Warning in "./node_modules/react-native-windows/Libraries/Core/setUpReactRefresh.js": Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
! [07:01:05.417Z][LoggerPlugin] Warning in "./node_modules/react-native-windows/Libraries/Performance/Systrace.js": Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
i [07:01:05.687Z][DevServer@windows] GET 200 /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
i [07:01:05.693Z][DevServerProxy] GET 200 /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
? [07:01:05.954Z][DevServerProxy] Fetching from worker {
url: 'http://localhost:57474/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true',
method: 'GET',
body: null
}
i [07:01:05.971Z][webpack-dev-middleware] wait until bundle finished: /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
i [07:01:06.405Z][LoggerPlugin] Bundle built with warnings { time: 221 }
! [07:01:06.405Z][LoggerPlugin] Warning in "./node_modules/react-native-windows/Libraries/Core/setUpReactRefresh.js": Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
! [07:01:06.405Z][LoggerPlugin] Warning in "./node_modules/react-native-windows/Libraries/Performance/Systrace.js": Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
i [07:01:06.477Z][DevServerProxy] GET 200 /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
i [07:01:06.469Z][DevServer@windows] GET 200 /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
i [07:01:06.716Z][DevServer@windows] HMR client connected { clientId: 'client#0' }
? [07:01:06.870Z][DevServerProxy] Fetching from worker {
url: 'http://localhost:57474/assets/node_modules/react-native-windows/Libraries/NewAppScreen/components/logo.png?platform=windows&hash=50badac959683344bb921c511901588c',
method: 'GET',
body: null
}
i [07:01:06.876Z][DevServerProxy] GET 200 /assets/node_modules/react-native-windows/Libraries/NewAppScreen/components/logo.png?platform=windows&hash=50badac959683344bb921c511901588c
i [07:01:06.874Z][DevServer@windows] GET 200 /assets/node_modules/react-native-windows/Libraries/NewAppScreen/components/logo.png?platform=windows&hash=50badac959683344bb921c511901588c
i [07:01:31.293Z][DevServerProxy] React Native app disconnected from debugger
i [07:01:31.295Z][DevServer@windows] HMR client disconnected { clientId: 'client#0' }
i [07:01:31.304Z][DevServerProxy] GET 200 /launch-js-devtools
i [07:01:31.306Z][DevServerProxy] React Native app connected to debugger
i [07:01:31.315Z][DevServerProxy] GET 304 /debugger-ui/static/js/debuggerWorker.273ef27e.worker.js
? [07:01:31.425Z][DevServerProxy] Fetching from worker {
url: 'http://localhost:57474/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true',
method: 'GET',
body: null
}
i [07:01:31.440Z][DevServerProxy] GET 200 /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
i [07:01:31.436Z][DevServer@windows] GET 200 /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
? [07:01:31.671Z][DevServerProxy] Fetching from worker {
url: 'http://localhost:57474/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true',
method: 'GET',
body: null
}
i [07:01:31.688Z][DevServerProxy] GET 200 /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
i [07:01:31.682Z][DevServer@windows] GET 200 /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
i [07:01:31.900Z][DevServer@windows] HMR client connected { clientId: 'client#1' }
? [07:01:32.022Z][DevServerProxy] Fetching from worker {
url: 'http://localhost:57474/assets/node_modules/react-native-windows/Libraries/NewAppScreen/components/logo.png?platform=windows&hash=50badac959683344bb921c511901588c',
method: 'GET',
body: null
}
i [07:01:32.027Z][DevServerProxy] GET 200 /assets/node_modules/react-native-windows/Libraries/NewAppScreen/components/logo.png?platform=windows&hash=50badac959683344bb921c511901588c
i [07:01:32.026Z][DevServer@windows] GET 200 /assets/node_modules/react-native-windows/Libraries/NewAppScreen/components/logo.png?platform=windows&hash=50badac959683344bb921c511901588c
⠸ Running...events.js:292
    throw er; // Unhandled 'error' event
    ^

Error: read ECONNRESET
  at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
Emitted 'error' event on Socket instance at:
  at emitErrorNT (internal/streams/destroy.js:106:8)
  at emitErrorCloseNT (internal/streams/destroy.js:74:3)
  at processTicksAndRejections (internal/process/task_queues.js:80:21) {
errno: -4077,
code: 'ECONNRESET',
syscall: 'read'
}

And yes, the issue happens on any port, including the default 8081.

[zamotany]

I'm investigating this issue but it's difficult to find why the error is thrown. For now it looks like something from outside is closing a socket, but I haven't figured out which socket is that - socket for HTTP or WS.

[max-pv]

@zamotany thanks! If there is anything I can do, I would be happy to help. I wanted to add that I reproduced this issue on another computer as well, so it seems to be environment independent.

[zamotany]

So this issue happens also on vnext and just before getting the error, while debugging, the RNW app throws exception from WebSocket, which in turn closes the socket and causes ECONNRESET error in webpack-start. So to fix the issue it's important to figure out why the exception happens in RNW app.

[max-pv]

@zamotany could you please provide guidance on how to get the same exception? I'm trying to run the app from Visual Studio with the debugger attached, and I don't see any errors being thrown.

Also, would it be possible to handle this error on the side of react-native-webpack-toolkit, or is it a kind of error that is actually fatal and the connection between the RNW app and Webpack can not be restored/maintained?

[zamotany]

I need to identify which connection this is, so it's hard for me to tell if it's actually fatal or if we can handle it.
As for how I got the error:

1. I've created a new project using these steps: https://microsoft.github.io/react-native-windows/docs/getting-started
2. Run the app with VS2019
3. Waited for tens of seconds and it stopped on the exception

I've did all the steps inside VirtualBox VM with Windows 10 Eval VM from https://developer.microsoft.com/en-us/windows/downloads/virtual-machines/

[max-pv]

Understood. Please let me know if I can be of any help with this.

[zamotany]

You can try commenting out those lines:

• https://github.com/callstack/react-native-webpack-toolkit/blob/main/src/server/BaseDevServer.ts#L60-L65
• https://github.com/callstack/react-native-webpack-toolkit/blob/main/src/server/DevServer.ts#L72-L74

and then try if it crashes.

You can try cloning the repo, and building it with the lines commented out but it's quicker to just go into node_modules/react-native-webpack-toolkit/dist and find the corresponding code and then comment out that code.

This should remove all WebSocket servers from being run with development server. This way we can get closer to identifying which WS connection is causing the problem.

[max-pv]

I tried doing that, and at first the server responses with 500 (the app gets stuck on "Loading bundle..."), and after some time it crashed anyway:

PS C:\Users\max\Code\exp643> npx react-native webpack-start --verbose
i [14:34:16.877Z][DevServerProxy] Server listening at http://[::]:8081
i [14:34:20.067Z][DevServerProxy] GET 500 /launch-js-devtools
⠙ Running...events.js:186
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:183:27)
Emitted 'error' event on Socket instance at:
    at emitErrorNT (internal/streams/destroy.js:91:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
    at processTicksAndRejections (internal/process/task_queues.js:77:11) {
  errno: 'ECONNRESET',
  code: 'ECONNRESET',
  syscall: 'read'
}

[zamotany]

@br4in3x I forgot to mention, you also need to set this flag to false:
https://github.com/br4in3x/rnw-rnwt-problem/blob/master/windows/exp643/App.xaml.cs#L18

[max-pv]

Okay, that fixed the 500 error, I can see the app. The result is the same, unfortunately. Webpack crashes after about a minute. Here's the log:

npx react-native webpack-start --verbose

PS C:\Users\max\Code\exp643> npx react-native webpack-start --verbose
i [16:31:14.368Z][DevServerProxy] Server listening at http://[::]:8081
i [16:31:32.538Z][DevServerProxy] Starting compiler worker { platform: 'windows', port: 53768 }
? [16:31:32.541Z][DevServerProxy] Compiler worker settings {
  env: {
    RNWT_CLI_OPTIONS: '{"config":{"root":"C:\\\\Users\\\\max\\\\Code\\\\exp643","reactNativePath":"C:\\\\Users\\\\max\\\\Code\\\\exp643\\\\node_modules\\\\react-native","webpackConfigPath":"C:\\\\Users\\\\max\\\\Code\\\\exp643\\\\webpack.config.js"},"command":"start","arguments":{"start":{"port":53768,"host":"","interactive":true,"platform":"windows"}}}',
    RNWT_WORKER: '1',
    RNWT_VERBOSE: '1'
  }
}
i [16:31:33.920Z][DevServer@windows] Server listening at http://[::]:53768
? [16:31:33.924Z][DevServerProxy] Fetching from worker {
  url: 'http://localhost:53768/index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true',
  method: 'GET',
  body: null
}
i [16:31:33.966Z][webpack-dev-middleware] wait until bundle finished: /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
? [16:31:46.409Z][ReactNativeAssetResolver] Processing asset: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\NewAppScreen\components\logo.png
? [16:31:46.417Z][ReactNativeAssetResolver] Asset resolved: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\NewAppScreen\components\logo.png -> C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\NewAppScreen\components\logo.png
? [16:31:50.526Z][reactNativeAssetsLoader] Processing: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\NewAppScreen\components\logo.png
? [16:31:50.531Z][reactNativeAssetsLoader] Asset emitted: assets\node_modules\react-native-windows\Libraries\NewAppScreen\components\logo.png
? [16:31:50.653Z][reactNativeAssetsLoader] Asset processed: {
  resourcePath: 'C:\\Users\\max\\Code\\exp643\\node_modules\\react-native-windows\\Libraries\\NewAppScreen\\components\\logo.png',
  platform: 'windows',
  context: 'C:\\Users\\max\\Code\\exp643',
  relativeDirname: 'node_modules\\react-native-windows\\Libraries\\NewAppScreen\\components',
  type: 'png',
  assetsPath: 'assets',
  outputPath: 'C:\\Users\\max\\Code\\exp643\\dist',
  filename: 'logo',
  normalizedName: 'node_modules_reactnativewindows_libraries_newappscreen_components_logo.png',
  scales: { '@1x': { name: 'logo.png' } },
  assets: [
    'assets\\node_modules\\react-native-windows\\Libraries\\NewAppScreen\\components\\logo.png'
  ],
  publicPath: 'assets/node_modules/react-native-windows/Libraries/NewAppScreen/components',
  width: 512,
  height: 512
}
? [16:31:51.189Z][ReactNativeAssetResolver] Processing asset: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\close.png
? [16:31:51.285Z][ReactNativeAssetResolver] Asset resolved: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\close.png -> C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\close.png
? [16:31:53.598Z][ReactNativeAssetResolver] Processing asset: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-left.png
? [16:31:53.598Z][ReactNativeAssetResolver] Processing asset: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-right.png
? [16:31:53.598Z][ReactNativeAssetResolver] Asset resolved: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-left.png -> C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-left.png
? [16:31:53.598Z][ReactNativeAssetResolver] Asset resolved: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-right.png -> C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-right.png
? [16:31:53.602Z][reactNativeAssetsLoader] Processing: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\close.png
? [16:31:53.602Z][reactNativeAssetsLoader] Asset emitted: assets\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\close.png
? [16:31:53.609Z][reactNativeAssetsLoader] Asset processed: {
  resourcePath: 'C:\\Users\\max\\Code\\exp643\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\close.png',
  platform: 'windows',
  context: 'C:\\Users\\max\\Code\\exp643',
  relativeDirname: 'node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages',
  type: 'png',
  assetsPath: 'assets',
  outputPath: 'C:\\Users\\max\\Code\\exp643\\dist',
  filename: 'close',
  normalizedName: 'node_modules_reactnativewindows_libraries_logbox_ui_logboximages_close.png',
  scales: { '@1x': { name: 'close.png' } },
  assets: [
    'assets\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\close.png'
  ],
  publicPath: 'assets/node_modules/react-native-windows/Libraries/LogBox/UI/LogBoxImages',
  width: 28,
  height: 28
}
? [16:31:53.639Z][reactNativeAssetsLoader] Processing: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-right.png
? [16:31:53.639Z][reactNativeAssetsLoader] Asset emitted: assets\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-right.png
? [16:31:53.648Z][reactNativeAssetsLoader] Processing: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-left.png
? [16:31:53.649Z][reactNativeAssetsLoader] Asset emitted: assets\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\chevron-left.png
? [16:31:53.655Z][reactNativeAssetsLoader] Asset processed: {
  resourcePath: 'C:\\Users\\max\\Code\\exp643\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\chevron-right.png',
  platform: 'windows',
  context: 'C:\\Users\\max\\Code\\exp643',
  relativeDirname: 'node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages',
  type: 'png',
  assetsPath: 'assets',
  outputPath: 'C:\\Users\\max\\Code\\exp643\\dist',
  filename: 'chevron-right',
  normalizedName: 'node_modules_reactnativewindows_libraries_logbox_ui_logboximages_chevronright.png',
  scales: { '@1x': { name: 'chevron-right.png' } },
  assets: [
    'assets\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\chevron-right.png'
  ],
  publicPath: 'assets/node_modules/react-native-windows/Libraries/LogBox/UI/LogBoxImages',
  width: 16,
  height: 28
}
? [16:31:53.656Z][reactNativeAssetsLoader] Asset processed: {
  resourcePath: 'C:\\Users\\max\\Code\\exp643\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\chevron-left.png',
  platform: 'windows',
  context: 'C:\\Users\\max\\Code\\exp643',
  relativeDirname: 'node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages',
  type: 'png',
  assetsPath: 'assets',
  outputPath: 'C:\\Users\\max\\Code\\exp643\\dist',
  filename: 'chevron-left',
  normalizedName: 'node_modules_reactnativewindows_libraries_logbox_ui_logboximages_chevronleft.png',
  scales: { '@1x': { name: 'chevron-left.png' } },
  assets: [
    'assets\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\chevron-left.png'
  ],
  publicPath: 'assets/node_modules/react-native-windows/Libraries/LogBox/UI/LogBoxImages',
  width: 16,
  height: 28
}
? [16:31:54.208Z][ReactNativeAssetResolver] Processing asset: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\alert-triangle.png
? [16:31:54.208Z][ReactNativeAssetResolver] Processing asset: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\loader.png
? [16:31:54.208Z][ReactNativeAssetResolver] Asset resolved: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\alert-triangle.png -> C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\alert-triangle.png
? [16:31:54.208Z][ReactNativeAssetResolver] Asset resolved: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\loader.png -> C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\loader.png
? [16:31:54.217Z][reactNativeAssetsLoader] Processing: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\alert-triangle.png
? [16:31:54.217Z][reactNativeAssetsLoader] Asset emitted: assets\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\alert-triangle.png
? [16:31:54.220Z][reactNativeAssetsLoader] Processing: C:\Users\max\Code\exp643\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\loader.png
? [16:31:54.220Z][reactNativeAssetsLoader] Asset emitted: assets\node_modules\react-native-windows\Libraries\LogBox\UI\LogBoxImages\loader.png
? [16:31:54.223Z][reactNativeAssetsLoader] Asset processed: {
  resourcePath: 'C:\\Users\\max\\Code\\exp643\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\alert-triangle.png',
  platform: 'windows',
  context: 'C:\\Users\\max\\Code\\exp643',
  relativeDirname: 'node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages',
  type: 'png',
  assetsPath: 'assets',
  outputPath: 'C:\\Users\\max\\Code\\exp643\\dist',
  filename: 'alert-triangle',
  normalizedName: 'node_modules_reactnativewindows_libraries_logbox_ui_logboximages_alerttriangle.png',
  scales: { '@1x': { name: 'alert-triangle.png' } },
  assets: [
    'assets\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\alert-triangle.png'
  ],
  publicPath: 'assets/node_modules/react-native-windows/Libraries/LogBox/UI/LogBoxImages',
  width: 48,
  height: 42
}
? [16:31:54.224Z][reactNativeAssetsLoader] Asset processed: {
  resourcePath: 'C:\\Users\\max\\Code\\exp643\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\loader.png',
  platform: 'windows',
  context: 'C:\\Users\\max\\Code\\exp643',
  relativeDirname: 'node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages',
  type: 'png',
  assetsPath: 'assets',
  outputPath: 'C:\\Users\\max\\Code\\exp643\\dist',
  filename: 'loader',
  normalizedName: 'node_modules_reactnativewindows_libraries_logbox_ui_logboximages_loader.png',
  scales: { '@1x': { name: 'loader.png' } },
  assets: [
    'assets\\node_modules\\react-native-windows\\Libraries\\LogBox\\UI\\LogBoxImages\\loader.png'
  ],
  publicPath: 'assets/node_modules/react-native-windows/Libraries/LogBox/UI/LogBoxImages',
  width: 44,
  height: 44
}
i [16:32:02.880Z][LoggerPlugin] Bundle built with warnings { time: 28796 }
! [16:32:02.880Z][LoggerPlugin] Warning in "./node_modules/react-native-windows/Libraries/Core/setUpReactRefresh.js": Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
! [16:32:02.880Z][LoggerPlugin] Warning in "./node_modules/react-native-windows/Libraries/Performance/Systrace.js": Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
i [16:32:03.085Z][DevServer@windows] GET 200 /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
i [16:32:03.093Z][DevServerProxy] GET 200 /index.bundle?platform=windows&dev=true&hot=false&inlineSourceMap=true
? [16:32:03.782Z][DevServerProxy] Fetching from worker {
  url: 'http://localhost:53768/assets/node_modules/react-native-windows/Libraries/NewAppScreen/components/logo.png?platform=windows&hash=50badac959683344bb921c511901588c',
  method: 'GET',
  body: null
}
i [16:32:03.797Z][DevServerProxy] GET 200 /assets/node_modules/react-native-windows/Libraries/NewAppScreen/components/logo.png?platform=windows&hash=50badac959683344bb921c511901588c
i [16:32:03.795Z][DevServer@windows] GET 200 /assets/node_modules/react-native-windows/Libraries/NewAppScreen/components/logo.png?platform=windows&hash=50badac959683344bb921c511901588c
⠙ Running...events.js:186
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:183:27)
Emitted 'error' event on Socket instance at:
    at emitErrorNT (internal/streams/destroy.js:91:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
    at processTicksAndRejections (internal/process/task_queues.js:77:11) {
  errno: 'ECONNRESET',
  code: 'ECONNRESET',
  syscall: 'read'
}

[zamotany]

I think I know what the issues is. This code is not working correctly: https://github.com/callstack/react-native-webpack-toolkit/blob/main/src/server/ws/WebSocketServer.ts#L66-L67
Once I change it, I'll publish a new next release and ask if that fixes the issue with the crash.

[zamotany]

@br4in3x Can you try react-native-webpack-toolkit@next in your project? I've tested fresh one (from vnext) and it seems to work just fine, no crashes and the HMR/React Refresh works fine. I've tested it with the Remote JS debugger disabled - https://github.com/br4in3x/rnw-rnwt-problem/blob/master/windows/exp643/App.xaml.cs#L18 set to false