"A Frame must be used to navigate to a Page." webpack error

[NickIliev]

From @davecoffin on November 15, 2017 15:51

When trying to start a webpack bundle using npm run start-ios-bundle, the bundling works, but when the application starts it crashes immediately with this: A Frame must be used to navigate to a Page.

Full log:

Project successfully prepared (iOS)
Skipping package build. No changes detected on the native side. This will be fast!
Skipping install.
Starting...
Successfully started on device with identifier '5C0AB6C1-240B-4094-9E83-F3E9213B123D'.
CONSOLE WARN file:///app/vendor.js:16949:14: Objective-C class name "UIDocumentInteractionControllerDelegateImpl" is already in use - using "UIDocumentInteractionControllerDelegateImpl1" instead.
CONSOLE WARN file:///app/vendor.js:55877:14: Objective-C class name "Responder" is already in use - using "Responder1" instead.
CONSOLE WARN file:///app/vendor.js:55885:14: Objective-C class name "Window" is already in use - using "Window1" instead.
CONSOLE WARN file:///app/vendor.js:55907:14: Objective-C class name "NotificationObserver" is already in use - using "NotificationObserver1" instead.
CONSOLE WARN file:///app/vendor.js:106049:14: Objective-C class name "UIGestureRecognizerDelegateImpl" is already in use - using "UIGestureRecognizerDelegateImpl1" instead.
CONSOLE WARN file:///app/vendor.js:106061:14: Objective-C class name "UIGestureRecognizerImpl" is already in use - using "UIGestureRecognizerImpl1" instead.
CONSOLE WARN file:///app/vendor.js:106342:14: Objective-C class name "TouchGestureRecognizer" is already in use - using "TouchGestureRecognizer1" instead.
CONSOLE WARN file:///app/vendor.js:63986:14: Objective-C class name "AnimatedTransitioning" is already in use - using "AnimatedTransitioning1" instead.
CONSOLE WARN file:///app/vendor.js:48365:14: Objective-C class name "TransitionDelegate" is already in use - using "TransitionDelegate1" instead.
CONSOLE WARN file:///app/vendor.js:48404:14: Objective-C class name "UINavigationControllerAnimatedDelegate" is already in use - using "UINavigationControllerAnimatedDelegate1" instead.
CONSOLE WARN file:///app/vendor.js:48436:14: Objective-C class name "UINavigationControllerImpl" is already in use - using "UINavigationControllerImpl1" instead.
CONSOLE WARN file:///app/vendor.js:82465:14: Objective-C class name "TimerTargetImpl" is already in use - using "TimerTargetImpl1" instead.
1   0x10ce62d4b NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
2   0x10d50628e ffi_closure_unix64_inner
3   0x10d506bd2 ffi_closure_unix64
4   0x111b79eda _CFXRegistrationPost
5   0x111b79c22 ___CFXNotificationPost_block_invoke
6   0x111b3b8c2 -[_CFXNotificationRegistrar find:object:observer:enumerator:]
7   0x111b3aa3c _CFXNotificationPost
8   0x10d790852 -[NSNotificationCenter postNotificationName:object:userInfo:]
9   0x10ddcd95c -[UIApplication _callInitializationDelegatesForMainScene:transitionContext:]
10  0x10ddd2afd -[UIApplication _runWithMainScene:transitionContext:completion:]
11  0x10e1982e0 __111-[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:]_block_invoke
12  0x10e56abe0 +[_UICanvas _enqueuePostSettingUpdateTransactionBlock:]
13  0x10e197ed9 -[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:]
14  0x10e198737 -[__UICanvasLifecycleMonitor_Compatability activateEventsOnly:withContext:completion:]
15  0x10eb0cc4d __82-[_UIApplicationCanvas _transitionLifecycleStateWithTransitionContext:completion:]_block_invoke
16  0x10eb0cb06 -[_UIApplicationCanvas _transitionLifecycleStateWithTransitionContext:completion:]
17  0x10e7edd52 __125-[_UICanvasLifecycleSettingsDiffAction performActionsForCanvas:withUpdatedScene:settingsDiff:fromSettings:transitionContext:]_block_invoke
18  0x10e9eaa7e _performActionsWithDelayForTransitionContext
19  0x10e7edb4e -[_UICanvasLifecycleSettingsDiffAction performActionsForCanvas:withUpdatedScene:settingsDiff:fromSettings:transitionContext:]
20  0x10e56a23d -[_UICanvas scene:didUpdateWithDiff:transitionContext:completion:]
21  0x10ddd137e -[UIApplication workspace:didCreateScene:withTransitionContext:completion:]
22  0x10e3a5c1b -[UIApplicationSceneClientAgent scene:didInitializeWithEvent:completion:]
23  0x1162a4158 -[FBSSceneImpl _didCreateWithTransitionContext:completion:]
24  0x1162acc4d __56-[FBSWorkspace client:handleCreateScene:withCompletion:]_block_invoke_2
25  0x11236e2b5 _dispatch_client_callout
26  0x112373565 _dispatch_block_invoke_direct
27  0x1162d8672 __FBSSERIALQUEUE_IS_CALLING_OUT_TO_A_BLOCK__
28  0x1162d8328 -[FBSSerialQueue _performNext]
29  0x1162d8897 -[FBSSerialQueue _performNextFromRunLoopSource]
30  0x111b81231 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__
31  0x111c20e41 __CFRunLoopDoSource0
file:///app/vendor.js:56062:75: JS ERROR Error: A Frame must be used to navigate to a Page.

This may not be related, but when I try to tns run ios i get this error: error TS2307: Cannot find module './app.module.ngfactory'.

Here are the contents of the file, and btw the line importing app.module.ngfactory is red in vscode, it cannot find the module.

/* tslint:disable ordered-imports */
// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScript } from 'nativescript-angular/platform-static';

import { AppModuleNgFactory } from './app.module.ngfactory';

import { enableProdMode } from '@angular/core';

enableProdMode();

platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);

If I comment out the contents of that file, the apps starts fine using tns run ios.

Here is my package.json:

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "com.presonus.mypresonus",
    "tns-android": {
      "version": "3.3.0"
    },
    "tns-ios": {
      "version": "3.3.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.4.1",
    "@angular/common": "4.4.1",
    "@angular/compiler": "4.4.1",
    "@angular/core": "4.4.1",
    "@angular/forms": "4.4.1",
    "@angular/http": "4.4.1",
    "@angular/platform-browser": "4.4.1",
    "@angular/router": "4.4.1",
    "base-64": "^0.1.0",
    "moment": "^2.18.1",
    "nativescript-angular": "~4.4.0",
    "nativescript-background-http": "^3.1.0",
    "nativescript-blur": "^1.0.9",
    "nativescript-imagecropper": "^0.1.1",
    "nativescript-imagepicker": "3.0.7",
    "nativescript-iqkeyboardmanager": "1.1.0",
    "nativescript-native-image-picker": "file:../../../ns-plugins/nativescript-native-image-picker/src",
    "nativescript-orientation": "^2.0.1",
    "nativescript-pdf-view": "2.0.1",
    "nativescript-platform-css": "^1.6.5",
    "nativescript-tasks": "^1.0.8",
    "nativescript-theme-core": "1.0.4",
    "nativescript-videoplayer": "3.1.0",
    "nativescript-youtube-parser": "1.1.0",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.4.2",
    "tns-core-modules": "^3.3.0",
    "zone.js": "0.8.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "4.4.4",
    "@ngtools/webpack": "~1.6.0",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "codelyzer": "3.2.0",
    "copy-webpack-plugin": "~4.0.1",
    "extract-text-webpack-plugin": "~3.0.0",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-typescript": "0.5.0",
    "nativescript-dev-webpack": "^0.8.0",
    "nativescript-worker-loader": "~0.8.1",
    "tns-platform-declarations": "^3.3.0",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.1.0",
    "tslint": "5.7.0",
    "typescript": "2.4.2",
    "webpack": "~3.4.1",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-sources": "~1.0.1"
  },
  "scripts": {
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  }
}

Here is my tscongif.aot.json

{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "noEmitHelpers": true,
      "removeComments": true,
      "noEmitOnError": true,
      "lib": [
        "es2017",
        "dom"
      ],
      "skipLibCheck": true,
      "baseUrl": ".",
      "paths": {
        "*": [
          "./node_modules/tns-core-modules/*",
          "./node_modules/*"
        ]
      }
    },
    "include": [
      "references.d.ts",
      "app/main.ts",
      "app/**/*.module.ts"
    ],
    "files": [
        "./app/main.ts",
        "./app/app.module.ts",
        "./app/login/login.module.ts",
        "./app/articles/articles.module.ts",
        "./app/home/home.module.ts",
        "./app/orders/orders.module.ts",
        "./app/product/product.module.ts",
        "./app/productdocuments/productdocuments.module.ts",
        "./app/productvideos/productvideos.module.ts",
        "./app/sections/sections.module.ts",
        "./app/shop/shop.module.ts",
        "./app/ticket/ticket.module.ts"
    ],
    "angularCompilerOptions": {
      "skipMetadataEmit": true,
      "genDir": "./"
    }
}

Ive added all my lazy loaded modules into the files array based on instruction in @NathanWalker 's book. This ./app/app.module.ts is not lazy loaded, but i thought it might fix the problem related to error TS2307: Cannot find module './app.module.ngfactory'. but it doesnt.

At this point no matter what I try, I keep getting the error "A Frame must be used to navigate to a Page.".

Copied from original issue: NativeScript/NativeScript#5073

[NickIliev]

From @davecoffin on November 15, 2017 19:36

This is where the exception is being thrown:

function createRootView(v) {
    var rootView = v;
    var frame;
    var main;
    if (!rootView) {
        main = mainEntry;
        if (main) {
            frame = new frame_1.Frame();
            frame.navigate(main);
        }
        else {
            throw new Error("A Frame must be used to navigate to a Page.");
        }
        rootView = frame;
    }
    return rootView;
}

thats from platforms/ios/myappname/vendor.js.

I've created a blank project with my EXACT package.json and it bundles and starts fine, so it doesnt appear to be any of my plugins.

[NickIliev]

@davecoffin have you resolved this issue? try bundling the application with the latest NativeScript 3.4.0 as done here.

Closing this one due to inactivity but do let me know if you are still experiencing this issue.

[davecoffin]

It does indeed solve this issue, thanks for checking in and thanks for all your hard work!! ❤️❤️❤️

[GrEg00z]

I still have this issue, for iOS webpack build only (I didn't try on Android)

I've switch from nativescript-webpack 0.8.0 to 0.9.0, and follow explanation to the letter here

But when I run tns run ios --bundle, then I get this error right after app starting : JS ERROR Error: A Frame must be used to navigate to a Page

When I launch tns run ios, it works correctly

tns info :

┌──────────────────┬─────────────────┬────────────────┬──────────────────┐
│ Component        │ Current version │ Latest version │ Information      │
│ nativescript     │ 3.4.1           │ 3.4.1          │ Up to date       │
│ tns-core-modules │ 3.4.0           │ 3.4.0          │ Up to date       │
│ tns-android      │ 3.3.1           │ 3.4.1          │ Update available │
│ tns-ios          │ 3.4.1           │ 3.4.1          │ Up to date       │
└──────────────────┴─────────────────┴────────────────┴──────────────────┘

Here is my webpack.config.js :

{
  "description": "My Application desc",
  "license": "My app name",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.myAppName",
    "tns-android": {
      "version": "3.3.1"
    },
    "tns-ios": {
      "version": "3.4.1"
    }
  },
  "dependencies": {
    "@angular/animations": "~5.0.0",
    "@angular/common": "~5.0.0",
    "@angular/compiler": "~5.0.0",
    "@angular/core": "~5.0.0",
    "@angular/forms": "~5.0.0",
    "@angular/http": "~5.0.0",
    "@angular/platform-browser": "~5.0.0",
    "@angular/platform-browser-dynamic": "~5.0.0",
    "@angular/router": "~5.0.0",
    "nativescript-angular": "^5.0.0",
    "nativescript-bluetooth": "^1.1.6",
    "nativescript-clipboard": "^1.1.7",
    "nativescript-drop-down": "^3.1.1",
    "nativescript-exit": "^1.0.1",
    "nativescript-gcloud": "file:../plugins/nativescript-gcloud",
    "nativescript-iqkeyboardmanager": "^1.1.0",
    "nativescript-loading-indicator": "^2.3.2",
    "nativescript-permissions": "^1.2.3",
    "nativescript-plugin-firebase": "^5.0.2",
    "nativescript-pro-ui": "^3.3.0",
    "nativescript-texttospeech": "^1.3.2",
    "nativescript-theme-core": "~1.0.2",
    "nativescript-vibrate": "^2.0.1",
    "ng2-translate": "^5.0.0",
    "reflect-metadata": "~0.1.8",
    "rxjs": "^5.5.0",
    "tns-core-modules": "^3.4.0",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~5.0.0",
    "@ngtools/webpack": "~1.8.2",
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "copy-webpack-plugin": "~4.0.1",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.0",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-sass": "^1.3.5",
    "nativescript-dev-typescript": "^0.6.0",
    "nativescript-dev-webpack": "^0.9.0",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.1.0",
    "sass-loader": "~6.0.6",
    "tns-platform-declarations": "^3.2.0",
    "typescript": "~2.4.2",
    "webpack": "~3.8.1",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-sources": "~1.0.1"
  }
}