Skip to content

Using Material Bottom Navigation inside a lazy loaded module causes HMR to crash on iOS #5293

Description

@kmmccafferty96

Environment

  • iPhone X (iOS 13.4.1), iPhone 11 Simulator (iOS 13.4)
  • CLI: 6.5.0
  • Cross-platform modules: 6.5.1
  • iOS Runtime: 6.5.0
  • Plugins:
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "@nativescript/theme": "~2.3.3",
    "nativescript-angular": "~8.21.0",
    "nativescript-material-bottomnavigationbar": "^3.1.16",
    "nativescript-material-core": "^3.1.16",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.4.0",
    "tns-core-modules": "~6.5.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~8.2.0",
    "@ngtools/webpack": "~8.2.0",
    "nativescript-dev-webpack": "~1.5.1",
    "typescript": "~3.5.3"
  },

Describe the bug
If I add the nativescript-material-bottomnavigationbar to a component in a lazy loaded module and hot module replacement is triggered by saving, the app crashes on both the iOS simulator and my device. If I make another change and save that, the app will reload just fine.
The only error in the console that I can really pick out is this:
JavaScript error: file: node_modules/@nativescript/core/ui/core/view/view.ios.js:47:0: JS ERROR TypeError: nativeView.setNeedsLayout is not a function. (In 'nativeView.setNeedsLayout()', 'nativeView.setNeedsLayout' is undefined) ***** Fatal JavaScript exception - application has been terminated. *****

Removing the bottom navigation from the component causes the hot module replacement to start working fine again.

I have included the full logs starting from the file change detection here.

To Reproduce

  1. Run tns run ios (app loads fine)
  2. Make a change and save, causing HMR to happen (app crashes).
  3. Make another change and save (app starts again just fine).
  4. Make another change and save (app crashes).
  5. Make another change and save (app starts again just fine).

So on and so forth.

Expected behavior
The app should not crash on iOS when saving and triggering HMR.

Sample project
test-app.zip

Additional Context
I posted this on the nativescript-material-components GitHub (nativescript-community/ui-material-components#134), but I was told to post it here instead.

I also posted this in the nativescript-angular and NativeScript GitHubs (NativeScript/nativescript-angular#2142 and NativeScript/NativeScript#8516) as I'm not sure where this belongs.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions