What Babelify presets/plugins am I missing to parse this code?

Question

I'm using a Rails 4.0 project that implements Browserify-Rails to implement Babelify.

Everything seems to be going hunky dory on my local, and remote Beta server. But when I deploy to production, certain files will be skipped if they have in them, a require("") .

My original settings were this :

config.browserify_rails.commandline_options = ["-t [ babelify --presets [ es2015 react stage-0 ] --plugins [ syntax-async-functions transform-regenerator ] ]"]

Which made it skip over a file that had this line in it :

var { configureStore } = require('./configureStore');

That require lead here :

let { createStore, combineReducers, applyMiddleware, compose } = require('redux');
let thunk = require('redux-thunk').default
let session = require('./reducers/session').default;
let search = require('./reducers/search').default;

const configureStore = () => {
  const reducers = combineReducers({
    session,
    search,
  });

  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

  return createStore(
    reducers,
    composeEnhancers(applyMiddleware(thunk))
  );
}

export { configureStore };

I was guessing maybe there's a couple JS stylings I'm using here that are above ES2015

So I went ahead and played with the configs, adding Incremental, and updating to ES2017. Which got me past that broken file. My new config looked like this :

config.browserify_rails.use_browserifyinc = true
config.browserify_rails.commandline_options = ["-t [ babelify --presets [ es2017 react stage-0 ] --plugins [ syntax-async-functions transform-regenerator ] ]", "-t coffeeify --extension=\".js.coffee\""]

But this gets me as far as this line in a further file :

let { search } = require('../../actions/search');

Which loads this ( and mind you, the follow file was parsed and translated just fine ) :

export const SEARCH_RESULTS_RECEIVED = 'SEARCH_RESULTS_RECEIVED';

export const search = (term, token) => {
  return (dispatch) => {
    if (term && term.trim() !== '') {
      return _search(term, token).then((results) => dispatch(resultsReceived(results)));
    } else {
      return dispatch(resultsReceived([]));
    }
  }
};

const _search = (term, token) => {
  let promise = new Promise((resolve, reject) => {
    fetch(encodeURI(`/api/search?search=${term}`), {
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Token ${token}`
      }
    })
    .then(response => response.json())
    .then(function(response) {
      return resolve(response.results);
    })
    .catch((error) => {
      return reject(error);
    });
  });

  return promise;
};

export const resultsReceived = (searchResults) => ({
  type: SEARCH_RESULTS_RECEIVED,
  searchResults
});

I'm curious if there's any Babelify plugins/presets that I might be missing in order to make this work.

Answer 1

The yearly presets only contain the features that were added that year - i.e. es2017 doesn't include any of the stuff from the es2015 and es2016 presets!

This set of presets ought to solve your problem:

es2015 es2016 es2017 react stage-0

That said, the preferred way to include all the latest yearly presets is to use the env preset, which pulls in all of them, will update once ES2018 is released, and also allows you to configure things based on your target environment if you want:

env react stage-0