Use Babel Generated AMD Modules

Question

I have an existing app that is all AMD modules based and use require.js on bundling up things. I need to bring a bunch of es2015 react code into this app as AMD modules and use Babel to turn them into AMD modules. Here is my babel config

 babel:
  options:
    sourceMap: false
    plugins: [ 'transform-class-properties', 
               'transform-object-rest-spread', 
               'transform-es2015-modules-amd']
    presets: [ 'react','es2015']
  dist: 
    files: [{
      expand: true
      cwd: "src/foo/jsx"
      src: "**/*.js"
      dest: "build/foo/js/"
      ext: ".js"
      }]

The result works and generates the AMD modules as follows for instance for myreact.js module:

define(["exports", "react", "prop-types"], function (exports, _react, _propTypes) {
  "use strict";
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  var _react2 = _interopRequireDefault(_react);
  var _propTypes2 = _interopRequireDefault(_propTypes);
  function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
      default: obj
    };
  }
  var REQUIRED_FIELD_SYMBOL = "*";
  function Blah(props) {
    ...
  }
  exports.default = Blah;
});

Now, when I use this AMD module in my other AMD modules with define, it is undefined

define([..., 'foo/js/myreact'], function(..., RM) {

RM.Blah <---- this is undefied
RM.default <---- still undefied

The generated code does not return the exports.

Also, I noticed in my require.js generated bundle.js, the react model shows up as follows:

define('foo/js/myreact',["exports", "react", "prop-types"], 
   function (exports, _react, _propTypes){
..
}

I am not really defining exports anywhere in my require.js config file so how I am supposed to setup exports?

Basically, how should I use my react AMD modules within other AMD modules?

Use Babel Generated AMD Modules

0 Answers