问题:

I am new to React and Webpack. I am setting up my first project, when I try to run the webpack-dev-server my code does not compile!

Update Answer below is correct. I needed to add 'react' to babel loader presets. You can see the full source for project here: https://github.com/cleechtech/redux-todo

Error:

$ webpack-dev-server              http://localhost:8080/webpack-dev-server/ webpack result is served from / content is served from ./dist Hash: d437a155a1da4cdfeeeb Version: webpack 1.12.14 Time: 5938ms     Asset     Size  Chunks             Chunk Names bundle.js  1.51 kB       0  [emitted]  main chunk    {0} bundle.js (main) 28 bytes [rendered]     [0] multi main 28 bytes {0} [built] [1 error]  ERROR in ./src/index.js Module build failed: SyntaxError: /Users/connorleech/Projects/redux-todo/src/index.js: Unexpected token (7:16) console.log(ReactDOM);  ReactDOM.render(<App />,document.getElementById('root'));

src/index.js:

var react = require('react'); var ReactDOM = require('react-dom'); var App = require('./components/App');  console.log(ReactDOM);  ReactDOM.render(<App />,document.getElementById('root'));

src/components/App.js

var React = require('react');  var App = React.createClass({   render: function() {     return (         <div>             <h1>I am app!</h1>         </div>     );   } });  console.log(App);  module.exports = App;

dist/index.html

<!doctype html> <head>     <title>Redux todo</title> </head> <body>     <h1>Hello world</h1>      <div id='root'></div>     <script src='bundle.js'></script> </body>

And finally here is my webpack config and package.json:

module.exports = {   // starting point   entry: [     './src/index.js'   ],   module: {     loaders: [       {         test: /\.js?$/,         exclude: /(node_modules|bower_components)/,         loader: 'babel', // 'babel-loader' is also a legal name to reference         query: {           presets: ['es2015']         }       }     ]   },   resolve: {     extensions: ['', '.js', '.jsx']   },   // create bundle.js file   output: {     path: __dirname + '/dist',     publicPath: '/',     filename: 'bundle.js'   },   devServer: {     contentBase: './dist'   } };

package.json

{   "name": "redux-todo",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "repository": {     "type": "git",     "url": "git+https://github.com/cleechtech/redux-todo.git"   },   "keywords": [],   "author": "",   "license": "ISC",   "bugs": {     "url": "https://github.com/cleechtech/redux-todo/issues"   },   "homepage": "https://github.com/cleechtech/redux-todo#readme",   "dependencies": {     "react": "^0.14.8",     "react-dom": "^0.14.8",     "react-redux": "^4.4.1",     "redux": "^3.3.1"   },   "devDependencies": {     "babel-core": "^6.7.4",     "babel-loader": "^6.2.4",     "babel-preset-es2015": "^6.6.0",     "webpack": "^1.12.14"   } }

回答1:

You also need to add the react preset into your babel-loader config

And it must come after the es2015

  {     test: /\.js?$/,     exclude: /(node_modules|bower_components)/,     loader: 'babel', // 'babel-loader' is also a legal name to reference     query: {       presets: ['es2015', 'react']     }   }

The problem you're experiencing happens because for babel to know how to transpile JSX - it should know its syntax, which it does not out of the box.

As it was mentioned in the comments - you would also have to install the babel-preset-react npm package (which would obvious anyway since the babel would tell it to you on the first run anyway).

References:

https://babeljs.io/docs/plugins/preset-react/

转载请标明出处:Webpack and React ― Unexpected token

文章来源: Webpack and React ― Unexpected token

标签

react

Webpack

webpack中文

babel