Generator-jhipster: Unable to display generated website with Firefox and IE11

[jsebrien]

Overview of the issue

After having generated my website using JHipster last version, the web site is not displayed on Firefox and IE11. There is no issue under Chrome and Edge.

Motivation for or Use Case

The website is not displayed.

Reproduce the error

Generate the website, and run mvnw.

Related issues

Did not find any similar issues.

Suggest a Fix

I get the following console error under firefox:

TypeError: clazz.decorators is undefined main.bundle.js line 967 > eval:32642:17
Angular 5
js main.bundle.js:932
__webpack_require__ main.bundle.js:770
fn main.bundle.js:130
Angular
js main.bundle.js:1002
__webpack_require__ main.bundle.js:770
fn main.bundle.js:130
app.module.ts:1
ts main.bundle.js:5462
__webpack_require__ main.bundle.js:770
fn main.bundle.js:130
app.main.ts:1
ts main.bundle.js:5450
__webpack_require__ main.bundle.js:770
fn main.bundle.js:130
1 main.bundle.js:5954
__webpack_require__ main.bundle.js:770
main.bundle.js:908
main.bundle.js:911

This error on IE11:

SCRIPT1002: Erreur de syntaxe
main.bundle.js (5450,1)

JHipster Version(s)

6.8

JHipster configuration

jhipster info output:

INFO! Using JHipster version installed locally in current project's node_modules
INFO! Executing jhipster:info
INFO! Options: from-cli: true
Welcome to the JHipster Information Sub-Generator

JHipster Version(s)

[email protected] C:\Dev\Workspace_training\foxplanwebpoc
`-- [email protected]

##### **JHipster configuration, a `.yo-rc.json` file generated in the root folder**

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.foxplan.webpoc",
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "6.8.0",
    "applicationType": "monolith",
    "baseName": "foxplanwebpoc",
    "packageName": "com.foxplan.webpoc",
    "packageFolder": "com/foxplan/webpoc",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Memory",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "messageBroker": "kafka",
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": ,
    "embeddableLaunchScript": false,
    "useSass": true,
    "clientPackageManager": "npm",
    "clientFramework": "angularX",
    "clientTheme": "none",
    "clientThemeVariant": "",
    "creationTimestamp": 1586409369189,
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [],
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": ["en"],
    "blueprints": []
  }
}

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

JDL entity definitions

entity Attribute {
  key String,
  type String,
  value String
}
entity Entry {
  title String
}
relationship OneToMany {
  Entry{attribute} to Attribute{entry}
}

paginate Entry with infinite-scroll

Environment and Tools

java version "1.8.0_201"
Java(TM) SE Runtime Environment (build 1.8.0_201-b09)
Java HotSpot(TM) 64-Bit Server VM (build 25.201-b09, mixed mode)

git version 2.20.1.windows.1

node: v10.15.1

npm: 6.9.0

yeoman: 2.0.6

INFO! Congratulations, JHipster execution is complete!

The .yo-rc.json file:

{
"generator-jhipster": {
"promptValues": {
"packageName": "com.foxplan.webpoc",
"nativeLanguage": "en"
},
"jhipsterVersion": "6.8.0",
"applicationType": "monolith",
"baseName": "foxplanwebpoc",
"packageName": "com.foxplan.webpoc",
"packageFolder": "com/foxplan/webpoc",
"serverPort": "8080",
"authenticationType": "jwt",
"cacheProvider": "ehcache",
"enableHibernateCache": true,
"websocket": false,
"databaseType": "sql",
"devDatabaseType": "h2Memory",
"prodDatabaseType": "mysql",
"searchEngine": false,
"messageBroker": "kafka",
"serviceDiscoveryType": false,
"buildTool": "maven",
"enableSwaggerCodegen": false,
"jwtSecretKey": ,
"embeddableLaunchScript": false,
"useSass": true,
"clientPackageManager": "npm",
"clientFramework": "angularX",
"clientTheme": "none",
"clientThemeVariant": "",
"creationTimestamp": 1586409369189,
"testFrameworks": [],
"jhiPrefix": "jhi",
"entitySuffix": "",
"dtoSuffix": "DTO",
"otherModules": [],
"enableTranslation": true,
"nativeLanguage": "en",
"languages": ["en"],
"blueprints": []
}
}

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

Entry.json:

{
"name": "Entry",
"fields": [
{
"fieldName": "title",
"fieldType": "String"
}
],
"relationships": [
{
"relationshipType": "one-to-many",
"otherEntityName": "attribute",
"otherEntityRelationshipName": "entry",
"relationshipName": "attribute"
}
],
"changelogDate": "20200409070600",
"entityTableName": "entry",
"dto": "no",
"pagination": "infinite-scroll",
"service": "no",
"jpaMetamodelFiltering": false,
"fluentMethods": true,
"readOnly": false,
"embedded": false,
"clientRootFolder": "",
"applications": "*"
}

Attribute.json:

{
"name": "Attribute",
"fields": [
{
"fieldName": "key",
"fieldType": "String"
},
{
"fieldName": "type",
"fieldType": "String"
},
{
"fieldName": "value",
"fieldType": "String"
}
],
"relationships": [
{
"relationshipType": "many-to-one",
"otherEntityName": "entry",
"otherEntityRelationshipName": "attribute",
"relationshipName": "entry",
"otherEntityField": "id"
}
],
"changelogDate": "20200409070500",
"entityTableName": "attribute",
"dto": "no",
"pagination": "no",
"service": "no",
"jpaMetamodelFiltering": false,
"fluentMethods": true,
"readOnly": false,
"embedded": false,
"clientRootFolder": "",
"applications": "*"
}

Browsers and Operating System

Windows 10.

The Issue occurs only on Firefox and IE11 (no issue on Chrome, Edge)

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

[rlouissidney]

Hi,
A quick dirty workaround, set all compile option to es5 :

tsjconfig.json
"target": "es5"
"lib": ["es5", "dom"],

webpack.common.js
mainFields: [ 'es5', 'browser', 'module', 'main'],

Rgds.

[ruddell]

Related issue https://github.com/jhipster/generator-jhipster/issues/11505

Seems to only affect dev, site works fine in prod, also only affects Angular and not React

[pascalgrimaud]

It should work for Firefox in dev -> for that, I'm adding a bounty for this.
About IE11... it's another story.

[nicolas63]

The problem was not present in version 6.7.1 but i don't find the difference with 6.8 who can cause this problem. Maybe the modification of polyfills ?

[pascalgrimaud]

@nicolas63 : probably the upgrade to Angular 9 ?

[nicolas63]

yes, the error is in https://github.com/angular/angular/blob/696e520842c3d2d2d9f5454875714becc72df114/packages/core/src/render3/metadata.ts

 if (decorators !== null) {
      if (clazz.decorators !== undefined &&
          (!parentConstructor || parentConstructor.decorators !== clazz.decorators)) {
        clazz.decorators.push(...decorators);
      } else {
        clazz.decorators = decorators;
      }
    }

but there's no recent changes.

[rlouissidney]

The error seems to be when es2015 is selected with webpack and typescript compiler. Set target compiler and webpack to es2018, all works fine too.

The error is not "clazz.decorators not found", I always have this error and all things work fine.
We cannot exclude a bug in Firefox 75

[SudharakaP]

Two points to notice;

1) If we disable Ivy the error goes away.

2) If we switch back to default fesm5 bundling removing the es2015 in webpack config then also the error goes away.

For now (until the Firefox bug is fixed) we could remove the es2015 bundling (which was introduced at #10166) which would increase the size of the bundle a bit (my testing suggest around 0.15MiB) but I don't think that's a big issue. :smiley:

[SudharakaP]

As per, https://bugzilla.mozilla.org/show_bug.cgi?id=1624693 Firefox has fixed this in their Nightly Build 77. That will be released on June 02nd. I'll keep the pull request open anyways if we want to merge it before 77 is released and verified but after that we can revert the change. :smile:

[funder7]

Thanks God I've found this post... I was struggling to understand why the app worked on the desktop pc, and not on the laptop :-)

[gustavogmartinelli]

I was totally lost...I think was made something wrong...