[React] Deprecated Libraries & Vulnerabilities

Overview of the issue

I was following the tutorial to set up the React front end and a lot of warnings popped up. Seems like some files or libraries are deprecated or have security issues and need maintainence.

Warning on Build

``` npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated glob@5.0.15: Glob versions prior to v9 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated glob@7.1.1: Glob versions prior to v9 are no longer supported npm warn deprecated domexception@4.0.0: Use your platform's native DOMException instead npm warn deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead npm warn deprecated istanbul@0.4.5: This module is no longer maintained, try this instead: npm warn deprecated npm i nyc npm warn deprecated Visit https://istanbul.js.org/integrations for other alternatives. ```

Warning on Npm Audit

``` # npm audit report axios 0.8.1 - 0.27.2 Severity: moderate Axios Cross-Site Request Forgery Vulnerability - https://github.com/advisories/GHSA-wf5p-g6vw-rhxx fix available via `npm audit fix --force` Will install browser-sync@3.0.3, which is a breaking change node_modules/localtunnel/node_modules/axios localtunnel >=1.9.0 Depends on vulnerable versions of axios node_modules/localtunnel browser-sync 2.12.1 - 3.0.2 Depends on vulnerable versions of localtunnel Depends on vulnerable versions of send Depends on vulnerable versions of serve-static node_modules/browser-sync json5 <1.0.2 Severity: high Prototype Pollution in JSON5 via Parse Method - https://github.com/advisories/GHSA-9c47-m6qq-7p4h No fix available node_modules/loader-utils/node_modules/json5 loader-utils <=1.4.0 Depends on vulnerable versions of json5 node_modules/loader-utils sourcemap-istanbul-instrumenter-loader * Depends on vulnerable versions of loader-utils node_modules/sourcemap-istanbul-instrumenter-loader send <0.19.0 Severity: moderate send vulnerable to template injection that can lead to XSS - https://github.com/advisories/GHSA-m6fv-jmcg-4jfg fix available via `npm audit fix --force` Will install browser-sync@3.0.3, which is a breaking change node_modules/send serve-static <=1.16.0 Depends on vulnerable versions of send node_modules/serve-static 8 vulnerabilities (5 moderate, 1 high, 2 critical) To address all issues possible (including breaking changes), run: npm audit fix --force Some issues need review, and may require choosing a different dependency. ```

Warning on Npm Start

``` WARNING in ./src/main/webapp/app/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/main/webapp/app/app.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Warning on line 36, column 10 of file:///Users/username/iosScreenLocker/node_modules/bootstrap/scss/_functions.scss:36:10: red() is deprecated. Suggestion: color.channel($color, red, $space: rgb) More info: https://sass-lang.com/d/color-functions 36 | @return red($value), green($value), blue($value); node_modules/bootstrap/scss/_functions.scss 37:11 to-rgb() node_modules/bootstrap/scss/_variables.scss 846:31 @import node_modules/bootstrap/scss/bootstrap.scss 8:9 @import src/main/webapp/app/app.scss 4:9 root stylesheet WARNING in ./src/main/webapp/app/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/main/webapp/app/app.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Warning on line 36, column 23 of file:///Users/username/iosScreenLocker/node_modules/bootstrap/scss/_functions.scss:36:23: green() is deprecated. Suggestion: color.channel($color, green, $space: rgb) More info: https://sass-lang.com/d/color-functions 36 | @return red($value), green($value), blue($value); node_modules/bootstrap/scss/_functions.scss 37:24 to-rgb() node_modules/bootstrap/scss/_variables.scss 846:31 @import node_modules/bootstrap/scss/bootstrap.scss 8:9 @import src/main/webapp/app/app.scss 4:9 root stylesheet WARNING in ./src/main/webapp/app/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/main/webapp/app/app.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Warning on line 37, column 4 of file:///Users/username/iosScreenLocker/node_modules/bootstrap/scss/_type.scss:37:4: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in `& {}`. More info: https://sass-lang.com/d/mixed-decls 37 | font-family: $display-font-family; node_modules/bootstrap/scss/_type.scss 38:5 @import node_modules/bootstrap/scss/bootstrap.scss 17:9 @import src/main/webapp/app/app.scss 4:9 root stylesheet WARNING in ./src/main/webapp/app/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/main/webapp/app/app.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Warning on line 38, column 4 of file:///Users/username/iosScreenLocker/node_modules/bootstrap/scss/_type.scss:38:4: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in `& {}`. More info: https://sass-lang.com/d/mixed-decls 38 | font-style: $display-font-style; node_modules/bootstrap/scss/_type.scss 39:5 @import node_modules/bootstrap/scss/bootstrap.scss 17:9 @import src/main/webapp/app/app.scss 4:9 root stylesheet WARNING in ./src/main/webapp/app/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/main/webapp/app/app.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Warning on line 39, column 4 of file:///Users/username/iosScreenLocker/node_modules/bootstrap/scss/_type.scss:39:4: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in `& {}`. More info: https://sass-lang.com/d/mixed-decls 39 | font-weight: $display-font-weight; node_modules/bootstrap/scss/_type.scss 40:5 @import node_modules/bootstrap/scss/bootstrap.scss 17:9 @import src/main/webapp/app/app.scss 4:9 root stylesheet WARNING in ./src/main/webapp/app/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/main/webapp/app/app.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Warning on line 184, column 9 of file:///Users/username/iosScreenLocker/node_modules/bootstrap/scss/_functions.scss:184:9: red() is deprecated. Suggestion: color.channel($color, red, $space: rgb) More info: https://sass-lang.com/d/color-functions 184 | "r": red($color), node_modules/bootstrap/scss/_functions.scss 185:10 luminance() node_modules/bootstrap/scss/_functions.scss 174:8 contrast-ratio() node_modules/bootstrap/scss/_functions.scss 159:22 color-contrast() node_modules/bootstrap/scss/_variables.scss 846:42 @import node_modules/bootstrap/scss/bootstrap.scss 8:9 @import src/main/webapp/app/app.scss 4:9 root stylesheet WARNING in ./src/main/webapp/app/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/main/webapp/app/app.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Warning on line 185, column 9 of file:///Users/username/iosScreenLocker/node_modules/bootstrap/scss/_functions.scss:185:9: green() is deprecated. Suggestion: color.channel($color, green, $space: rgb) More info: https://sass-lang.com/d/color-functions 185 | "g": green($color), node_modules/bootstrap/scss/_functions.scss 186:10 luminance() node_modules/bootstrap/scss/_functions.scss 174:8 contrast-ratio() node_modules/bootstrap/scss/_functions.scss 159:22 color-contrast() node_modules/bootstrap/scss/_variables.scss 846:42 @import node_modules/bootstrap/scss/bootstrap.scss 8:9 @import src/main/webapp/app/app.scss 4:9 root stylesheet WARNING in ./src/main/webapp/app/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/main/webapp/app/app.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Warning on line 186, column 9 of file:///Users/username/iosScreenLocker/node_modules/bootstrap/scss/_functions.scss:186:9: blue() is deprecated. Suggestion: color.channel($color, blue, $space: rgb) More info: https://sass-lang.com/d/color-functions 186 | "b": blue($color) node_modules/bootstrap/scss/_functions.scss 187:10 luminance() node_modules/bootstrap/scss/_functions.scss 174:8 contrast-ratio() node_modules/bootstrap/scss/_functions.scss 159:22 color-contrast() node_modules/bootstrap/scss/_variables.scss 846:42 @import node_modules/bootstrap/scss/bootstrap.scss 8:9 @import src/main/webapp/app/app.scss 4:9 root stylesheet WARNING in ./src/main/webapp/app/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/main/webapp/app/app.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Warning on line 502, column 2 of file:///Users/username/iosScreenLocker/node_modules/bootstrap/scss/_reboot.scss:502:2: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in `& {}`. More info: https://sass-lang.com/d/mixed-decls 502 | font-weight: $legend-font-weight; node_modules/bootstrap/scss/_reboot.scss 503:3 @import node_modules/bootstrap/scss/bootstrap.scss 16:9 @import src/main/webapp/app/app.scss 4:9 root stylesheet WARNING in ./src/main/webapp/app/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/main/webapp/app/app.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Warning on line 503, column 2 of file:///Users/username/iosScreenLocker/node_modules/bootstrap/scss/_reboot.scss:503:2: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in `& {}`. More info: https://sass-lang.com/d/mixed-decls 503 | line-height: inherit; node_modules/bootstrap/scss/_reboot.scss 504:3 @import node_modules/bootstrap/scss/bootstrap.scss 16:9 @import src/main/webapp/app/app.scss 4:9 root stylesheet WARNING in ./src/main/webapp/app/app.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/main/webapp/app/app.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): 23 repetitive deprecation warnings omitted. Run in verbose mode to see all warnings. WARNING in ./src/main/webapp/app/shared/layout/header/header.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/main/webapp/app/shared/layout/header/header.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Warning on line 2, column 21 of file:///Users/username/iosScreenLocker/src/main/webapp/app/shared/layout/header/header.scss:2:21: darken() is deprecated. Suggestions: color.scale($color, $lightness: -20%) color.adjust($color, $lightness: -20%) More info: https://sass-lang.com/d/color-functions 2 | $header-color-hover: darken($header-color, 20%); src/main/webapp/app/shared/layout/header/header.scss 3:22 root stylesheet webpack 5.94.0 compiled with 12 warnings in 1455 ms (node:57514) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead. (Use `node --trace-deprecation ...` to show where the warning was created) ```

Some of the front dependency issues are easily fixable, the following link demonstrates an example:

https://stackoverflow.com/questions/75453010/expo-json5-issue-why-is-npm-audit-fix-force-not-resolving-the-vulnerability

However, I went to the React JHipster library and found the issue does not exist there. I looked at this repository and it is also bug free. Seems like there is a version issue? For whatever reason, the React code generated on my end is buggy although the official react library is not.

Motivation for or Use Case

My original intension coming into JHipster is to have a stable (Ideally already production ready) web app running without much effort. Then I can just modify it to add the logic I really need, without worrying about the underlying structure like authentication. The warnings here are not Errors, but I am not confortable building on top of what seems like a unstable piece of software.

Debugging the front end and fixing dependency errors may be even more time consuming than writing one from scratch. If JHipster's intension is to save development time while not compromising quality, this seems like an important thing to fix.

That being said, I do not have much experience with full-stack development. If I'm just being silly, please let me know.

Reproduce the error

Java Version:

openjdk 17.0.12 2024-07-16
OpenJDK Runtime Environment Homebrew (build 17.0.12+0)
OpenJDK 64-Bit Server VM Homebrew (build 17.0.12+0, mixed mode, sharing)

Node Version:

v20.18.0

Npm Version:

10.8.2

TypeScript Version:

Version 5.5.4

Then create application with the following settings:

? What is the base name of your application? iosScreenLocker
? Which *type* of application would you like to create? Monolithic application (recommended for simple projects)
? What is your default Java package name? com.fengbojun.iosscreenlocker
? Would you like to use Maven or Gradle for building the backend? Maven
? Do you want to make it reactive with Spring WebFlux? No
? Which *type* of authentication would you like to use? JWT authentication (stateless, with a token)
? Besides JUnit, which testing frameworks would you like to use? 
? Which *type* of database would you like to use? SQL (H2, PostgreSQL, MySQL, MariaDB, Oracle, MSSQL)
? Which *production* database would you like to use? PostgreSQL
? Which *development* database would you like to use? H2 with disk-based persistence
? Which cache do you want to use? (Spring cache abstraction) Ehcache (local cache, for a single node)
? Do you want to use Hibernate 2nd level cache? Yes
? Which other technologies would you like to use? 
? Which *framework* would you like to use for the client? React
? Besides Jest/Vitest, which testing frameworks would you like to use? 
? Do you want to generate the admin UI? Yes
? Would you like to use a Bootswatch theme (https://bootswatch.com/)? Default JHipster
? Would you like to enable internationalization support? No
? Please choose the native language of the application English
? Please choose additional languages to install

Related issues

Dependency issues with React seems to be a recurring theme. There had been quite a few refactors but new issues still pop up now and then as versions upgrade...

17614
16527
11139

Suggest a Fix

Would it be possible to give specific versions for each language / framework? I feel like the error might be caused by bad versions of React or Node.

I'm sure the broken dependencies are sneaking in from somewhere, I'm just not sure which repos am I pulling from, and which ones are causing the error.

JHipster Version(s) & JHipster configuration

jhipster info output

Welcome to JHipster v8.7.1

Welcome to the JHipster Information Sub-Generator

```
ios-screen-locker@0.0.1-SNAPSHOT /Users/username/iosScreenLocker
└── generator-jhipster@8.7.1
```

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


.yo-rc.json file
{
  "generator-jhipster": {
    "applicationType": "monolith",
    "authenticationType": "jwt",
    "baseName": "iosScreenLocker",
    "buildTool": "maven",
    "cacheProvider": "ehcache",
    "clientFramework": "react",
    "clientTestFrameworks": [],
    "clientTheme": "none",
    "creationTimestamp": 1728873402503,
    "databaseType": "sql",
    "devDatabaseType": "h2Memory",
    "devServerPort": 9060,
    "enableHibernateCache": true,
    "enableSwaggerCodegen": false,
    "enableTranslation": true,
    "entities": [],
    "feignClient": null,
    "jhipsterVersion": "8.7.1",
    "languages": [
      "en"
    ],
    "messageBroker": false,
    "microfrontend": null,
    "microfrontends": [],
    "nativeLanguage": "en",
    "packageName": "com.username.iosscreenlocker",
    "prodDatabaseType": "postgresql",
    "reactive": false,
    "searchEngine": false,
    "serverPort": null,
    "serverSideOptions": [],
    "serviceDiscoveryType": false,
    "syncUserWithIdp": null,
    "testFrameworks": [],
    "websocket": false,
    "withAdminUi": true
  }
}



##### **Environment and Tools**

openjdk version "17.0.12" 2024-07-16
OpenJDK Runtime Environment Homebrew (build 17.0.12+0)
OpenJDK 64-Bit Server VM Homebrew (build 17.0.12+0, mixed mode, sharing)

git version 2.39.2 (Apple Git-143)

node: v20.18.0
npm: 10.8.2

Docker version 24.0.5, build ced0996

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


JDL entity definitions

The information is mandatory for bug reports. This will allow us to use automated tests and genarate the broken sample using jhipster from-issue command.

Browsers and Operating System

I am using a Macbook with M1 Chip on Chrome.

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

jhipster / generator-jhipster