Unexpected token error with react preset already given

Question

I am getting unexpected token error with presets already given for react and es2015 in webpack.config.js ERROR in ./components/App.component.js i tried it with every combination of presets

Module parse failed: /home/krishna/AndroidStudioProjects/jancan/web/components/App.component.js Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:2)
    at Parser.pp$4.raise (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseParenAndDistinguishExpression (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1861:32)
    at Parser.pp$3.parseExprAtom (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1796:19)
    at Parser.pp$3.parseExprSubscripts (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseFunctionBody (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:2098:24)
    at Parser.pp$3.parseArrowExpression (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:2087:10)
    at Parser.pp$3.parseParenArrowList (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1902:17)
    at Parser.pp$3.parseParenAndDistinguishExpression (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1870:21)
    at Parser.pp$3.parseExprAtom (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1796:19)
    at Parser.pp$3.parseExprSubscripts (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$1.parseVar (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:1034:28)
    at Parser.pp$1.parseVarStatement (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:917:10)
    at Parser.pp$1.parseStatement (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:706:19)
    at Parser.pp$1.parseTopLevel (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/krishna/AndroidStudioProjects/jancan/web/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
 @ multi main

This is App.component.js

    import React from 'react';
    import ReactDOM from 'react-dom';

    var App = () => (
        <h1>Hello World</h1>
    );

    ReactDOM.render(
        <App/>,
        document.getElementById('app')
    );

Edit

webpack.config.js that was asked in comments it doesnt transform jsx code i use a babel-polyfill . I have used babel es2015 and react preset and i save code as .js

module.exports = {
    entry: ['babel-polyfill', './components/App.component.js'],
    output: {
        path: 'dist/',
        filename: "bundle.js"
    },
    loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components|dis)/,
      loader: 'babel', // 'babel-loader' is also a valid name to reference
      presets: ['react']
    }
  ]

};

Can you please post your webpack config file? This error usually means you are missing a necessary loader in your config but wont know for sure wahts going on until we can see that — finalfreq

Krishna Satya Krishna Satya · Accepted Answer · 2016-10-12T00:55:48

0

votes

I found the answer loaders should be inside a module object

Unexpected token error with react preset already given

1 Answers