App Extension - Hot module reload of changed file does not work



  • Hi,
    I have created simple App Extension, followed the tutorial. Extension is successfully installed in my app and works fine.

    Then I tried to enable hot module reload like described here.

    I did everything as required

     yarn add --dev link:../../extensions/myextension
    

    and also added devServer.watchOptions to quasar.conf.js.

    I expected that when I modify a file in my extension, the dev server will recognize this and reload the app. But nothing happens.

    I use Linux Mint 19.

    I will appreciate any hint. Thank you.



  • @ales said in App Extension - Hot module reload of changed file does not work:

    yarn add --dev link:…/…/extensions/myextension

    I have also tried a scenario with

    # my extension directory
    yarn link
    
    # app root directory
    yarn link "quasar-app-extension-myextension"
    

    but no difference



  • I have upgraded quasar to v1.5.8 (previously v1.5.5), but still no luck. @s-molinari what do you think, please? Am I doing something wrong or is it actually a bug?
    Thank you for any hint.
    Ales



  • Yeah. Yarn link hasn’t always worked, when I’ve used it on Windows 10. I tried out a tool called Yalc, and that works better. https://github.com/whitecolor/yalc

    Scott



  • Hi @s-molinari,
    yalc seems to be ve very good, but I do not think this is the problem.
    Apart from this, yalc does not propagate changes without user action, you need to issue

    yalc publish --push --changed
    

    manually to propagate the extension changes to dependent project. Maybe some file watching should be setup to exec yalc publish --push --changed automatically.

    But the main problem is that Quasar does not watch the file changes at all.

    What I have tried lately:

    • I have installed myextension to the app project.
    • The install.js file in myextension looks like this:
    module.exports = function (api) {
      api.render('./templates')
    }
    
    • There is a file node_modules/quasar-app-extension-myextension/src/templates/src/pages/MyPage.vue in my app project (it is physically copied here by yalc, no link at all).
    • The watchOptions in quasar.conf.js looks like this:
        devServer: {
          watchOptions: {
            ignored: [
              'node_modules',
              '!node_modules/quasar-app-extension-myextension'
            ]
          }
        }
    
    • Run quasar dev in the app folder.
    • When I try to modify the node_modules/quasar-app-extension-myextension/src/templates/src/pages/MyPage.vue file manually, the app is not reloaded.

    What does Quasar exactly do in such setup? Does it watch the MyPage.vue and after file change runs the install.js script? Maybe @rstoenescu could shed a little bit more light on this?

    Note: When I manually issue quasar ext invoke myextension, files are being copied after overwrite confirmation, app is reloaded and everything works fine. But I would like to avoid repeatedly manualy invoking extension installation. I would like to just to change the extension file in the extension project and automatically propagate the change and reload the app. Is it possible?



  • I just reread the thread and saw you are using Linux Mint. So, my advice on Yalc was misplaced anyway.

    The better person to ask about the development of AEs would be @Hawkeye64 (Jeff). Maybe he can help shed some better light on what might be the problem.

    Scott



  • @ales You look like you are doing everything right. Order is also important:

    1. yarn add --dev link:../../extensions/myextension
    2. in app extension folder: yarn link
    3. in your test app: yarn link "quasar-app-extension-myextension"
    4. quasar ext invoke myextension

    And you need this in test app’s quasar.conf.js:

        devServer: {
          watchOptions: {
            ignored: [
              'node_modules',
              '!node_modules/quasar-app-extension-myextension'
            ]
          }
        }
    
    1. quasar dev

    Now, assuming you change the names above to match your app extension it should all work, including hmr



  • Hi Jeff ( @Hawkeye64 ),
    it does not work either. I have started from the scratch - created a new test app, tried all these steps exactly as you said in the proper order but the app does not reload.

    The real name of the extension is different from “myextension”, I always use the real name of course - it is “authenticate”.

    When adding --dev link there are some messages about “fsevents”, but this is AFAIK related to MacOs. Appart from this every other command was executed successfully without errors or warnings.

    $ yarn add --dev link:../../extensions/authenticate
    yarn add v1.13.0
    [1/5] Validating package.json...
    [2/5] Resolving packages...
    [3/5] Fetching packages...
    info fsevents@2.1.2: The platform "linux" is incompatible with this module.
    info "fsevents@2.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
    info fsevents@1.2.9: The platform "linux" is incompatible with this module.
    info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
    [4/5] Linking dependencies...
    [5/5] Building fresh packages...
    success Saved lockfile.
    success Saved 1 new dependency.
    info Direct dependencies
    └─ quasar-app-extension-authenticate@0.0.0
    info All dependencies
    └─ quasar-app-extension-authenticate@0.0.0
    Done in 2.89s.
    

    I am really stuck…
    Ales



  • Hi Jeff again ( @Hawkeye64 ),
    I think that the whole “yarn link” stuff is unrelated to this issue.

    Let’s try to isolate the problem:

    • Suppose there is a file node_modules/quasar-app-extension-myextension/src/templates/src/pages/MyPage.vue in my app project (it is physically copied here for example via yarn add --dev file://... , no link at all).
    • The extension is installed quasar ext invoke myextension
    • devServer.watchOptions are properly set as stated before.
    • When I try to modify the node_modules/quasar-app-extension-myextension/src/templates/src/pages/MyPage.vue file manually, the app is not reloaded.


  • Hi Jeff again 🙂 ( @Hawkeye64 ),
    I have tried similar scenario on Window 10. Instead of steps 1.-3. I have used yalc add so that all the extension files are physically copied to my test app. Steps 4.-6. are the same.

    The result is the same: manual modification of the file node_modules/quasar-app-extension-myextension/src/templates/src/pages/MyPage.vue does not reload the app.

    Ales



  • First of all, the templates folder is for the render function, that copies what’s in the templates folder from the app-ext, to the src folder of the hosting app. So, I can see if you made changes in a file under that folder, that you might not get HMR because that is not the way it is supposed to work.
    If you your app-ext has a UI (and not CLI in nature), then I suggest you take a look at the UI kit (fairly new).
    Create a new project by running this:

    quasar create authenticate --kit ui
    

    During the questions, make sure you select “App extension” and “Component” (sounds like you don’t need the “Directive” part, so don’t select it)
    Look over the way that is laid out.
    There will be ui,ui/dev and app-extension folders.
    Build your component in ui
    Let me know if you have questions…



  • @Hawkeye64 said in App Extension - Hot module reload of changed file does not work:

    quasar create authenticate --kit ui

    Hi Jeff,
    the ui kit seems the way to go, it looks promising. Your support was really helpful.
    Thank you very much.

    BTW: I still do not understand how the HMR is supposed to work. The documentation says:

    Additionally, if you would like to have HMR (hot module reload) capabilities in your test app while developing your App Extension, then your quasar.conf.js > devServer > watchOptions would look like this…

    This makes me think that after changing the extension source file the test app reloads (I suppose that extension and test app are 2 different projects).

    Ales



  • @ales Yes, app-extension is basically a boot loader for the ui component. So, set up the watcher for the ui component, not the app-ext.


Log in to reply