React + Webpack + babel7 fails to parse es6 style function assignment

Question

I am learning React (udemy course). And I fell into a rabbit hole trying to upgrade my class project to use ES6 style function declaration and assignment. And yes, I've tried to find a similar question posted, but haven't found anything that worked.

Here is my package.json:

    {
  "name": "redux-simple-starter",
  "version": "1.0.0",
  "description": "Simple starter package for Redux with React and Babel support",
  "main": "index.js",
  "repository": "[email protected]:StephenGrider/ReduxSimpleStarter.git",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch",
    "build": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "webpack": "^2.7.0",
    "webpack-dev-server": "^1.16.5"
  },
  "dependencies": {
    "lodash": "^3.10.1",
    "react": "16.3.2",
    "react-dom": "16.3.2",
    "react-redux": "5.0.7",
    "redux": "4.0.0",
    "yarn": "^1.10.1",
    "youtube-api-search": "0.0.5"
  }
}

and my .babelrc file:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

also my webpack.config.js:

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ["@babel/preset-env","@babel/preset-react"]
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    }
  }
};

The main index.js file looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';

const API_KEY = 'xxx';

const App = function() {
  return (
    <div>
      <SearchBar />
    </div>
  );
}
ReactDOM.render(
  <App />, document.querySelector('.container'));

And finally, the search_bar.js file looks like this:

import React from 'react';

const SearchBar = () ==> {
  return <input />;
}

export default SearchBar;

I've done the npm install, etc, but when I go to run the app using npm start, I get an error:

ERROR in ./src/components/search_bar.js Module build failed: SyntaxError: /Users/xxxxx/ReactProjects/ReduxSimpleStarter/src/components/search_bar.js: Unexpected token (3:19)

1 | import React from 'react'; 2 |

3 | const SearchBar = () ==> { | ^ 4 | return ; 5 | } 6 | at _class.raise (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:3939:15) at _class.unexpected (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:5248:16) at _class.parseParenAndDistinguishExpression (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:6509:12) at _class.parseExprAtom (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:6284:21) at _class.parseExprAtom (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:3635:52) at _class.parseExprSubscripts (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:5924:21) at _class.parseMaybeUnary (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:5903:21) at _class.parseExprOps (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:5812:21) at _class.parseMaybeConditional (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:5784:21) at _class.parseMaybeAssign (/Users/xxxxx/ReactProjects/ReduxSimpleStarter/node_modules/@babel/parser/lib/index.js:5731:21) @ ./src/index.js 3:0-48 @ multi ./src/index.js webpack: Failed to compile.

Can anyone help explain what is going wrong here and why it won't work? Thanks.

Asaf Aviv Asaf Aviv · Accepted Answer · 2018-10-26T08:16:55

0

votes

You have double = in const SearchBar = () ==>

React + Webpack + babel7 fails to parse es6 style function assignment

1 Answers