repack: React Native Windows: Unhandled 'error' event

Environment

npx react-native --version: 5.0.1-alpha.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

Removing node_modules and running yarn
Rebooting the system
Upgrading and downgrading node version
Disabling HMR
Running on a different port (3001)

Reproducible Demo

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

npx react-native init demo --template react-native-template-typescript
cd demo
npx react-native-windows-init --version 0.64.3 --language cs --overwrite
npx react-native run-windows
yarn add -D webpack terser-webpack-plugin babel-loader react-native-webpack-toolkit react-refresh
Copy config from the repro repo into the root of the project
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:

yarn
npx react-native run-windows
npx react-native webpack-start

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 16 (9 by maintainers)

Most upvoted comments

@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 on Apr 29, 2021

@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

zamotany on Apr 27, 2021

You can try commenting out those lines:

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.

zamotany on Apr 22, 2021