Question

我尝试按照教程进行反应，探索这个框架的巨大可能性。

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

./public/app.jsx中的错误

模块构建失败：SyntaxError：意外字符＆＃39; ＆＃39;
   |   <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，没有什么花哨但显示你好：

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

我的网络包配置中是否有错误？

Answer 1

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

Webpack错误使用Babel加载器解析JSX文件

1 个答案: