Почему babel не хочет компилить es-6 код??

Question

[AlexKindGeek]

Всем привет. Учусь самостоятельно настраивать react проект с помощью webpack.
Установил все нужные пакеты. Прописал конфиг файл для webpack, babel.

Webpack

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    devtool: "cheap-module-source-map",
    entry: [
        "./src/js/index"
    ],
    output: {
        path: path.join(__dirname, "dist/js"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: "/node_modules",
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

package.json

{
  "name": "movie-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --mode development --hot",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }
}

.babelrc

{
  "presets": ["env", "react"]
}

Создал компонент реакта, запускаю билд и мне в консоль вываливается след. ошибка


Я не понимаю почему babel не может перекомпилировать ES6?

P.S Знаю что можно установить отдельный preset для стреллочных ф-ций, но мне интересно почему оно сейчас не работает.
Использую babel-preset-env потому какbabel-preset-es2015 deprecated

Answer 1

[Антон Спирин]

class properties - это экспериментальный синтаксис.
babel-preset-stage-0 установите.
npm i -S babel-preset-stage-0
.babelrc:

{
  "presets": ["env", "react", "stage-0"]
}

Comments

[AlexKindGeek]

Кстати не знал что последовательность обязательна)
Прописал

{
  "presets": ["react", "stage-0", "env"]
}

не работало)

[Антон Спирин]

AlexKindGeek, sass-loader. Советую пару статей свежих посмотреть о том, как с ним работать.
Сам давно использую styled-components - очень хорошо эта библиотека себя показала в крупных проектах. Но это css-in-js.

[AlexKindGeek]

Антон Спирин, Почти во всех случаях использую material-UI и нету необходимости много стилей писать. Также пробовал styled-components, неплох. Планирую его также в проекты включать понемногу.

Но это css-in-js.

И что?)
Это же круто)

[AlexKindGeek]

Антон Спирин, А вы используете Flow или Typescript в своих проектах??

[Антон Спирин]

AlexKindGeek, есть опыт и Flow и TypeScript. В текущем используем TypeScript. Без статической типизации большие проекты лучше даже не начинать.