[英]Webpack module build failed unexpected token (rails react build)
I working on a react/rails build and working through using webpack and babel for the first time. 我正在进行react / rails构建,并首次使用webpack和babel。 I'm using two files and getting the error :
我正在使用两个文件并收到错误 :
ERROR in ./app/assets/frontend/main.jsx
错误在./app/assets/frontend/main.jsx中
Module build failed:模块构建失败:
SyntaxError: /Users/cls/GitHub/rails_react/app/assets/frontend/main.jsx: Unexpected token (6:6)SyntaxError:/Users/cls/GitHub/rails_react/app/assets/frontend/main.jsx:意外的令牌(6:6)
Line 6 is: <Greet />
第6行是:
<Greet />
This is the main.jsx file 这是main.jsx文件
import Greet from './greet';
class Main extends React.Component {
render() {
return (
<Greet />
);
}
}
let documentReady = () => {
React.render(
<Main />,
document.getElementById('react')
);
};
$(documentReady);
This is the greet.jsx file: 这是greet.jsx文件:
export default class Greet extends React.Component {
render() {
return <h2>Hello There</h2>
}
}
This is my webpack.config: 这是我的webpack.config:
module.exports = { entry: "./app/assets/frontend/main.jsx", output: { path: __dirname + "/app/assets/javascripts", filename: "bundle.js" }, resolve: { extensions: ['', '.js', '.jsx'] }, module: { loaders: [ { test: /\\.jsx$/, loader: "babel-loader" } ] } };
I don't have a babelrc file? 我没有babelrc文件?
First make sure to install react, babble and other dependencies in your solution using 首先确保使用解决方案在您的解决方案中安装react,babble和其他依赖项
npm install react --save
then in the web pack config file please include presets
in the query
similar to below: 然后在web pack配置文件中请在
query
包含类似于下面的presets
:
module.exports = {
entry: 'main.jsx',
output: {
// Output the bundled file.
path: './src',
// Use the name specified in the entry key as name for the bundle file.
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react']
}
}]
},
externals: {
// Don't bundle the 'react' npm package with the component.
'react': 'React'
},
resolve: {
// Include empty string '' to resolve files by their explicit extension
// (e.g. require('./somefile.ext')).
// Include '.js', '.jsx' to resolve files by these implicit extensions
// (e.g. require('underscore')).
extensions: ['', '.js', '.jsx']
}
};
So with all the feedback given I was able to figure it out. 所以在给出所有反馈的情况下,我能够弄明白。 Thank you to everyone who answered.
谢谢所有回答的人。
Here is what I needed to do: 这是我需要做的:
npm install babel-preset-es2015
npm install babel-preset-react
And create a .babelrc file ( thank you to azium and Kreozot ) 并创建一个.babelrc文件( 感谢azium和Kreozot )
`{ "presets": [ "react", "es2015" ] }`
I think we are watching same course 'React.js on Rails: Building a Full Stack Web App' by Samer Buna 我想我们正在看Samer Buna的“Ract上的React.js:构建一个完整的堆栈Web应用程序”
To solve the problem i installed this modules: 为了解决这个问题我安装了这个模块:
npm install react --save
npm install babel-preset-es2015
npm install babel-preset-react
And i am using this configuration https://jsfiddle.net/daronwolff/11tgotvz/ 我正在使用此配置https://jsfiddle.net/daronwolff/11tgotvz/
Thanks to @milad-rezazadeh and @chrissavage 感谢@ milad-rezazadeh和@chrissavage
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.