Блог

Я пытаюсь создать сборку для этого проекта, но я столкнулся с этой проблемой с babel :

 Error: [BABEL] D:open-sourceReactreact-notifysrccomponentsNotificationActionindex.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: [
      // ...
    ],
  };
};
  

мой 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 amp;amp; rm -rf dist amp;amp; mkdir dist amp;amp; 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"
    }
}
  

Я пытался :

 npx babel-upgrade
  

Но все еще сталкиваемся с той же проблемой.

Мой 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
  

Почему я столкнулся с этой проблемой?

Babel перестал поддерживаться Stage Presets в конфигурации. Прочитайте эту статью.

Как решить проблему?

Выполнив эту команду :

     npx babel-upgrade
  

Затем:

    npm install
  

Это заменит устаревшие зависимости на :

 "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", 
}
  

И заменили конфигурацию на :

    "babel": {
    "presets": [
        "@babel/react",
        "@babel/env"
    ]
},