Sitelet https://web.archive.org/web/20220202213746/https://github.com/NativeScript/NativeScript/issues/9507
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to get HMR working in Vue with TypeScript #9507

Open
trajano opened this issue Aug 10, 2021 · 10 comments
Open

Unable to get HMR working in Vue with TypeScript #9507

trajano opened this issue Aug 10, 2021 · 10 comments
Labels
vue

Comments

@trajano
Copy link

@trajano trajano commented Aug 10, 2021 •
edited

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

  • CLI: 8.0.2
  • Cross-platform modules:
  • Android Runtime: ^8.0.0
  • iOS Runtime: ^8.0.0
  • XCode Version: 12.5.1
  • Plugin(s):

Describe the bug

Trying to get a HMR working with TypeScript and Vue

To Reproduce

ns create --vue --ts  ns-vue-app
# I also tested with ns create --vue   ns-vue-app no typescript and get similar results
cd ns-vue-app
ns run ios
# app is now in simulator
# modify app/components/Home.vue so the message is changed
#save

Expected behavior

The modified message appears in the simulator

Sample project

Additional context

Running on macOS and Simulator is running iPad Air simulator
@trajano trajano mentioned this issue Aug 10, 2021
Open
36 tasks
@trajano
Copy link
Author

@trajano trajano commented Aug 10, 2021 

{
  "name": "@nativescript/template-blank-vue-ts",
  "main": "app/app.ts",
  "displayName": "Blank Vue Typescript",
  "version": "8.0.3",
  "description": "NativeScript Application",
  "author": "NativeScript Team <oss@nativescript.org>",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "homepage": "https://github.com/NativeScript/nativescript-app-templates",
  "bugs": {
    "url": "https://github.com/NativeScript/NativeScript/issues"
  },
  "publishConfig": {
    "access": "public"
  },
  "files": [
    "app",
    "App_Resources",
    "hooks",
    "tools",
    "!tools/assets",
    "types",
    ".editorconfig",
    "tsconfig.json"
  ],
  "keywords": [
    "nstudio",
    "nativescript",
    "mobile",
    "{N}",
    "tns",
    "vue",
    "nativescript-vue",
    "template",
    "master-detail",
    "detail",
    "category-general"
  ],
  "dependencies": {
    "@nativescript/core": "~8.0.0",
    "@nativescript/theme": "~3.0.1",
    "nativescript-vue": "~2.9.0"
  },
  "devDependencies": {
    "@nativescript/ios": "8.0.0",
    "@nativescript/types": "~8.0.0",
    "@nativescript/webpack": "beta",
    "@types/node": "~14.6.2",
    "nativescript-vue-template-compiler": "~2.9.0",
    "typescript": "~4.0.0",
    "vue": "~2.6.12"
  },
  "private": "true",
  "readme": "NativeScript Application"
}

@trajano
Copy link
Author

@trajano trajano commented Aug 10, 2021

Code that I changed

<script lang="ts">
  import Vue from "nativescript-vue";

  export default Vue.extend({
    computed: {
      message() {
        return "Blank {N}-Vue app abcde"; // added abcde
      }
    }
  });
</script>

@trajano
Copy link
Author

@trajano trajano commented Aug 10, 2021 •
edited

ns debug ios sort of works but it does a "restart" it does not update the running app. Or is that by design? Also it only reloads ONCE. Doing another change to the string and saving does not restart it. If I restart the app it allows for one restart.

@trajano
Copy link
Author

@trajano trajano commented Aug 10, 2021 •
edited

Digging further I found this nativescript-vue/nativescript-vue#846 and nativescript-vue/nativescript-vue#747 and nativescript-vue/nativescript-vue#518 so it may likely be something specific to NativeScript-Vue

@shirakaba shirakaba added the vue label Aug 10, 2021
@heywhy
Copy link

@heywhy heywhy commented Aug 24, 2021

HMR does work. All you need to do is to navigate to another screen then go back to the screen you just modified because the hot reload those not update a screen in place until it's rerendered and you don't necessarily need to restart the app.

@trajano
Copy link
Author

@trajano trajano commented Aug 24, 2021

Is that a limitation of Vue's HMR implementation?

@rigor789
Copy link
Member

@rigor789 rigor789 commented Aug 24, 2021

Yes with the current implementation - I'm working on improvements for Page HMR (other components that don't trigger a page to be re-rendered work fine).

This PR is part of the effort: #9460

@trajano
Copy link
Author

@trajano trajano commented Aug 24, 2021

@rigor789 your statement makes it sound like the issue is with NativeScript's implementation rather than VueJS' implementation.

@rigor789
Copy link
Member

@rigor789 rigor789 commented Aug 24, 2021

Requires changes in both NativeScript (the above PR) and nativescript-vue - the latter being much less trivial to fix.

@trajano
Copy link
Author

@trajano trajano commented Aug 24, 2021

@rigor789 so nothing needed from VueJS team then, that's good.

@minhnhut minhnhut mentioned this issue Dec 25, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
vue
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
@trajano @rigor789 @heywhy @shirakaba