Невозможно получить функции стрелок для работы (React, Babel, Webpack, ES6)

Отчаянно надеясь, что я найду кого-нибудь, кто может понять, почему я не могу получить функции стрелок для работы с моей настройкой Webpack/Babel, пробовал кучу вещей, и до сих пор ничего не работало. Текущее состояние проекта:Невозможно получить функции стрелок для работы (React, Babel, Webpack, ES6)

Package.json:

{ 
    "name": "..", 
    "version": "1.0.0", 
    "description": "..", 
    "main": "app.jsx", 
    "author": "..", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.22.1", 
    "babel-loader": "^6.2.10", 
    "babel-plugin-transform-class-properties": "^6.22.0", 
    "babel-plugin-transform-react-jsx": "^6.22.0", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.22.0", 
    "babel-preset-stage-2": "^6.22.0", 
    "css-loader": "^0.26.1", 
    "node-sass": "^4.5.0", 
    "sass-loader": "^4.1.1", 
    "style-loader": "^0.13.1", 
    "webpack": "^2.2.1", 
    "webpack-dev-server": "^2.3.0" 
    }, 
    "dependencies": { 
    "lodash": "^4.17.4", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-router": "^3.0.2" 
    } 
}

webpack.config.js:

var path = require('path'); 

module.exports = { 
    entry: './src/router.jsx', 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'public') 
    }, 
    watch: true, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx$/, 
     exclude: /(node_modules)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015'] 
     } 
     }, 
     { 
     test: /\.scss$/, 
     loader: 'style-loader!css-loader!sass-loader' 
     }, 
    ] 
    } 
};

.babelrc

{ 
    "plugins": [ 
    "transform-react-jsx", 
    "transform-class-properties" 
    ], 
    "presets": [ 
    "es2015", 
    "react", 
    "stage-2" 
    ], 
}

Компонент:

import React from 'react' 

import './styles.scss' 

class Button extends React.Component { 
    asdf =() => { 
    return ['btn', this.props.size].join(' ') 
    } 

    render() { 
    return (
     <button className={this.asdf}> 
     {this.props.children} 
     </button> 
    ) 
    } 
} 

export default Button

Ошибка:

ERROR in ./src/app/ui-kit/button.jsx 
Module build failed: SyntaxError: Missing class properties transform. 

    4 | 
    5 | class Button extends React.Component { 
> 6 | asdf =() => { 
    | ^
    7 |  return ['btn', this.props.size].join(' ') 
    8 | } 
    9 | 

@ ./src/app/components/signup.jsx 13:14-45 
@ ./src/app/app.jsx 
@ ./src/router.jsx

источник

2017-02-04 Carl

Я думаю, что 'babel-preset-state-0' может помочь. Включите это в предварительные настройки webpack. И вам не нужны пресеты в файле babelrc, если вы использовали их в конфигурации webpack. Попробуйте это и дайте мне знать, если это поможет –

Спасибо @ShubhamKhatri, babel-preset-state-0 сделал это! – Carl

Checkout мои Бабель пакеты и .babelrc работает в моем текущем проекте и сравнить с вашими:

.babelrc:

{ 
    "presets": ["react", "es2015" , "stage-0"], 
    "plugins": [ 
    ["transform-decorators-legacy"] 
    ]  
}

packages.json

"babel-core": "^6.4.5", 
"babel-eslint": "^6.1.2", 
"babel-loader": "^6.2.1", 
"babel-plugin-react-transform": "^2.0.0", 
"babel-plugin-transform-decorators-legacy": "^1.3.4", 
"babel-polyfill": "^6.3.14", 
"babel-preset-es2015": "^6.3.13", 
"babel-preset-react": "^6.3.13", 
"babel-preset-react-hmre": "^1.0.1", 
"babel-preset-stage-0": "^6.3.13",

источник

2017-02-05 10:33:57

Спасибо! Смена сцены с 2 по 0 сделала. – Carl

Невозможно получить функции стрелок для работы (React, Babel, Webpack, ES6)

ответ

Смежные вопросы