webpack: syntax error with babel-loader

Question

I'm starting to learn react with a tutorial. But webpack is not working as expected.

So here is my simple webpack.conf.js file.

module.exports = { entry: "./app-client.js", output: { filename: "public/bundle.js" }, module: { loaders: [ { exclude: /(node_modules|app-server.js)/, loader: 'babel' } ] } };

Also I installed all the modules:

npm install -g webpack npm install webpack react babel-loader babel-core

But when running webpack, I got the following error message:

ERROR in ./app-client.js Module build failed: SyntaxError: app-client.js: Unexpected token (4:13) 2 | var APP = require('./components/APP'); 3 | > 4 | React.render(<APP />, document.getElementById('react-container')); | ^

In my understanding, babel-loader is supposed to take care of that. But it looks like it's not making the effort.

What am I missing?

I'd try another tutorial, perhaps this one twilio.com/blog/2015/08/… — elclanrs
– elclanrs, Commented Mar 3, 2016 at 2:16
I recommend to have a look at facebook.github.io/react/docs/getting-started.html . — Felix Kling
– Felix Kling, Commented Mar 3, 2016 at 3:13

rossipedia · Accepted Answer · 2016-03-03 03:13:58Z

Babel 6 doesn't do anything by itself. In order to properly process JSX, you need to have the following in your .babelrc file:

{ "presets": ["react"] }

Also, you need to make sure you install that preset using NPM:

$ npm install --save-dev babel-core react react-dom babel-preset-react

A good place to start is the official React getting started page

Also you can add preset parameter right in webpack.conf.js without .babelrc file using loader: 'babel?presets[]=react or query parameter option for loader.

Collectives™ on Stack Overflow

webpack: syntax error with babel-loader

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related