Support NativeScript 8

[shirakaba]

I've so far updated RNS itself to support NativeScript v8 (that's [email protected] for anyone interested), but it means nothing until I've also updated the RNS Webpack config to support Webpack v5. After that, I'll need to make React plugins for Tabs and BottomNavigation and update RNS Navigation correspondingly. Finally, I'll need to update the RNS app template. I may need to update the RNS docs, too.

The immediate hurdle is the Webpack config.

@rigor789 I'm getting this error when supplying this webpack.config.js which is just the JS equivalent of your configuration.react.ts:

$ tns run ios --emulator
Searching for devices...

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*                                                                                                           *
*  The platforms/ios folder appears to be invalid. If the build fails, run 'ns clean' and rebuild the app.  *
*                                                                                                           *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


Preparing project...
typeof configs.base: function
[@nativescript/webpack] Warn: 
 You need to provide a target platform!

Available platforms: android, ios

Use --env.platform=<platform> or --env.android, --env.ios to specify the target platform.

Defaulting to "ios".
TypeError: config.mode is not a function
    at Object.default_1 [as base] (/Users/jamie/Documents/git/react-nativescript/sample/node_modules/@nativescript/webpack/dist/configuration/base.js:28:12)
    at module.exports (/Users/jamie/Documents/git/react-nativescript/sample/webpack.config.js:13:10)
    at Command.<anonymous> (/Users/jamie/Documents/git/react-nativescript/sample/node_modules/@nativescript/webpack/dist/bin/index.js:60:44)
    at Command.listener [as _actionHandler] (/Users/jamie/Documents/git/react-nativescript/sample/node_modules/commander/index.js:922:31)
    at Command._parseCommand (/Users/jamie/Documents/git/react-nativescript/sample/node_modules/commander/index.js:1503:14)
    at Command._dispatchSubcommand (/Users/jamie/Documents/git/react-nativescript/sample/node_modules/commander/index.js:1443:18)
    at Command._parseCommand (/Users/jamie/Documents/git/react-nativescript/sample/node_modules/commander/index.js:1460:12)
    at Command.parse (/Users/jamie/Documents/git/react-nativescript/sample/node_modules/commander/index.js:1292:10)
    at Object.<anonymous> (/Users/jamie/Documents/git/react-nativescript/sample/node_modules/@nativescript/webpack/dist/bin/index.js:97:21)
    at Module._compile (internal/modules/cjs/loader.js:1236:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1257:10)
    at Module.load (internal/modules/cjs/loader.js:1085:32)
    at Function.Module._load (internal/modules/cjs/loader.js:950:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47
No configuration!
Executing webpack failed with exit code 0.

I also looks like the Webpack API has possibly changed from webpack.init(env) to configs.base(config, env) since you wrote the docs.

[rigor789]

The webpack.config.js should really only contain the following (the flavor detection is automatically done, but can be specified explicitly with webpack.useConfig('react')):

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
  webpack.init(env);

  return webpack.resolveConfig();
};

Just make sure to have @nativescript/webpack@beta installed!

Everything else is handled internally inside @nativescript/webpack. The react config has been implemented here: https://github.com/NativeScript/NativeScript/blob/feat/webpack5/packages/webpack5/src/configuration/react.ts

This is an "internal" implementation detail - meaning that if we need to make adjustments we should do them there. User-end adjustments may be done in the webpack.config.js itself using the chainWebpack api (https://docs.nativescript.org/webpack.html)

We have updated the template to use ns8 & webpack5 - https://github.com/NativeScript/nativescript-app-templates/tree/master/packages/template-blank-react you can use that to test your changes (removal of bottom-nav, tabs etc.).

[shirakaba]

I see, so the user inherits that React config and can make additional changes if they wish. I'll use your provided code snippet.

(It runs!)

Something's indeed up with HMR, though (as you've mentioned). I'll take some notes of what I've seen:

$ tns run ios --emulator
Searching for devices...
Preparing project...
webpack is watching the files...
assets by path images/RNTester_Thumbnails/*.png 77.2 KiB 12 assets
assets by path *.js 8.27 MiB
  asset vendor.js 7.77 MiB [compared for emit] (name: vendor) (id hint: defaultVendor)
  asset bundle.js 512 KiB [emitted] [compared for emit] (name: bundle)
asset tns_modules/inspector_modules.js 94.6 KiB [emitted] [compared for emit] (name: tns_modules/inspector_modules)
Entrypoint bundle 8.27 MiB = vendor.js 7.77 MiB bundle.js 512 KiB
Entrypoint tns_modules/inspector_modules 7.86 MiB = vendor.js 7.77 MiB tns_modules/inspector_modules.js 94.6 KiB
runtime modules 53.2 KiB 30 modules
orphan modules 356 bytes [orphan] 6 modules
modules by path ./node_modules/ 2.37 MiB 303 modules
modules by path ../react-nativescript/ 769 KiB
  modules by path ../react-nativescript/dist/ 153 KiB 17 modules
  modules by path ../react-nativescript/node_modules/ 615 KiB 9 modules
  ../react-nativescript/package.json 1.21 KiB [built] [code generated]
modules by path ./app/ 25.5 KiB
  modules by path ./app/testComponents/*.tsx 17.6 KiB
    ./app/testComponents/AppContainer.tsx 3.14 KiB [built] [code generated]
    ./app/testComponents/stateful.tsx 14.5 KiB [built] [code generated]
  ./app/app.ts 6.45 KiB [built] [code generated]
  ./app/app.css 1.38 KiB [built] [code generated]
external "~/package.json" 42 bytes [optional] [built] [code generated]
webpack 5.31.2 compiled successfully in 19512 ms
Webpack compilation complete. Watching for file changes.
Issues checking in progress...
Updating runtime package.json with configuration values...
Project successfully prepared (ios)
File change detected. Starting incremental webpack compilation...
Successfully transferred all files on device 06F938F4-AFB2-41AF-96A7-22C79811241D.
Restarting application on device 06F938F4-AFB2-41AF-96A7-22C79811241D...
CONSOLE LOG: Loading inspector modules...
CONSOLE LOG: Finished loading inspector modules.
CONSOLE LOG: [ReactNativeScript.ts] start(). hasLaunched(): false existing rootView was: undefined []
CONSOLE LOG: [appendChildToContainer()] deferring to appendChild(): NSVRoot:null > NSVElement:StackLayout(6) []
CONSOLE LOG: Container updated! []
NativeScript debugger has opened inspector socket on port 18183 for uk.co.birchlabs.rnssample.
Successfully synced application uk.co.birchlabs.rnssample on device 06F938F4-AFB2-41AF-96A7-22C79811241D.



// Save a change to a component. No change is rendered by the app at all.
// No reaction from the CLI whatsoever. But 2m45s later, I got this stream of messages:

assets by status 8.44 MiB [cached] 15 assets
Entrypoint bundle 8.27 MiB = vendor.js 7.77 MiB bundle.js 512 KiB
Entrypoint tns_modules/inspector_modules 7.86 MiB = vendor.js 7.77 MiB tns_modules/inspector_modules.js 94.6 KiB
cached modules 3.14 MiB (javascript) 53.2 KiB (runtime) [cached] 403 modules
webpack 5.31.2 compiled successfully in 165367 ms
Webpack compilation complete. Watching for file changes.
No issues found.
File change detected. Starting incremental webpack compilation...
assets by status 7.85 MiB [cached] 13 assets
assets by path . 614 KiB
  assets by info 7.11 KiB [immutable]
    assets by path *.json 83 bytes
      asset tns_modules_inspector_modules.3d5ce0a43e1c7d5b8992.hot-update.json 53 bytes [emitted] [immutable] [hmr]
      asset bundle.3d5ce0a43e1c7d5b8992.hot-update.json 30 bytes [emitted] [immutable] [hmr]
    asset bundle.3d5ce0a43e1c7d5b8992.hot-update.js 6.23 KiB [emitted] [immutable] [hmr] (name: bundle)
    asset tns_modules/inspector_modules.3d5ce0a43e1c7d5b8992.hot-update.js 821 bytes [emitted] [immutable] [hmr] (name: tns_modules/inspector_modules)
  asset bundle.js 512 KiB [emitted] (name: bundle)
  asset tns_modules/inspector_modules.js 94.6 KiB [emitted] (name: tns_modules/inspector_modules)
Entrypoint bundle 8.28 MiB = vendor.js 7.77 MiB bundle.js 512 KiB bundle.3d5ce0a43e1c7d5b8992.hot-update.js 6.23 KiB
Entrypoint tns_modules/inspector_modules 7.86 MiB = vendor.js 7.77 MiB tns_modules/inspector_modules.js 94.6 KiB tns_modules/inspector_modules.3d5ce0a43e1c7d5b8992.hot-update.js 821 bytes
cached modules 3.13 MiB [cached] 371 modules
runtime modules 53.2 KiB 30 modules
javascript modules 9.67 KiB
  ./app/app.ts 6.45 KiB [built]
  ./app/testComponents/AppContainer.tsx 3.22 KiB [built] [code generated]
webpack 5.31.2 compiled successfully in 1735 ms
Webpack compilation complete. Watching for file changes.
Issues checking in progress...
No issues found.
Successfully transferred bundle.js on device 06F938F4-AFB2-41AF-96A7-22C79811241D.
Successfully transferred inspector_modules.js on device 06F938F4-AFB2-41AF-96A7-22C79811241D.
Successfully transferred bundle.3d5ce0a43e1c7d5b8992.hot-update.js on device 06F938F4-AFB2-41AF-96A7-22C79811241D.
Successfully transferred bundle.3d5ce0a43e1c7d5b8992.hot-update.json on device 06F938F4-AFB2-41AF-96A7-22C79811241D.
Successfully transferred tns_modules_inspector_modules.3d5ce0a43e1c7d5b8992.hot-update.json on device 06F938F4-AFB2-41AF-96A7-22C79811241D.
Successfully transferred inspector_modules.3d5ce0a43e1c7d5b8992.hot-update.js on device 06F938F4-AFB2-41AF-96A7-22C79811241D.
Refreshing application on device 06F938F4-AFB2-41AF-96A7-22C79811241D...
CONSOLE LOG: [HMR][3d5ce0a43e1c7d5b8992] success | Successfully applied update.
CONSOLE LOG: Container updated! []
Successfully synced application uk.co.birchlabs.rnssample on device 06F938F4-AFB2-41AF-96A7-22C79811241D.

// Despite these messages appearing, the code change I'd saved wasn't rendered.

Apart from there being far more lines of logs spewed out than there were back when HMR was working, this Container updated! [] log catches my eye. It implies that the hot update is not getting accepted by the React component, and is instead bubbling all the way up to app.ts (the entrypoint file), and the startup function for the app is running all over again.

What's really curious is that we didn't see the message [ReactNativeScript.ts] start() called again - hot reload, so shall no-op appear in the console logs:

react-nativescript/react-nativescript/src/index.ts

Lines 259 to 276 in 6f1d8ec

	export function start(app: ReactReconciler.ReactNodeList): void {
	const existingRootView: View | undefined = getRootView();
	const _hasLaunched: boolean = hasLaunched();
	console.log(
	`[ReactNativeScript.ts] start(). hasLaunched(): ${_hasLaunched} existing rootView was: ${existingRootView}`
	);
	if (_hasLaunched || existingRootView) {
	console.log(`[ReactNativeScript.ts] start() called again - hot reload, so shall no-op`);
	/* As typings say, indeed reloadPage() doesn't exist. Maybe it's just a Vue thing. */
	// if(existingRootView instanceof Frame){
	// console.log(`[renderIntoRootView] hot reload: calling reloadPage() on root frame`);
	// if(existingRootView.currentPage){
	// (existingRootView as any).reloadPage();
	// }
	// }
	return;
	}

This implies that the calls for the NativeScript Core Application APIs hasLaunched() and getRootView() both returned falsy values. I don't know how to explain this – it's as if a second NativeScript app altogether is running in some invisible context (which might possibly explain the 2m45s build time), and maybe the hot update was applied to that instead of the visible app. Food for thought.

[JacobFJ]

It is possible to support NS8 in RNS, It seems to sad to say all framework are current support NS8 except RNS.

[shirakaba]

@HakobiDev

I’m using this issue broadly to track regressions since Webpack 4 & NS7, but NS8 itself is supported. Use the latest starter template with ns ios run --no-hmr.

HMR support will come later. Tabs and BottomNavigation are implemented and will be supported when the next release of Material Components comes out, but TabView can be used as a substitute for now.