Webpack 使用 Babel loader 解析 JSX 文件时出错答案

【问题标题】：Webpack error parsing JSX file using Babel loaderWebpack 使用 Babel loader 解析 JSX 文件时出错
【发布时间】：2017-06-09 11:55:01
【问题描述】：

我尝试按照教程来完成 React 工作并探索这个框架的巨大可能性。

但是在运行 webpack 来捆绑我的 react 应用程序时，我遇到了一个错误：

./public/app.jsx 中的错误

模块构建失败：SyntaxError: Unexpected character ' '
   |   <Greeter></Greeter>,
   |   document.getElementById('app')
>  | );
   |   ^
   |

这是webpack.config.js 文件：

module.exports = {
  entry: './public/app.jsx',
  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        query: {
          presets:['react', 'es2015']
        },
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/
      }
    ]
  }
};

我的文件是一个简单的 JSX，除了显示 hello 没什么花哨的：

var React = require('react');
var ReactDOM = require('react-dom');

var Greeter = React.createClass({

  // Render view
  render: function () {
    return (
      <div>
        Hello {/* Pass the function to child component */}
      </div>
    );
  }
});

let displayName = 'Galaxy';
ReactDOM.render(
  <Greeter></Greeter>,
  document.getElementById('app')
);

我的 package.json 文件包含依赖项：

"dependencies": {
    "express": "^4.14.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "webpack": "^1.14.0"
  }

我的 webpack 配置有错误吗？

【问题讨论】：

如果您从extensions 数组中删除''，您会得到同样的错误吗？此外，错误中的代码与您给出的代码示例不匹配。
抱歉复制/粘贴错误代码。在没有'' 的情况下尝试过，仍然是同样的问题。
明白了。你能试着用它做一行吗？可能是您错误粘贴的隐形字符。ReactDOM.render(<Greeter></Greeter>,document.getElementById('app'));
天啊......它的工作原理。我在 Debian 上使用 Atom，它似乎将不需要的字符放在任何地方。它把我的 package.json 搞砸了好几次，我没想到。

标签： webpack babeljs

【解决方案1】：

Webpack 无法解析意外字符 ' '。您可能复制了一些包含在编辑器中不可见的字符的代码。

【讨论】：

如上评论所述，在 Debian 上使用 Atom 会使 Atom 创建不需要的不可见字符。谢谢提示。