question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No way to force Babel to transpile arrow functions?

See original GitHub issue

Bug Report

  • I would like to work on a fix! (Unless there’s already an existing solution)

Current behavior My organization works with a code base that does not support Internet Explorer, therefore we don’t supply an ie target in our browserlist. However, some of our 3d party dependencies rely on Babel transforms that are seemingly only performed when targeting ie >= 11, specifically the transform-arrow-functions transform.

We’re using @babel/preset-env, and I’ve tried various methods of forcing Babel to perform the transform-arrow-functions transform, to no avail.

  • using include: ['@babel/plugin-transform-arrow-functions'] on the preset doesn’t seem to work
  • using forceAllTransforms: true on the preset doesn’t seem to work

Only when we add an ie target back into our browserlist does Babel transform arrow functions. Is there a way to achieve this without specifying an ie target or otherwise altering our browserlist (which we use for other things)?

Expected behavior I would expect that using forceAllTransforms or using include with the specific plugin would instruct Babel to perform the relevant transform, even though Babel thinks it’s not needed given our browserlist.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

  • Filename: babel.config.js
...
 presets: [
    [
        '@babel/preset-env',
        {
            useBuiltIns: 'entry',
            corejs: 3,
            forceAllTransforms: true, // doesn't work
            include: ['@babel/plugin-transform-arrow-functions'] // doesn't work
        }
    ]
],
...
  • Browserlist:
"browserslist": [
    "chrome >= 66",
    "firefox >= 60",
    "edge >= 41",
    "ios >= 10"
]

Environment

System:
    OS: macOS 10.15.5
  Binaries:
    Node: 12.13.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - bin/docker-stubs/npm
  npmPackages:
    @babel/core: ^7.11.1 => 7.11.1 
    @babel/plugin-proposal-class-properties: ^7.10.4 => 7.10.4 
    @babel/plugin-proposal-optional-chaining: ^7.11.0 => 7.11.0 
    @babel/plugin-transform-arrow-functions: ^7.10.4 => 7.10.4 
    @babel/plugin-transform-runtime: ^7.11.0 => 7.11.0 
    @babel/preset-env: ^7.11.0 => 7.11.0 
    @babel/preset-react: ^7.10.4 => 7.10.4 
    @babel/runtime: ^7.11.2 => 7.11.2 
    babel-cli: ^6.26.0 => 6.26.0 
    babel-eslint: ^10.1.0 => 10.1.0 
    babel-jest: ^26.2.2 => 26.2.2 
    babel-loader: ^8.1.0 => 8.1.0 
    babel-plugin-lodash: ^3.3.4 => 3.3.4 
    babel-plugin-require-context-hook: ^1.0.0 => 1.0.0 
    babel-plugin-syntax-trailing-function-commas: ^6.22.0 => 6.22.0 
    eslint: ^7.6.0 => 7.6.0 
    eslint-plugin-babel: ^5.3.1 => 5.3.1 
    jest: ^26.2.2 => 26.2.2 
    webpack: ^4.44.1 => 4.44.1

Possible Solution

Additional context Add any other context about the problem here. Or a screenshot if applicable

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
existentialismcommented, Sep 29, 2020
0reactions
existentialismcommented, Oct 8, 2020

@colbymelvin going to close this for now, looking forward to your PR!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Babel not transpiling arrow functions (Webpack)
I think an issue is related to query-string because it's written in ES6 and not transpiled to ES5. Try to downgrade version from...
Read more >
babel/plugin-transform-arrow-functions
Add a runtime check to ensure the functions are not instantiated. Add names to arrow functions. You can read more about configuring plugin...
Read more >
Webpack 5 Beta + babel-loader: Why do I still have arrow ...
Cue my surprise when popping open bundles only to discover that some fat arrows were still, um, arrows. I dug through the v4...
Read more >
babel/plugin-transform-arrow-functions
Fast, reliable, and secure dependency management.
Read more >
A dive into transpiling through Webpack & Babel, plus ... - SwC
It almost looks like we are back in business, with our import , arrow functions, Object spread, let and const all working… until...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found