[React] Deprecated Libraries & Vulnerabilities

[Bojun-Feng]

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 [email protected]: 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 [email protected]: Use your platform's native atob() and btoa() methods instead
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: Use your platform's native DOMException instead
npm warn deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
npm warn deprecated [email protected]: 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 [email protected], 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 [email protected], 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...

• Building (also a completely new) React based jhipster application is failing #17614
• React JHipster lib: currently broken #16527
• React compile error on new project #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
[email protected] /Users/username/iosScreenLocker
└── [email protected]

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.

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

[mshima]

Issue 1 and 2: To fix those warnings every dependency of dependency of dependency and so one must have every dependency updated. It's impossible to control and will probably always happen.

Issue 3: fixed in main by downgrading sass dependency.