You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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...
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.
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)
The text was updated successfully, but these errors were encountered:
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.
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
Warning on Npm Audit
Warning on Npm Start
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:
Node Version:
Npm Version:
TypeScript Version:
Then create application with the following settings:
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...
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
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.
The text was updated successfully, but these errors were encountered: