Добавление состояния в мои настройки React вызывает "./src/Main.js Сборка модуля не удалась" - PullRequest
Новая
       0

Добавление состояния в мои настройки React вызывает "./src/Main.js Сборка модуля не удалась"

0 голосов
/ 12 января 2020

Я пытаюсь создать простое приложение React с несколькими компонентами Button.

Я надеюсь, что смогу добавить state в свое приложение без ошибок. Но как только я добавляю состояние в свое приложение, в консоли появляется следующая ошибка: 

SyntaxError: C:\Users\Roland\React_apps\calculator-project\src\Main.js: Support for the experimental syntax 'classProperties' isn't currently enabled (4:8):

[0m [90m 2 | [39m[0m
[0m [90m 3 | [39m[36mclass[39m [33mMain[39m [36mextends[39m [33mComponent[39m {[0m
[0m[31m[1m>[22m[39m[90m 4 | [39m    state [33m=[39m {[0m
[0m [90m   | [39m         [31m[1m^[22m[39m[0m
[0m [90m 5 | [39m       display[33m:[39m [32m"0"[39m[33m,[39m[0m
[0m [90m 6 | [39m       equation[33m:[39m [32m""[39m[0m
[0m [90m 7 | [39m   }[33m;[39m[0m

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
    at Object.raise

Я попытался запустить npm i @babel/plugin-proposal-class-properties --save-dev, чтобы установить предложенный пакет, но он ничего не изменил. Я также вошел в .babelr c и добавил: 

{
    "plugins": [
        "babel/plugin-proposal-class-properties"
    ]
}

Также не дал результата.

Я знаю, проверяя другие темы, что я должен опубликовать свой пакет . json: 

{
  "name": "calculator-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --hot --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/preset-env": "^7.7.7",
    "@babel/preset-react": "^7.7.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "style-loader": "^1.1.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

и webpack.config. js: 

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

Я попытался переделать приложение с помощью приложения Create React (в отличие от к моей текущей настройке, которая является кастомной), и ошибка там не появилась. Хотя мне действительно не нужно это решать, мне любопытно, что не так.

У кого-нибудь есть минутка, чтобы объяснить?

edit: Вот main.js актерская игра часть app.js: 

import React, { Component } from "react";

class Main extends Component {
    state = {
        display: "0",
        equation: ""
    };

    inputNum(e) {
        console.log(e.target.value);
    }

    render() {
        return (
            <div>
                <Button
                    value="/"
                    display="/"
                    class="button col-4 row-1"
                    // click={this.inputNum}
                >
                    /
                </Button>
                // ... more buttons ...
                <Button
                    value="."
                    display="."
                    class="button col-3 row-5"
                    click={this.inputNum}
                >
                    .
                </Button>
            </div>
        );
    }
}

const Button = props => (
    <button
        type="button"
        id={props.id}
        value={props.value}
        className={props.class}
        onClick={props.click}
    >
        {props.display}
    </button>
);

export default Main;

1 Ответ

1 голос
/ 12 января 2020

Возможно, просто опечатка в вашем .babelrc, я думаю, @ требуется. 

{
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}
...