Created new React app and message appeared says "babel-preset-react-app" is important

Question

I created a new React app using npx and and when I started the app using npm start a message appeared:

One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already in your node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which is not maintianed anymore. It is thus unlikely that this bug will ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies to work around this error. This will make this message go away.

What should I do?

Answer 1

npm install @babel/plugin-proposal-private-property-in-object --save-dev

npm stands for node package manager, and helps to manage all of the dependencies, or other code files, that the application you are building relies on. It keeps track of these in a file called package.json.

In package.json, dependencies and their versions are listed as the values for the keys "dependencies" and "devDependencies". The production build of your application will use "dependencies" but ignore "devDependencies", while the development build will use both.

If you would like to add a package to "devDependencies", you run:

npm install [package_name] --save-dev

where "--save-dev" tells npm this goes in "devDependencies". If you want to install for your production application, simply run:

 npm install [package_name]

You can read more about the difference between the two here, and information on other commands that interact with this concept here. If you would like to read about the difference between 'npx' and 'npm' read here. If you want to read about why Create React App is unsupported and why, read this comment here. To find a list of currently recommended frameworks for React, go here

Answer 2

No worries! I'll explain it in simple terms for you.

When you created your new React app using "npx," you received a message in Git Bash about a dependency issue. The message says that one of the dependencies, called "babel-preset-react-app," is using another package called "@babel/plugin-proposal-private-property-in-object" without properly declaring it in its list of dependencies. This could potentially cause problems in the future.

The reason it's currently working is that the "@babel/plugin-proposal-private-property-in-object" package happens to be already present in your "node_modules" folder for some other reasons.

However, the "babel-preset-react-app" is part of the "create-react-app" project, which is no longer maintained. Therefore, it's unlikely that this issue will be fixed in the future.

To avoid any potential issues, you can do the following:

Add "@babel/plugin-proposal-private-property-in-object" to your project's "devDependencies." DevDependencies are packages that are used during development but not required when running your app in a production environment. Regards Oshas