0

enter image description here

Why babel-preset-env is not accepting arrow function ?

.babelrc configuration reference

{
    "presets": [
        "react",
        [
            "env",
            {
                "targets": {
                    "browsers": [
                        "last 2 versions",
                        "safari >= 7"
                    ]
                },
                "debug": true,
                "modules": "commonjs",
                "include": [
                    "transform-es2015-arrow-functions",
                    "es6.map"
                ],
                "exclude": [
                    "transform-regenerator",
                    "es6.set"
                ]
            }
        ]
    ],
    "plugins": [
        "transform-es2015-destructuring",
        "transform-object-rest-spread"
    ]
}

package.json

{
  "name": "myapp",
  "version": "0.1.0",
  "main": "index.js",
  "private": true,
  "dependencies": {
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "0.28.4",
    "file-loader": "0.11.2",
    "react": "^15.6.1",
    "react-datepicker": "^0.52.0",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "webpack": "3.5.1",
    "webpack-dev-server": "2.7.1",
    "webpack-node-externals": "^1.6.0"
  },
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "babel-plugin-transform-es2015-destructuring": "^6.23.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0"
  }
}

Answer : Fully Working .babelrc

{
    "presets": [
        "react",
        [
            "env",
            {
                "targets": {
                    "browsers": [
                        "last 2 versions",
                        "safari >= 7"
                    ]
                },
                "debug": true,
                "modules": "commonjs"
            }
        ]
    ],
    "plugins": [
        "transform-object-rest-spread",
        "transform-class-properties"
    ]
}
vijay
  • 10,276
  • 11
  • 64
  • 79
  • it could have been but i am not using `babel-preset-es2015` but using `babel-preset-env` – vijay Aug 21 '17 at 14:06
  • 1
    As you can see in the error message, the marker points to the `=`, not the arrow function (so it has nothing to do with arrow functions). `preset-env` explicitly says that it does not handle experimental (stage-x) features and **class fields**, which I assume you are using, are stage 3: *"It won’t include stage-x plugins. env will support all plugins in what we consider the latest version of JavaScript (by matching what we do in babel-preset-latest)."*. To be clear: you would get the same error if you used something like `hello = 42` instead of an arrow function. – Felix Kling Aug 21 '17 at 14:07
  • Why do you have `transform-es2015-arrow-functions` and `transform-es2015-destructuring` in your config if you are using `preset-env`? – Felix Kling Aug 21 '17 at 14:14
  • here [configuration reference](https://github.com/babel/babel-preset-env#include-and-exclude-specific-pluginsbuilt-ins) here they have specified... and on getting error about arrow function...did this – vijay Aug 21 '17 at 14:16
  • That's just an *example* for how to include or exclude specific transforms. You don't have to use that example (but you can of course, if that's what you want). – Felix Kling Aug 21 '17 at 14:18
  • ok,actually it makes sense .when i set `debug = true` it shows `transform-es2015-arrow-functions` 2 times ..thanks now removing include & exclude part....now it shows only 1 time ..but still that arrow function is killing the code – vijay Aug 21 '17 at 14:24
  • Please reread my first comment. The arrow function is not the problem. The duplicate explains what to do. It's basically the same problem as your [previous question](https://stackoverflow.com/q/45796082/218196): the preset does not cover experimental features such as object rest/spread and class fields. Those transforms you have to include yourself. Maybe reread the documentation of `preset-env` again and make sure you understand how transforms/features are categorized. – Felix Kling Aug 21 '17 at 14:25
  • SOLVED :1 : [babel-preset-env is adding feature to add stage-3 plugins](https://github.com/babel/babel-preset-env/pull/384) 2 : added plugin "transform-class-properties" 3 : updated question with fully working .babelrc – vijay Aug 21 '17 at 15:55

0 Answers0