React，babel，webpack不解析jsx代码。

24 浏览
0 Comments

React，babel，webpack不解析jsx代码。

webpack.config.js\n

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]",
      },
    ],
  },
}

\npackage.json\n{\n \"name\": \"react-webpack-project\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"author\": \"\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"babel\": \"^6.0.15\",\n \"babel-core\": \"^6.0.20\",\n \"babel-loader\": \"^6.0.1\",\n \"file-loader\": \"^0.8.4\",\n \"webpack\": \"^1.12.2\"\n },\n \"dependencies\": {\n \"react\": \"^0.14.2\"\n }\n}\n\napp/app.js\n

import React from "react";
import Greeting from "./greeting";
React.render(
  ,
  document.body
);

\n我在搜索中看到了完全相同的问题，但是没有一个答案适用于我。当我运行webpack时，我遇到了以下错误：\nERROR in ./app.js
\nModule build failed: SyntaxError: path/to/project/react-webpack-project/app/app.js: Unexpected token (5:2) \n

React.render(
  ,
  document.body
);

\n我不确定为什么仍然会出现这个错误。我猜这可能与我的webpack.config.js文件有关，但是我并不确定问题是什么。

0

3 答案

0 Comments

在使用React 0.14.3时，我尝试了使用ReactDOM和将babel presets添加到webpack.config.js文件中的方法，但都没有起作用。基本上，这些解决方案只在你只有一个loader定义时有效，但我同时使用了babel-loader和react-hot loader。

而实际起作用的是安装babel react presets模块：

npm install babel-preset-react

然后在项目目录中创建一个.babelrc文件，内容如下：

{

"presets": ['react']

}

这在http://babeljs.io/docs/plugins/preset-react/有详细说明，由Abhinav Singi指出。

我已经尝试了几个小时了，感谢这个方法解决了我的问题。

0
0 Comments

问题：React、Babel和Webpack无法解析JSX代码的原因及解决方法。

React v^0.14版本需要使用React-Dom进行代码渲染。

解决方法：

1. 安装React-Dom：

npm install react-dom

2. 使用React-Dom进行代码渲染。

问题：babel-loader jsx语法错误：意外的令牌。

解决方法：

参考链接：babel-loader jsx SyntaxError: Unexpected token

如果第二个链接无法解决问题，尝试使用低于6.0.0版本的Babel。

以上方法均无法解决问题时，可以寻找一个完整的Webpack/JSX/React Hello World示例作为参考。

0
0 Comments

问题出现的原因是因为在使用React、babel和webpack时，babel-loader没有配置正确的预设（presets）。解决方法是在babel-loader中添加正确的预设。

具体的解决方法如下所示：

首先，在webpack配置文件中，找到对应的babel-loader配置项，通常是一个对象。在该对象中添加一个名为presets的属性，属性值是一个数组，数组中包含需要的预设。例如，要同时支持ES2015和React，可以添加以下配置：

{
  test: /\.jsx?$/,
  exclude: /node_modules/,
  loader: "babel-loader",
  options: {
    presets: ['es2015', 'react']
  }
}

然后，保存配置文件并重新运行webpack。现在，babel-loader应该能正确地解析JSX代码了。

更多关于babel预设的信息可以在babel官方文档中找到。

通过以上的配置，问题应该能够得到解决。现在，你可以愉快地在React项目中使用JSX代码了。

0