Arrow functions are not being transpiled in production

[gregblass]

I just launched my first production Rails app with webpacker. I wrote many of my JS functions using arrow notation, but then started getting errors being reported for users using IE11.

I assumed webpacker would handle this for me because it said 'ES6 with babel' under features on the readme.

I dove in a little bit to some of the issues on here, and one suggestion was to add import 'babel-polyfill' to app/javascript/packs/application.js - but that didn't seem to make any difference (unless I am doing something wrong).

In the meantime, I went back and converted all my arrow functions back to regular javascript functions since the code is in production, but I'd like to be able to use arrow functions in the future.

Is ES6 babel transpiling intended to work out of the box, or is there something I'm missing here that I need to do to get that to work? Furthermore, is there a gap in the documentation, or did I miss some key part?

[gauravtiwari]

@gregblass Could you paste the content of your .babelrc file, please?

Another way is to compile in ES5 mode by default, which was default behavior before but not anymore, now the compiler targets latest ECMA version 8, to change this:

// environment.js
const environment = require('./environment')

environment.plugins.get("UglifyJs").options.uglifyOptions.ecma = 5

module.exports = environment.toWebpackConfig()

[gregblass]

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%",
          "uglify": true
        },
        "useBuiltIns": true
      }
    ],
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

[gregblass]

@gauravtiwari Anything look wrong there?

[gauravtiwari]

@gregblass Sorry for the late response. Looks good to me - http://browserl.ist/?q=%3E+1%25

Do you have any special setup in environment.js? What version of webpacker is this?

[gregblass]

Oh I know, IE11 is barely used - except the use case for this software - its for car dealerships. Probably no other industry would have IE11 usage like this except maybe hospitals or something. The first day we launched, it was a dumpster fire of issues.

I haven't touched environment.js - looks like the default file there.

Here's my package.json file:

{ "name": "myapp", "private": true, "dependencies": { "@rails/webpacker": "^3.2.0", "babel-preset-react": "^6.24.1", "coffeescript": "1.12.7", "dialog-polyfill": "^0.4.9", "prop-types": "^15.6.0", "react": "^16.2.0", "react-dom": "^16.2.0" }, "devDependencies": { "webpack-dev-server": "^2.9.7" } }

[gauravtiwari]

Thanks. Are you using coffeescript or ES6 mainly?

[gauravtiwari]

Could you add this transformer to babelrc and recompile please? https://babeljs.io/docs/plugins/transform-es2015-arrow-functions/#installation

[gregblass]

No coffeescript. Just ES6.

Sure, I'll give this a try. Thanks for your help!

[gregblass]

Alright, I added it - but in development mode, in chrome, it's not transpiling it.

1. Does it only happen in production?
2. Does it only happen if the browser does not support it?

[gregblass]

I should probably read this, yeah? https://github.com/babel/babel/tree/master/packages/babel-preset-env

[gregblass]

So I just tried in development on IE11 using browser stack - no transpiling done. I'm guessing it will only happen in production? I'll test it out there.

[gregblass]

OK so can confirm, not transpiling the arrows still in production for IE11.

[gauravtiwari]

Right, I see - I will take a look at this tonight or tomorrow. Is it possible for you to make an example repo on github for me to check?

[gregblass]

No worries, I appreciate all your help thus far. I'm clearly missing something. I'll do more research and if I still can't get it going, I'll put together an example repo. I feel like you could just create a new rails app with webpacker enabled, and it just won't transpile by default?

[gauravtiwari]

Yep, that's what I am going to test.