This article is about fixing error when `npm audit` says I have a vulnerability in react-scripts!
  • 01-Feb-2023
Lightrun Team
Author Lightrun Team
Share
This article is about fixing error when `npm audit` says I have a vulnerability in react-scripts!

`npm audit` says I have a vulnerability in react-scripts! in Facebook Create React App

Lightrun Team
Lightrun Team
01-Feb-2023

Explanation of the problem

The npm audit functionality is not functional for front-end tooling, as it is not designed for this purpose. If a user believes they have discovered a real vulnerability in the react-scripts tool, they should report it immediately. If the user is unsure, they should not file a new issue and instead should respond to the existing thread.

Moving the “react-scripts” dependency from the “dependencies” section to the “devDependencies” section in the package.json file, and running “npm audit –production” instead of “npm audit” will resolve the warnings generated by npm audit. This is due to the fact that Create React App is a build tool and does not run as a Node application, making the majority of npm audit warnings false positives.

There have been instances where actual vulnerabilities have been reported and patches were released. However, users should only report a vulnerability if they understand the difference between a real vulnerability and a false positive. Running “npm install –no-audit” can suppress warnings, and it may be possible to try a different library version using Yarn’s resolutions or npm’s force-resolutions.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for `npm audit` says I have a vulnerability in react-scripts! in Facebook Create React App

To resolve the warnings generated by npm audit in Facebook Create React App regarding a potential vulnerability in react-scripts, the following steps can be taken:

  1. Open the package.json file.
  2. Move the “react-scripts” dependency from the “dependencies” section to the “devDependencies” section.
  3. Ensure that the command npm audit --production is run instead of npm audit.

This will resolve the warnings generated by npm audit. It is important to note that npm audit is not designed for front-end tooling and that the majority of warnings generated by npm audit are false positives. In case of real vulnerabilities, they should be reported and patches will be released if necessary.

Other popular problems with Facebook Create React App

Problem: npm audit warnings in react-scripts

When running npm audit, warnings may be generated regarding potential vulnerabilities in react-scripts, which is a build tool used in Facebook Create React App.

Solution:

The warnings generated by npm audit in this case can be resolved by moving the “react-scripts” dependency from the “dependencies” section to the “devDependencies” section in the package.json file, and then running npm audit --production instead of npm audit.

Problem: Inconsistent behavior between development and production environments

Facebook Create React App projects may encounter inconsistencies between the development and production environments, which can lead to unexpected behavior and errors.

Solution:

To resolve this issue, it is recommended to properly configure the development and production environments, and to test the application in both environments before deployment. The use of environment variables and the implementation of proper testing strategies can also help ensure consistent behavior between the development and production environments.

Problem: Slow build times

Build times for Facebook Create React App projects can become slow, which can negatively impact the development workflow and productivity.

Solution:

To resolve slow build times, various techniques can be employed, including optimizing the code, reducing the size of the asset files, and utilizing build caching. Additionally, updating the hardware and software to meet the recommended system requirements can also help improve build performance.

A brief introduction to Facebook Create React App

Facebook Create React App (CRA) is a build tool for React applications that abstracts away the complex configuration needed to build and run a React app. This enables developers to focus on writing code, while CRA takes care of the tooling and build process. CRA uses a default set of configurations that are optimized for modern React development, allowing developers to get up and running quickly without having to worry about managing the underlying build tooling.

CRA uses a monorepo structure, which is a single repository that contains all the code for a project. This enables developers to manage all their dependencies, libraries, and other resources in a single place, making it easier to maintain and scale their applications. Additionally, CRA uses a set of well-established tools and technologies, including Babel, Webpack, Jest, and ESLint, to provide a comprehensive and consistent development environment that is easy to use and maintain. With CRA, developers can focus on writing code, while the build tooling takes care of the rest, making it a popular choice for building high-quality React applications.

Most popular use cases for Facebook Create React App

  1. Creating and Developing React Applications Facebook Create React App (CRA) is a popular JavaScript-based development toolkit used for building and developing React applications. It provides a quick and easy setup process for developing and running a React project, allowing developers to focus on writing code and building their applications, without the need to worry about setting up and configuring the development environment.
  2. Automated Build and Development Process With Facebook CRA, the entire build and development process is automated, meaning that developers don’t need to worry about manual configuration of build tools and processes. CRA provides a command-line interface that simplifies the process of starting a new React project, as well as running and building the project.

Example Code Block:

npx create-react-app my-app
cd my-app
npm start

In the above code block, the first line creates a new React application using Facebook CRA, the second line changes the current directory to the newly created project folder, and the third line starts the development server.

  1. Access to Common Features and Utilities CRA provides a wide range of built-in features and utilities that make it easier for developers to focus on developing their applications. These features include:
  • A development server for running the application during development
  • A production-ready build process for creating a production-ready version of the application
  • Access to a range of common development tools and libraries, including React, React-DOM, and Babel.
  • Support for styling with CSS and preprocessors such as Sass and Less.
  • Integration with popular testing frameworks, such as Jest and Enzyme.
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.