Babel : As of v7.0.0-beta.55, we've removed Babel's Stage presets - babeljs

Question

I'm trying to create a build for this project but I've faced this issue with babel :
Error: [BABEL] D:\open-source\React\react-notify\src\components\Notification\Action\index.js:
As of v7.0.0-beta.55, we've removed Babel's Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it's more beneficial in the
long run to explicitly add which proposals to use.
For a more automatic migration, we have updated babel-upgrade,
https://github.com/babel/babel-upgrade to do this for you with
"npx babel-upgrade".
If you want the same configuration as before:
{
"plugins": [
// Stage 2
["#babel/plugin-proposal-decorators", { "legacy": true }],
"#babel/plugin-proposal-function-sent",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-numeric-separator",
"#babel/plugin-proposal-throw-expressions",
// Stage 3
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
["#babel/plugin-proposal-class-properties", { "loose": false }],
"#babel/plugin-proposal-json-strings"
]
}
If you're using the same configuration across many separate projects,
keep in mind that you can also create your own custom presets with
whichever plugins and presets you're looking to use.
module.exports = function() {
return {
plugins: [
require("#babel/plugin-syntax-dynamic-import"),
[require("#babel/plugin-proposal-decorators"), { "legacy": true }],
[require("#babel/plugin-proposal-class-properties"), { "loose": false }],
],
presets: [
// ...
],
};
};
my package.json:
{
"name": "react-notify",
"version": "0.1.0",
"description": "Push notification component for React",
"main": "dist/index.js",
"module": "dist/index.js",
"babel": {
"presets": [
"#babel/react",
"#babel/env",
"#babel/stage-2"
]
},
"license": "MIT",
"dependencies": {
"#babel/runtime": "^7.11.2",
"#fortawesome/fontawesome-svg-core": "^1.2.30",
"#fortawesome/free-brands-svg-icons": "^5.14.0",
"#fortawesome/free-solid-svg-icons": "^5.14.0",
"#fortawesome/react-fontawesome": "^0.1.11",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"styled-components": "^5.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components/Notification --out-dir dist --copy-files",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"resolutions": {
"styled-components": "^5"
},
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"#babel/preset-stage-2": "^7.8.3",
"#storybook/addon-actions": "^6.0.21",
"#storybook/addon-essentials": "^6.0.21",
"#storybook/addon-links": "^6.0.21",
"#storybook/node-logger": "^6.0.21",
"#storybook/preset-create-react-app": "^3.1.4",
"#storybook/react": "^6.0.21",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.4",
"enzyme-to-json": "^3.5.0",
"react-addons-test-utils": "^15.6.2",
"react-is": "^16.13.1",
"react-test-renderer": "^16.13.1"
}
}
I tried :
npx babel-upgrade
But still facing the same issue.
My Action/index.js:
import React, { useContext } from "react"
import PropTypes from "prop-types"
import { Button, Wrapper } from "./Styled"
import Context from "../context"
const Action = ({ name, onClick }) => {
const { type } = useContext(Context);
if (!(typeof onClick === "function")) {
throw new Error("Action event should be a function")
}
return (< Wrapper >
<Button type={type} onClick={onClick}>{name}</Button>
</Wrapper >)
}
Action.propTypes = {
name: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired
}
export default Action

Answer 1

Why I faced this issue?
Babel had stopped supporting Stage Presets in the configuration. Read this article.
How to solve the issue?
By running this command :
npx babel-upgrade
Then:
npm install
This will replace the legacy dependencies with :
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
}
And replace the configuration with :
"babel": {
"presets": [
"#babel/react",
"#babel/env"
]
},