Javascript React、babel、webpack 不解析 jsx 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33509770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React, babel, webpack not parsing jsx code
提问by httpNick
webpack.config.js
webpack.config.js
module.exports = {
context: __dirname + "/app",
entry: {
javascript: "./app.js",
html: "./index.html",
},
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
filename: "app.js",
path: __dirname + "/dist",
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
},
],
},
}
package.json
包.json
{
"name": "react-webpack-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.0.15",
"babel-core": "^6.0.20",
"babel-loader": "^6.0.1",
"file-loader": "^0.8.4",
"webpack": "^1.12.2"
},
"dependencies": {
"react": "^0.14.2"
}
}
app/app.js
应用程序/app.js
import React from "react";
import Greeting from "./greeting";
React.render(
<Greeting name="World"/>,
document.body
);
I have seen the exact same questions after searching around, but none of the answers seemed to apply to me. I am getting the following error when running webpack:
四处搜索后，我看到了完全相同的问题，但似乎没有一个答案适用于我。运行时出现以下错误webpack：
ERROR in ./app.js
Module build failed: SyntaxError: path/to/project/react-webpack-project/app/app.js: Unexpected token (5:2)
错误在 ./app.js
模块构建失败：SyntaxError: path/to/project/react-webpack-project/app/app.js: Unexpected token (5:2)
React.render(
<Greeting name="World"/>,
document.body
);I am not sure why I am getting this error still. I am guessing it has something to do with my webpack.config.js file, but not 100% what the problem is.
我不确定为什么我仍然收到此错误。我猜它与我的 webpack.config.js 文件有关，但不是 100% 是问题所在。
采纳答案by dandel
First of all: if you are using React v^0.14, you should render your code using React-Dom. https://www.npmjs.com/package/react-dom
首先：如果你使用 React v^0.14，你应该使用 React-Dom 渲染你的代码。https://www.npmjs.com/package/react-dom
Second, this should resolve your problem: babel-loader jsx SyntaxError: Unexpected token
其次，这应该可以解决您的问题： babel-loader jsx SyntaxError: Unexpected token
回答by Abhinav Singi
You need to add presets to your babel-loader:
您需要向 babel-loader 添加预设：
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
presets: ['es2015', 'react']
},
回答by JESii
I'm currently using React 0.14.3. The ReactDOM solution did not work, nor did adding the babel presets into the webpack.config.js. Basically, those solutions appear to work only if you have a single loader defined, but I had both the babel-loader as well as the react-hot loader.
我目前正在使用 React 0.14.3。ReactDOM 解决方案不起作用，也没有将 babel 预设添加到 webpack.config.js 中。基本上，这些解决方案似乎只有在您定义了单个加载器时才有效，但我同时拥有 babel-loader 和 react-hot 加载器。
What DID work was to install the babel react presets module:
DID 的工作是安装 babel react 预设模块：
npm install babel-preset-react
and then create a .babelrc file in my project directory with the following:
然后在我的项目目录中创建一个 .babelrc 文件，内容如下：
{
"presets": ['react']
}
This is documented at http://babeljs.io/docs/plugins/preset-react/, as pointed to by Abhinav Singi
正如Abhinav Singi所指出的，这在http://babeljs.io/docs/plugins/preset-react/ 中有记录
回答by JoeTidee
For me the answer was to include the presets in the query block:
对我来说，答案是在查询块中包含预设：
query: {
presets: ['react', 'es2015']
}
回答by yussan
this is help me to solved that issue.
这有助于我解决这个问题。
create new file .babelrcon same directory webpack.config.js. Add this to .babelrc
.babelrc在同一目录 webpack.config.js 上创建新文件。将此添加到.babelrc
{
"stage": 2,
"env": {
"development": {
"plugins": [
"react-display-name",
"react-transform"
],
"extra": {
"react-transform": {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}
}
}
}
}
