transform-arrow-functions being ignored for external packages?

Hi!

I’m trying to babelify a file to transpile arrow functions (because those don’t work in IE). Here’s my setup:

.babelrc

The targets includes IE11, which requires arrow function transpiling.

{
  "presets": [
    ["@babel/preset-env",{
      "targets": "> 0.25%, not dead",
      "debug": true
    }],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

index.js

// The arrow functions in here do not get transpiled
import queryString from "query-string";

const a = {
  one: 1,
  five: 5
};

// this gets transpiled
const printQs = () => {
  console.log("qs", queryString.stringify(a));
};

printQs();

Browserify command

$ browserify index.js -o output.js -t babelify

Inside the minimal index.js file, I’ve included the query-string package, because I know that the package exports code that contains arrow functions: https://github.com/sindresorhus/query-string/blob/master/index.js#L8

This file is bundled correctly and the console.log has the correct output. The problem is that the output file contains arrow functions from the query-string package.

The debug output is including transform-arrow-functions. It seems to be running on the application code, because printQs from index.js is transpiled. However, output.js has the line return (key, value, index) => { from https://github.com/sindresorhus/query-string/blob/master/index.js#L8 which contains an arrow function.

Is this expected behavior? How can I transpile the exported code from query-string in my bundle?

[lambert-velir]

As a follow up, it seems that babelify doesn’t automatically load .babelrc anymore when you pass options as the 2nd argument to the transform like this:

browserify()
  .transform(babelify, {
    global: true
  });

As a work around, I used the find-babel-config package like this:

const findBabelConfig = require("find-babel-config");

const babelConfig = findBabelConfig.sync(__dirname);

browserify()
  .transform(babelify, {
    ...babelConfig.config,
    global: true
  });

cc: @goto-bus-stop

[goto-bus-stop]

Yes, Browserify runs transforms on application code only by default. There are some pointers for solving this use case in the readme here https://github.com/babel/babelify/blob/master/README.md#why-arent-files-in-node_modules-being-transformed and in #268