babel loader not recognizing ES6 code in React app

Question

I am trying to setup webpack with a react application. In my case, I am not using create-react-app, so I am trying to setup things myself. I am seeing this error:

Not recognizing member declaration

and this:

Not recognizing ()=> syntax

This is what I have in package.json: 

  {
      "name": "testapp",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "webpack": "webpack"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.24.1",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0"
      }
    }

This is my webpack.config.js:

module.exports = {
    mode: 'development',
    context: __dirname,
    entry: './index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    }, 
    watch: true,
    module: {
        rules: [
            {
                test: /\.js$/, 
                exclude: /(node_modules)/, 
                use: {
                    loader: 'babel-loader', 
                    options: {
                        presets: ['babel-preset-env', 'babel-preset-react']
                    }
                }
            }
        ]

    }
}

And this is the code am using for my component:

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

class App extends React.Component {

    state = {
        posts: []
    }


    componentDidMount = () => {
        const posts = fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(data => alert(data))

    }

    render() {
        return (
            <div>this is home</div>    
        )
    }
}

export default App

I am still new to webpack and loaders, so any help is appreciated.

s1mpl3 · Accepted Answer · 2019-03-29 15:23:55Z

1

Change your code to

componentDidMount(){
        const posts = fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(data => alert(data))

}

answered Mar 29, 2019 at 15:23

s1mpl3

1,4741 gold badge10 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Over a year ago

But I'd like to also use the () => syntax for other functions. Also the other state = {} syntax doesn't work

Christopher McCormack · Accepted Answer · 2019-03-29 20:40:20Z

0

Try using babel class properties plugin.

answered Mar 29, 2019 at 20:40

Christopher McCormack

734 bronze badges

1 Comment

Dan Over a year ago

Thanks Christopher :)

Ted Fitzpatrick · Accepted Answer · 2019-03-29 16:48:07Z

0

babel etc needs to be devDependencies in your package.json. Try adding babel-polyfill to your dev dependencies.

edited Mar 29, 2019 at 16:48

answered Mar 29, 2019 at 15:18

Ted Fitzpatrick

9541 gold badge9 silver badges21 bronze badges

1 Comment

Ted Fitzpatrick Over a year ago

I just noticed that your package.json defines babel etc as "dependencies" but these are "devDependencies" ... dependencies get packaged to be used at client-side while devDependencies are only used during the transpilation process (generating your bundle(s))

Collectives™ on Stack Overflow

babel loader not recognizing ES6 code in React app

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related