NativeScript / NativeScript/nativescript-cli

NativeScript Preview now fails to launch React NativeScript apps; may not be reading Webpack config.

Aperta
#5,295 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

bug preview
Lingua principale
JavaScript
Stelle
1.1k
Fork
204
Merge medio
1g 9h
PR unite (30g)
8

Descrizione

Environment

✔ Component nativescript has 6.5.0 version and is up to date.
✔ Component tns-core-modules has 6.5.1 version and is up to date.
✔ Component tns-android has 6.5.0 version and is up to date.
✔ Component tns-ios has 6.5.0 version and is up to date.

I'm using NativeScript Playground v1.8.0 and NativeScript Preview 1.30.0, which both support NativeScript 6.5.0.

This is the latest React NativeScript template (tns-template-blank-react@6.5.0), which uses NativeScript Core 6.5.0.

Describe the bug

NativeScript Preview fails to launch a freshly initialised React NativeScript app, giving the runtime error:

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

To Reproduce

# I tested this with v6.5.0 of tns-template-blank-react.
tns create rns-sanity-test --template tns-template-blank-react
cd rns-sanity-test
tns preview

Note that, by contrast, tns run ios --emulator runs this same project absolutely fine.

Expected behavior

Project should startup fine without crashing.

Sample project

Just the React NativeScript starter template, tns-template-blank-react.

Additional context

As noted above, tns run ios still works fine.

tns preview did used to work. I believe this error may have been introduced since NativeScript version 6.4.0, which introduces support for custom Webpack configs.

The error of JS ERROR ReferenceError: Can't find variable: process is entirely due to this line in my react-nativescript.webpack.config.js file being ignored (somehow) by Preview:

"process.env.NODE_ENV": JSON.stringify(production ? "production" : "development"),

react-hot-loader/index.js is trying to reference process.env.NODE_ENV, but evidently my Webpack DefinePlugin hasn't been run by Preview. I suspect that Preview is either altering the order/content of the Webpack plugins, or ignoring my react-nativescript.webpack.config.js file completely.

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Riproduci il problema con il template React NativeScript usando tns create ... e tns preview, quindi confrontalo con tns run ios --emulator. Inizia tracciando il modo in cui Preview gestisce react-nativescript.webpack.config.js, in particolare la voce di DefinePlugin per process.env.NODE_ENV; esamina react-hot-loader/index.js alla ricerca del riferimento che causa il fallimento. Il lavoro è completato quando l’app avviata da Preview si avvia senza l’errore process.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, webpack
Ambito
cli, mobile-dev
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.