No babel, no error message: Specific es6-only application.js

[antoniusostermann]

Setup

Used versions: node 7.2, npm 3.10.9, rails 5, sprockets 3.7, sprockets-rails 3.2, sprockets-commoner 0.6.4, babel-core: 6.13.2, babel-preset-es2015: 6.9.0 .babelrc: { "presets": ["es2015"] }

If I understood this gem correctly, I do not need anything else to enable babel with sprockets 3.7 (not >= sprockets 4!).

Issue

My idea is to migrate a very big project bit by bit to es6. So I created a folder app/assets/javascripts/es6 and activated sprockets-commoner only for this directory:

Rails.application.config.assets.configure do |env|
  Sprockets::Commoner::Processor.configure(env,
    {
      include: ['app/assets/javascripts/es6']
    }
  )
end
Rails.application.config.assets.precompile +=%w(.... list of files ....)

As you can see, I am using the rails configuration for additional precompiles and not a manifest.js yet (which seems to become default in sprockets 4).

Next, I added a <%= javascript_include_tag 'es6/application' %> to my application.erb. So I should be able to put migrated components into my es6-folder and link them in the application.js of my es6-folder, while all other parts of my web application still work.

My only problem is that babel does not seem to jump in to compile my es6-stuff. Therefore my import-directives also do not work.

Example

es6/application.js

// Using require() to test if sprockets-commoner requiring works
// and if it is just a problem in calling babel from sprockets-commoner
require('./bar')

es6/foo.js

export class Foo { // Default export doesn't work either
  print() {
    console.log("This is from foo class!")
  }
}

es6/bar.js

import { Foo } from "./foo"; // Default import doesn't work either

export class Bar {
  print() {
    console.log("I'm in Bar class, and now using the foo class:");
    let object = new Foo();
    object.print();
  }
}

let myBar = new Bar();
myBar.print();

And this is the preprocessed application.js file:

!function(global) {
var __commoner_initialize_module__ = function(f) {
  var module = {exports: {}};
  f.call(module.exports, module, module.exports);
  return module.exports;
};

var __commoner_module__app$assets$javascripts$es6$bar_js = __commoner_initialize_module__(function (module, exports) {
  import Foo from "./foo";

  export class Bar {
    print() {
      console.log("I'm in Bar class, and now using the foo class:");
      let object = new Foo();
      object.print();
    }
  }

  let myBar = new Bar();
  myBar.print();
});
var __commoner_module__app$assets$javascripts$es6$application_js = __commoner_initialize_module__(function (module, exports) {
  "use strict";

  console.log("in es6/application.js");
});
}(typeof global != 'undefined' ? global : typeof window != 'undefined' ? window : this);

As you can see, the require() seemed to work, and sprockets-commoner is also loaded, but babel does not jump in.. My rails console does not show any error either.

[bouk]

Hmm everything seems to be right. The only way I could see this happen if your application directory happens to be in a node_modules folder? That's the only moment when it'll exclude babelrc by default

Could you upload/git push a repo that shows this happening somewhere so I could reproduce it?

[antoniusostermann]

Thanks for the input, I tried using sprockets-commoner in a new repository and thereby found the reason for my problem.

I had to remove Rails.application.config.assets.version from my asset initializer / asset configuration. After that, everything worked seemlessly.