[英]Rails Webpacker and stage-2 class transform properties not working
I'm trying out Webpacker on a new Rails application to get familiar with it and I can't get it to compile my javascript code. 我正在尝试使用新的Rails应用程序上的Webpacker来熟悉它,我无法编译我的javascript代码。
Here's the code: 这是代码:
import React, { Component, PropTypes } from 'react'
import DayPicker, { DateUtils } from 'react-day-picker'
import 'react-day-picker/lib/style.css'
export default class Example extends Component {
constructor(props) {
super(props)
this.state = {
selectedDays: []
}
}
handleDayClick = (day, selected) => {
console.log(day)
}
render() {
return (
<p>Test</p>
)
}
}
20:05:21 hot.1 | ERROR in ./app/javascript/packs/components/example/example.jsx
20:05:21 hot.1 | Module build failed: SyntaxError: Missing class properties transform.
20:05:21 hot.1 |
20:05:21 hot.1 | 11 | }
20:05:21 hot.1 | 12 |
20:05:21 hot.1 | > 13 | handleDayClick = (day, selected) => {
20:05:21 hot.1 | | ^
This is on a brand new Rails app using the latest Webpacker gem from github. 这是一个全新的Rails应用程序,使用来自github的最新Webpacker gem。
My .babelrc
: 我的
.babelrc
:
{
"presets": ["env", "es2015", "react", "stage-2"]
}
My devDependencies are: 我的devDependencies是:
"devDependencies": {
"babel-preset-es2015": "^6.24.0",
"babel-preset-stage-2": "^6.22.0",
"webpack-dev-server": "^2.4.2"
}
According to this Babel REPL link, this should be working. 根据这个Babel REPL链接,这应该是有效的。 https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&experimental=true&loose=false&spec=false&code=class%20PostInfo%20extends%20React.Component%20%7B%0A%09handleOptionsButtonClick%20%3D%20(e)%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7BshowOptionsModal%3A%20true%7D)%3B%0A%20%20%7D%0A%7D
https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&experimental=true&loose=false&spec=false&code=class%20PostInfo%20extends%20React.Component% 20%7B%0A%09handleOptionsButtonClick%20%3D%图20(e)%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7BshowOptionsModal%3A%20true%7D)%3B %0A%20%20%7D%0A%7D
Any ideas? 有任何想法吗?
To fix, I had to add the presets to the individual loader files, specifically. 为了解决这个问题,我必须将预设添加到各个加载器文件中。
// config/webpack/loaders/babel.js
module.exports = {
test: /\.js(\.erb)?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
'es2015',
'stage-2'
]
}
}
// config/webpack/loaders/react.js
module.exports = {
test: /\.(js|jsx)?(\.erb)?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
'es2015',
'react',
'stage-2'
]
}
}
Now I can use the nice shorthand arrow class functions. 现在我可以使用漂亮的速记箭头类函数。
Your comment was most illuminating: this is a method declaration in a class; 你的评论最有启发性:这是一个类中的方法声明; there should be no equal sign or fat arrow.
应该没有等号或胖箭。 This is how it should look:
它应该是这样的:
handleDayClick (day, selected) {
console.log(day)
}
Take a look at how the constructor
and render
methods look; 看一下
constructor
和render
方法的外观; that's how all methods in a react component look. 这就是反应组件中所有方法的外观。
D'oh! D'哦!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.