React Native Windows: Unhandled 'error' event

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]

@br4in3x Yeah the Remote JS debugger was disabled for debugging purposes. It is possible to get the JS logs inside terminal without Remote JS debugger, but it’s a bit of a work - I suspect this logic is not working when using React Native Windows: https://github.com/callstack/react-native-webpack-toolkit/blob/main/src/webpack/plugins/ReactNativeTarget/ReactNativeTargetPlugin.ts#L25-L28 But for the logs in terminal from RNW app I suggest to open a new issue.

As for the HMR/React Refresh error, please open a separate issue and close this one. I’ll do some investigation in the meantime, but as you noted, something weird is happening - it should not destroy and then reconnect the HMR client. What’s even more interesting is that this functionality works on a fresh project.

[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