Home > Enterprise >  React: create-react-app creates a "problem-filled" project
React: create-react-app creates a "problem-filled" project

Time:11-15

Explanation (Please read complete)

I started learning React and I'm an absolute beginner with it, and want to make the practical tutorial in the React page, coding a "tic-tac-toe" application.

But, when creating with:

npx create-react-app tic_tac_toe

Get the following output:

Creating a new React app in /path/to/my/project/tic_tac_toe.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1393 packages in 1m

Initialized a git repository.

Installing template dependencies using npm...

added 72 packages in 9s
Removing template package using npm...


removed 1 package, and audited 1465 packages in 7s

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created tic_tac_toe at /path/to/my/project/tic_tac_toe
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd tic_tac_toe
  npm start

Happy hacking!

Since it gives me this warning:

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

I run the command as instructed and get this output:

npm WARN using --force Recommended protections disabled.
npm WARN audit Updating react-scripts to 2.1.3, which is a SemVer major change.
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: This is probably built in to whatever tool you're using. If you still need it... idk
npm WARN deprecated [email protected]: please switch to a stable version
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

And an "Audit Report" with tons of logs of packages, where all records follow this structure:

#name of the module and version
#severity
#a link to a "https://github.com/advisories" and a label of a security problem
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
#path of the module with the problem
#dependencies

At the end of the report, this conclusion:

72 vulnerabilities (11 low, 20 moderate, 37 high, 4 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

And, obviously, it's just an infinite loop of "npm audit fix --force" where I can't get any solution.

What I Tried

Since "audit fix" didn't work, in my ignorance, tried updating:

sudo npm update

But alway get this 2 errors:

  1. code ERR_INVALID_ARG_TYPE: Always get it the first time running the update command.

    npm ERR! code ERR_INVALID_ARG_TYPE
    npm ERR! The "from" argument must be of type string. Received undefined
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /root/.npm/_logs/2022-11-14T00_45_19_331Z-debug-0.log
    
  2. code ENOTEMPTY: Get it with multiple dirs and "can be fixed" by renaming the dir as indicated, but there are many of them that require the same operation, so isn't a solution.

    npm ERR! code ENOTEMPTY
    npm ERR! syscall rename
    npm ERR! path /path/to/my/project/tic_tac_toe/node_modules/acorn-globals
    npm ERR! dest /path/to/my/project/tic_tac_toe/node_modules/.acorn-globals-WcMVK6xv
    npm ERR! errno -39
    npm ERR! ENOTEMPTY: directory not empty, rename '/path/to/my/project/tic_tac_toe/node_modules/acorn-globals' -> '/path/to/my/project/tic_tac_toe/node_modules/.acorn-globals-WcMVK6xv'
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /root/.npm/_logs/2022-11-14T00_46_31_581Z-debug-0.log
    

Any help it's welcome, thanks.

CodePudding user response:

Those "High Severity Vulnerabilities" can be completely ignored for your purposes.

Even for the vast majority of commercial projects, you wouldn't waste your time thinking about them.

Carry on as you were from right after you ran npx create-react-app ...!

Reference: https://overreacted.io/npm-audit-broken-by-design/

  • Related