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.

[SerzN1]

Hi . Looks like had the same situation . Try to use special preset "react-app" in .babelrc

{
  "presets": [
    "react-app",
    "stage-0"
  ],
  "plugins": []
}

[gauravtiwari]

Please try the latest RC, otherwise feel free to open a new issue with more details.

[gregblass]

Hey there! I just finally tried again as I figured 6 months would be enough time for this to work out of the box. I'm now using a fresh install of webpacker (4.0.2) - but my arrow functions are still not being transcribed in production.

What am I missing here?

[gregblass]

Let me take a step back actually. Is there any way to tell in production if my transpiling is working whatsoever? Also - if I am testing on MS Edge and selecting emulation -> IE9 (on VirtualBox). Would this trigger the transpiling?

Thank you in advance to anyone who can explain a little bit here. I'm obviously a complete newbie when it comes to webpack, webpacker, and babel :(

[jakeNiemiec]

We are fighting this dragon over here: #2109 (comment).

Can you post your environment.js, package.json, package-lock.json, babel.config.js and application.js to a https://gist.github.com in that issue?

[dimaShin]

Hi. Any chance this could be opened again as I don't see any solution here. or should I report new issue?
My babel.config if

{
    presets: [['@babel/preset-env', {
      targets: {
        browsers: '> 1%, last 2 versions',
        chrome: '41',
        firefox: '41',
        safari: '9',
        ios: '7',
        android: '4.1',
        ie: '11',
      },
    }], '@babel/preset-react', '@babel/preset-flow'],
    env: {
      development: {
        plugins: ['react-hot-loader/babel'],
      },
      production: {
        plugins: [
          '@babel/plugin-transform-react-constant-elements',
          '@babel/plugin-transform-react-inline-elements',
        ],
      },
      test: {
        plugins: ['istanbul'],
      },
    },
    plugins: [
      '@babel/plugin-transform-runtime',
      '@babel/plugin-syntax-dynamic-import',
      ['dynamic-import-node', { noInterop: true }],
      '@babel/plugin-syntax-import-meta',
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-json-strings',
      '@babel/plugin-proposal-function-sent',
      '@babel/plugin-proposal-export-namespace-from',
      '@babel/plugin-proposal-numeric-separator',
      '@babel/plugin-proposal-throw-expressions',
    ],
    sourceMaps: true,
  }

babel version is @7.4.5

[jakeNiemiec]

@dimaShin, please see #1418 (comment), make sure to additionally post the error you are encountering.

[dimaShin]

Hi @jakeNiemiec. Thank you for your response. Unfortunately I don't see how #2109 is related to my issue.
I'm facing the problem that arrow functions are left in the bundle even though I've put ie11 in the targets. So there is no any errors in the stdout, but application doesn't work in IE

[jakeNiemiec]

Unfortunately I don't see how #2109 is related to my issue. I'm facing the problem that arrow functions

The arrow functions just indicate that there is a wider problem that is preventing your babel from running. The other issue can help troubleshoot your issue, but I was really pointing to this part of the comment:

Can you post your environment.js, package.json, package-lock.json, babel.config.js and application.js to a https://gist.github.com in that issue?

Edit: Is that your entire babel.config.js file? It looks like you are missing parts. You might have missed a step from https://github.com/rails/webpacker/blob/master/docs/v4-upgrade.md#webpacker-upgrade-guide