Error from react-hot-reload when creating react-nativescript

[rizrmd]

LOG from device Riz: 2020-03-17 06:07:54.795 nsplaydev[2936:806932] ***** Fatal JavaScript exception - application has been terminated. *****
2020-03-17 06:07:54.795 nsplaydev[2936:806932] Native stack trace:
1   0x10167e970 NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x1016c8f58 -[TNSRuntime executeModule:referredBy:]
3   0x10298e25c -[UIApplication(PlayLiveSync) swizzled_executeModule:]
4   0x100ed3524
5   0x18c3a4e18 <redacted>
2020-03-17 06:07:54.796 nsplaydev[2936:806932] JavaScript stack trace:
2020-03-17 06:07:54.796 nsplaydev[2936:806932] anonymous(file:///app/tns_modules/react-hot-loader/index.js:3:12)
at evaluate([native code])
at moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])
at require([native code])
at react-hot-loader(file:///app/bundle.js:314:25)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at file:///app/bundle.js:87:93
at ./app.ts(file:///app/bundle.js:172:34)
at __webpack_require__(file:///app/runtime.js:751:34)
at checkDeferredModules(file:///app/runtime.js:44:42)
at webpackJsonpCallback(file:///app/runtime.js:31:39)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])

When I remove react-hot-reload, everything works as expected. But no hot-reload, so this is a deal breaker...

[shirakaba]

@rizkyramadhan What does your app.ts and AppContainer.tsx look like?

[rizrmd]

Sorry, I just visited this issue since its burried under dozen of my github notification.

I am currently on the phone, will give you the my file when I got access to my laptop.

[shirakaba]

Think I may have just reproduced this – although it may be something different. It was probably introduced in NativeScript 6.4.0, when the Webpack configuration changed. I'm looking into it now.

LOG from device Jamie Birch's iPhone: 2020-04-11 20:43:54.309 nsplaydev[285:7987] ***** Fatal JavaScript exception - application has been terminated. *****
2020-04-11 20:43:54.309 nsplaydev[285:7987] Native stack trace:
1   0x103b4e928 NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x103b99058 -[TNSRuntime executeModule:referredBy:]
3   0x10391e25c -[UIApplication(PlayLiveSync) swizzled_executeModule:]
4   0x102fdf524
5   0x1975dce18 <redacted>
2020-04-11 20:43:54.310 nsplaydev[285:7987] JavaScript stack trace:
2020-04-11 20:43:54.310 nsplaydev[285:7987] anonymous(file:///app/tns_modules/react-hot-loader/index.js:3:12)
at evaluate([native code])
at moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])
at require([native code])
at react-hot-loader(file:///app/bundle.js:314:25)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at file:///app/bundle.js:87:93
at ./app.ts(file:///app/bundle.js:172:34)
at __webpack_require__(file:///app/runtime.js:751:34)
at checkDeferredModules(file:///app/runtime.js:44:42)
at webpackJsonpCallback(file:///app/runtime.js:31:39)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])
2020-04-11 20:43:54.310 nsplaydev[285:7987] JavaScript error:
file:///app/tns_modules/react-hot-loader/index.js:3:12: JS ERROR ReferenceError: Can't find variable: process
2020-04-11 20:43:54.311 nsplaydev[285:7987] PlayLiveSync: Uncaught Exception
2020-04-11 20:43:54.311 nsplaydev[285:7987] *** JavaScript call stack:
(

)
2020-04-11 20:43:54.311 nsplaydev[285:7987] *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: ReferenceError: Can't find variable: process
 at 
anonymous(file:///app/tns_modules/react-hot-loader/index.js:3:12)
at evaluate([native code])
at moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])
at require([native code])
at react-hot-loader(file:///app/bundle.js:314:25)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at file:///app/bundle.js:87:93
at ./app.ts(file:///app/bundle.js:172:34)
at __webpack_require__(file:///app/runtime.js:751:34)
at checkDeferredModules(file:///app/runtime.js:44:42)
at webpackJsonpCallback(file:///app/runtime.js:31:39)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])
', reason: '(null)'
*** First throw call stack:
(0x1977e896c 0x197501028 0x103b4ee00 0x103b99058 0x10391e25c 0x102fdf524 0x1975dce18)
libc++abi.dylib: terminating with uncaught exception of type NSException
2020-04-11 20:43:54.311 nsplaydev[285:7987] PlayLiveSync: Uncaught Exception

[shirakaba]

If it's the same issue I'm facing, then it's a bug in NativeScript Preview, which I'm tracking in: https://github.com/NativeScript/nativescript-cli/issues/5295

But if not, then I'm not sure – your stack trace doesn't tell me what exactly might have been the cause. More details needed.

[shirakaba]

As of v1, React NativeScript now uses React Fast Refresh rather than React Hot Loader.