@dobbel
Many thanks, you have helped me a lot!
My code was almost exactly the same as yours, but there were 2 problems in my code:
1# I did not copy all the code from then demo exactly, I wrote the imports manually:

import { JqxPivotGrid, JqxPivotDesigner } from 'jqwidgets-scripts'

but the correct way is (as you wrote):

import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue'
import JqxPivotDesigner from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotdesigner.vue'

My bad!

2# Then the linter still complained about the code let dataAdapter = new jqx.dataAdapter(source):

89:33  error  A constructor name should not start with a lowercase letter  new-cap
89:33  error  'jqx' is not defined                                         no-undef

I have added the following to the linter rules:

    'new-cap': 'off',
    'no-undef': 'off',

And now it works! Thank you again!
Ales

Just a note: the same sample code using jQuery is:

var dataAdapter = new $.jqx.dataAdapter(source);

Hi,
does anybody experience with jQWidgets used in Quasar? I am just trying to use their JqxPivotGrid in my Quasar app with no luck. I use the Vue flavour of the JqxPivotGrid component. There is a demo app here: https://www.jqwidgets.com/vue/vue-pivotgrid/#https://www.jqwidgets.com/vue/vue-pivotgrid/vue-pivotgrid-designer.htm (see the App.vue tab).

I have tried to copy their code to my app, but an error is raised in the following code

let dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();

“TypeError: Cannot read property ‘dataAdapter’ of undefined”

I have tried to build and run their demo that uses pure Vue and it works flawlessly, even the new jqx.dataAdapter(source) code.

Am I missing something?
Thanks Ales

@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

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

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 ( @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 @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 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

@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