Problems with viewing and editing entities with Yarn

[yacosta738]

Overview of the issue

After updating to the latest version of jhipster and jhipster-vuejs my project stopped allowing entities to be updated.

Motivation for or Use Case

Reproduce the error

To reproduce the error, create a new project and import the jdl from jdl-sample online-shop.jh

Related issues

#475 #322

Suggest a Fix

JHipster Version(s)

"jhipsterVersion": "6.7.1" generator-jhipster-vuejs version: "1.6.0"

JHipster configuration

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.test",
      "nativeLanguage": "es"
    },
    "jhipsterVersion": "6.7.1",
    "applicationType": "monolith",
    "baseName": "shopify",
    "packageName": "com.test",
    "packageFolder": "com/test",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "postgresql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "secret key",
    "embeddableLaunchScript": false,
    "useSass": true,
    "clientPackageManager": "yarn",
    "clientFramework": "vue",
    "clientTheme": "none",
    "clientThemeVariant": "",
    "creationTimestamp": 1582318723097,
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [
      {
        "name": "generator-jhipster-vuejs",
        "version": "1.6.0"
      }
    ],
    "enableTranslation": true,
    "nativeLanguage": "es",
    "languages": ["es", "en"],
    "blueprints": [
      {
        "name": "generator-jhipster-vuejs",
        "version": "1.6.0"
      }
    ]
  }
}

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

OS: Ubuntu 18.04 (KDE NEON 5.18 Linux 5.3) Google Chrome Version 80.0.3987.116 (Official Build) (64-bit) Firefox 73.0

• [x ] Checking this box is mandatory (this is just to show you read everything)

[pascalgrimaud]

@yuniel-acosta : can you provide some logs ? browser logs, backend logs etc

[pascalgrimaud]

Just tried and I don't have the problem. Everything works well.

[yacosta738]

@pascalgrimaud It could be my operating system. I recently reinstalled with the same KDE NEON system and then I started seeing this problem. I am using nvm for node versions (12.16.1 LTS) and this did not happen to me before. Now I notice that all my applications made with vuejs have problems with the vue-router, it seems that I don't notice the route changes, nor does the hot reload work. Any suggestions that it may be a solution without reinstalling the OS. I'm going to try an app made with angular to see if I have the same problem.

[yacosta738]

Browser Logs

SyncMessage.js:292 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. browser.runtime.sendSyncMessage @ SyncMessage.js:292 DevTools failed to parse SourceMap: chrome-extension://alplpnakfeabeiebipdmaenpmbgknjce/include.preload.js.map DevTools failed to parse SourceMap: chrome-extension://alplpnakfeabeiebipdmaenpmbgknjce/include.postload.js.map

Server Logs

2020-02-22 16:20:35.623 DEBUG 9874 --- [ XNIO-1 task-1] cu.desoft.cav.aop.logging.LoggingAspect : Enter: cu.desoft.cav.web.rest.AccountResource.getAccount() with argument[s] = [] 2020-02-22 16:20:35.695 DEBUG 9874 --- [ XNIO-1 task-1] cu.desoft.cav.aop.logging.LoggingAspect : Enter: cu.desoft.cav.service.UserService.getUserWithAuthorities() with argument[s] = [] Hibernate: select user0_.id as id1_70, authority2_.name as name1_41, user0_.created_by as created_2_70, user0_.created_date as created_3_70, user0_.last_modified_by as last_mod4_70, user0_.last_modified_date as last_mod5_70, user0_.activated as activate6_70, user0_.activation_key as activati7_70, user0_.email as email8_70, user0_.first_name as first_na9_70, user0_.image_url as image_u10_70, user0_.lang_key as lang_ke11_70, user0_.last_name as last_na12_70, user0_.login as login13_70, user0_.password_hash as passwor14_70, user0_.reset_date as reset_d15_70, user0_.reset_key as reset_k16_70, authoritie1_.user_id as user_id1_8_0, authoritie1_.authority_name as authorit2_8_0 from jhiuser user0 left outer join jhi_userauthority authoritie1 on user0.id=authoritie1.user_id left outer join jhiauthority authority2 on authoritie1_.authorityname=authority2.name where user0_.login=? 2020-02-22 16:20:35.925 DEBUG 9874 --- [ XNIO-1 task-1] cu.desoft.cav.aop.logging.LoggingAspect : Exit: cu.desoft.cav.service.UserService.getUserWithAuthorities() with result = Optional[User{login='admin', firstName='Administrator', lastName='Administrator', email='admin@localhost', imageUrl='', activated='true', langKey='es', activationKey='null'}] 2020-02-22 16:20:35.931 DEBUG 9874 --- [ XNIO-1 task-1] cu.desoft.cav.aop.logging.LoggingAspect : Exit: cu.desoft.cav.web.rest.AccountResource.getAccount() with result = UserDTO{login='admin', firstName='Administrator', lastName='Administrator', email='admin@localhost', imageUrl='', activated=true, langKey='es', createdBy=system, createdDate=null, lastModifiedBy='system', lastModifiedDate=null, authorities=[ROLE_USER, ROLEADMIN]} 2020-02-22 16:20:41.343 DEBUG 9874 --- [ XNIO-1 task-3] cu.desoft.cav.aop.logging.LoggingAspect : Enter: cu.desoft.cav.web.rest.CategoryResource.getAllCategories() with argument[s] = [Page request [number: 0, size 20, sort: id: DESC], false] 2020-02-22 16:20:41.347 DEBUG 9874 --- [ XNIO-1 task-3] cu.desoft.cav.web.rest.CategoryResource : REST request to get a page of Categories 2020-02-22 16:20:41.349 DEBUG 9874 --- [ XNIO-1 task-3] cu.desoft.cav.aop.logging.LoggingAspect : Enter: cu.desoft.cav.service.CategoryService.findAll() with argument[s] = [Page request [number: 0, size 20, sort: id: DESC]] 2020-02-22 16:20:41.352 DEBUG 9874 --- [ XNIO-1 task-3] cu.desoft.cav.service.CategoryService : Request to get all Categories Hibernate: select category0.id as id11, category0_.date_added as date_add21, category0_.date_modified as date_mod31, category0_.description as descript41, category0_.parent_id as parent_i71, category0_.sort_order as sort_ord51, category0_.status as status61 from category category0 order by category0.id desc limit ? 2020-02-22 16:20:41.381 DEBUG 9874 --- [ XNIO-1 task-3] cu.desoft.cav.aop.logging.LoggingAspect : Exit: cu.desoft.cav.service.CategoryService.findAll() with result = Page 1 of 1 containing cu.desoft.cav.domain.Category instances 2020-02-22 16:20:41.390 DEBUG 9874 --- [ XNIO-1 task-3] cu.desoft.cav.aop.logging.LoggingAspect : Exit: cu.desoft.cav.web.rest.CategoryResource.getAllCategories() with result = <200 OK OK,[Category{id=10, description='Avon invoice', sortOrder=51091, dateAdded='2020-02-21', dateModified='2020-02-20', status='AVAILABLE'}, Category{id=9, description='throughput Home Loan Account revolutionize', sortOrder=54871, dateAdded='2020-02-20', dateModified='2020-02-21', status='AVAILABLE'}, Category{id=8, description='Front-line Fantastic Human', sortOrder=23683, dateAdded='2020-02-20', dateModified='2020-02-21', status='DISABLED'}, Category{id=7, description='Home Loan Account deposit', sortOrder=12226, dateAdded='2020-02-21', dateModified='2020-02-21', status='AVAILABLE'}, Category{id=6, description='web services', sortOrder=54496, dateAdded='2020-02-21', dateModified='2020-02-21', status='RESTRICTED'}, Category{id=5, description='harness architectures red', sortOrder=17869, dateAdded='2020-02-21', dateModified='2020-02-21', status='RESTRICTED'}, Category{id=4, description='synthesize Steel', sortOrder=18974, dateAdded='2020-02-21', dateModified='2020-02-21', status='AVAILABLE'}, Category{id=3, description='Chief', sortOrder=83161, dateAdded='2020-02-21', dateModified='2020-02-21', status='RESTRICTED'}, Category{id=2, description='transmit', sortOrder=8745, dateAdded='2020-02-21', dateModified='2020-02-20', status='AVAILABLE'}, Category{id=1, description='Table', sortOrder=47527, dateAdded='2020-02-21', dateModified='2020-02-21', status='DISABLED'}],[X-Total-Count:"10", Link:"http://localhost:9000/api/categories?sort=id%2Cdesc&page=0&size=20; rel="last",http://localhost:9000/api/categories?sort=id%2Cdesc&page=0&size=20; rel="first""]>

[yacosta738]

I don't know what the problem is but the routes to edit or view entities don't work well for me. I have reinstalled my PC with KDE NEON (then updated to its latest version 5.18.1) I have installed nvm from scratch with node version 12.16.1 LTS (also probe with 10). Install yarn 1.21 and the project I generate from scratch does not work for me. I am also using zsh. Does anybody have any suggestions. I have noticed that the beforeRouteEnter (to, from, next) method is never executed as it is not detected that the route has changed. It is quite frustrating not being able to continue with my project. Please help

[vishal423]

@yuniel-acosta, it would be good if you can check the browser console and network tab logs. From screenshots, it seems that the edit page was not loaded with entity #9 data. It can either be an issue on the Javascript side or an API call and above will help in troubleshooting the issue.

[yacosta738]

@vishal423 This is a video that I record where the problem I have is shown. video

[yacosta738]

I've tried in other linux distributions (Deepin) that I have installed on another pc and the same problem happens to me. I have not yet tried on windows any idea that it may be happening.

[pascalgrimaud]

@yuniel-acosta : could you push to GitHub a fresh project with Vue.js blueprint plz ? So I can try and confirm it comes from your environnement

Which browser do you use ? Is there any addons / plugins ?

[yacosta738]

@pascalgrimaud this is a project created from scratch. An example where online-shop.jdl is used The project does not capture changes in routes so the beforeRouteEnter (to, from, next) method It never runs. I just reinstalled my pc now with Manjaro and even so a base project doesn't work for me. I am using

node v12.16.1 yarn v1.21 java 8 and 11 OS: Kubuntu, KDE NEON, Manjaro(KDE), Deepin (other pc)

This is just a random example. I have tried several projects generated from scratch and none works correctly. I find it very strange because before they worked well for me. Try on several browsers: Google Chrome in which I have many extensions installed (I thought that would be the problem, although before everything worked fine) Firefox which has no add-on installed

The result for both browsers is the same. Editing or viewing entities does not work In another comment I left a video that I recorded showing the problem git repo project

[pascalgrimaud]

Ok then, with your project, I got the issue. I think there is an issue with Yarn. Can you retry generating a project with NPM instead of Yarn plz ?

[yacosta738]

@pascalgrimaud this is the same project but with npm instead of yarn Project generated with npm package manager

[pascalgrimaud]

@yuniel-acosta : as I said, I manage to reproduce the issue with your 1st repo. After playing a little bit, it comes from Yarn. I don't have the issue with NPM.

Do you have the issue with NPM too ?

[yacosta738]

With npm it works perfectly

[seraphinandrieux]

After investigating, it seems to be an issue with beforeRouteEnter from entity-update.component.ts which is not called when we click on edit. Because of that the method retrieveEntity() is never called.

[pascalgrimaud]

strange... so why does it work with NPM and not with Yarn ?

[seraphinandrieux]

I definitely have no idea... I created twice the same app, one with npm and the other one with yarn and the only changes that I noticed between both had not impact...

[stonedMoose]

I found the solution !

It seems to come from how npm and yarn handle dependancies of the node_modules used in the project.

Let me explain: In the index.ts where we register hooks on component we do it on Component provided by vue-class-component. In the vue components we annotate the class with @Component provided by vue-property-decorator .

Once I noticed that, I took a look at the node_modules tree. And I found the first relevant difference between the two project.

In the yarn project the vue-property-decorator directory looks like:

├── lib
│   ├── vue-property-decorator.d.ts
│   ├── vue-property-decorator.js
│   └── vue-property-decorator.umd.js
├── LICENSE
├── node_modules
│   └── vue-class-component
│       ├── dist
│       │   ├── vue-class-component.common.js
│       │   ├── vue-class-component.esm.browser.js
│       │   ├── vue-class-component.esm.browser.min.js
│       │   ├── vue-class-component.esm.js
│       │   ├── vue-class-component.js
│       │   └── vue-class-component.min.js
│       ├── hooks.d.ts
│       ├── hooks.js
│       ├── lib
│       │   ├── component.d.ts
│       │   ├── component.js
│       │   ├── data.d.ts
│       │   ├── data.js
│       │   ├── declarations.d.ts
│       │   ├── declarations.js
│       │   ├── index.d.ts
│       │   ├── index.js
│       │   ├── reflect.d.ts
│       │   ├── reflect.js
│       │   ├── util.d.ts
│       │   └── util.js
│       ├── LICENSE
│       ├── package.json
│       └── README.md
├── package.json
└── README.md

While in npm project the directory looks like:

├── lib
│   ├── vue-property-decorator.d.ts
│   ├── vue-property-decorator.js
│   └── vue-property-decorator.umd.js
├── LICENSE
├── package.json
└── README.md

In the npm based project, we register the hooks on the Component provided by the vue-class-component package, and when using @Component on the vue class, we use the vue-property-decorator which use the vue-class-component on which we registered our hooks.

On the other hand, in the yarn based project when using @Component we use vue-property-decorator which use a version of the vue-property-decorator on which we didn't have registered any hooks, so the retrieval of the entity to update fail.

The solution is to add a resolution options to the package.json to force the use of only one version of vue-class-component. I'll push the fix later in the evening.

[seraphinandrieux]

hi @stonedMoose I found also the solution I already created a branch (https://github.com/seraphinandrieux/jhipster-vuejs/tree/565-fix-editing-entities) which is ready to merge. I didn't mention, so I can let you do it, my bad.

[pascalgrimaud]

@stonedMoose : nice catch about dependencies issues. Indeed, we could do the fix with resolution like we did with React (see https://github.com/jhipster/generator-jhipster/blob/master/generators/client/templates/react/package.json.ejs#L180-L183)

But if the upgrade of libraries is enough (https://github.com/seraphinandrieux/jhipster-vuejs/commit/0a6a50e870892fed6bb7e530eb080962f4b9ebd7), it will be a better solution for me !

[stonedMoose]

@pascalgrimaud : Upgrading the dependancies might be a better solution indeed.

@seraphinandrieux: did the upgrade fixed the issue because these package are intrinsically better written ? or is it because with the upgrade vue-property-decorator depends on the same version of vue-class-component that we use in the project ?

My concern, is that next time we upgrade one of these libraries, we do not check that the version matches, and we re-introduce the bug without even noticing it. So, afterall, resolution may be the way to go.

[stonedMoose]

There is something else that this issue enlighten: we do not have any test to check that our beforeRouteEnter are triggered. And it might be an issue.

If we did have that kind of test, the upgrade of dependencies could be the answer.

Doing a quick search it's does not seem easy to test that, it might the reason why they do not exist.

I'll dig further this weekend

[pascalgrimaud]

As we already migrate to GitHub Actions -> we need to add a new build using Yarn too

[stonedMoose]

Sure we do ! But it could not be enough. Maybe e2e will grab the issue but I'm not sure of that

[pascalgrimaud]

the e2e for Yarn will not be enough, what you suggested is better, so let's do both ! Can you open a new ticket to track these missing tests plz ?

[seraphinandrieux]

Bounty claimed : https://opencollective.com/generator-jhipster/expenses/14318 :)