Does not seem to work consistently w/ source maps enabled in webpack

[aaronjensen]

Using devtool: 'eval-source-map' or devtool: 'cheap-module-eval-source-map' causes either babel-plugin-react-transform or react-transform-hmr to not work consistently. I don't have a small repro yet, but on my project if I use devtool: 'eval' then all components are hot reloadable. If I use any source-map enabled devtool, it only appears to make the first component it sees hot reloadable.

I'll keep digging and add more information as I find it.

[aaronjensen]

Some more information, if I make any change to a component file it becomes hot reloadable. It's as if something is being cached somewhere, but I cannot figure out where. If I change the file back to what it was, it is no longer hot reloadable.

The browser I use doesn't appear to matter.
I blew away my source directory including node_modules and that didn't make a difference.

[gaearon]

Repro would definitely be useful.

[aaronjensen]

So it looks like the webpack-dev-middleware output is totally different if I make a change or do not make a change to a file locally.

So to be clear, I switched from react-hot-loader to babel-plugin-react-transform. If I do not actually make a change (any change) to a file, then babel-plugin-react-transform does not appear to run on that file. If I make a change, it does. This persists even if I restart the server. If I undo the change (revert the file to what was) then babel-plugin-react-transform no longer has its effect. Something is cached somewhere. Not sure where yet.

Output when Layout.js is as it was before switching to babel-plugin-react-transform (sourcemaps omitted for brevity):

/***/ },
/* 270 */
/***/ function(module, exports, __webpack_require__) {

    eval("'use strict';

var React = __webpack_require__(10);
var PropTypes = React.PropTypes;

var _require = __webpack_require__(182);

var RouteHandler = _require.RouteHandler;

var GlobalHeader = __webpack_require__(271);
var GlobalFooter = __webpack_require__(412);
var Query = __webpack_require__(413);

var Layout = React.createClass({
  displayName: 'Layout',

  propTypes: {
    event: PropTypes.object,
    children: PropTypes.node
  },

  render: function render() {
    return React.createElement(
      'div',
      null,
      React.createElement(Query, null),
      React.createElement(GlobalHeader, { event: this.props.event }),
      React.createElement(
        'div',
        { className: 'content-wrapper' },
        React.createElement(
          'div',
          { className: 'content-container' },
          this.props.children || React.createElement(RouteHandler, { event: this.props.event })
        )
      ),
      React.createElement(GlobalFooter, { event: this.props.event })
    );
  }
});

module.exports = Layout;");

Output after a single newline is added:

/***/ },
/* 270 */
/***/ function(module, exports, __webpack_require__) {

  eval("/* WEBPACK VAR INJECTION */(function(module) {'use strict';

var _reactTransformHmr2 = __webpack_require__(272);

var _reactTransformHmr3 = _interopRequireDefault(_reactTransformHmr2);

var _react = __webpack_require__(10);

var _reactTransformCatchErrors2 = __webpack_require__(314);

var _reactTransformCatchErrors3 = _interopRequireDefault(_reactTransformCatchErrors2);

var _redboxReact = __webpack_require__(315);

var _components = {
  _$Layout: {
    displayName: 'Layout'
  }
};

var _reactComponentWrapper = _reactTransformHmr3['default']({
  filename: '/Users/aaronjensen/Source/curadora/booking-site/js/components/Layout.js',
  components: _components,
  locals: [module],
  imports: [_react]
});

var _reactComponentWrapper2 = _reactTransformCatchErrors3['default']({
  filename: '/Users/aaronjensen/Source/curadora/booking-site/js/components/Layout.js',
  components: _components,
  locals: [],
  imports: [_react, _redboxReact]
});

function _wrapComponent(uniqueId) {
  return function (ReactClass) {
    return _reactComponentWrapper2(_reactComponentWrapper(ReactClass, uniqueId), uniqueId);
  };
}

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var React = __webpack_require__(10);
var PropTypes = React.PropTypes;

var _require = __webpack_require__(182);

var RouteHandler = _require.RouteHandler;

var GlobalHeader = __webpack_require__(271);
var GlobalFooter = __webpack_require__(412);
var Query = __webpack_require__(413);

var Layout = _wrapComponent('_$Layout')(React.createClass({
  displayName: 'Layout',

  propTypes: {
    event: PropTypes.object,
    children: PropTypes.node
  },

  render: function render() {
    return React.createElement(
      'div',
      null,
      React.createElement(Query, null),
      React.createElement(GlobalHeader, { event: this.props.event }),
      React.createElement(
        'div',
        { className: 'content-wrapper' },
        React.createElement(
          'div',
          { className: 'content-container' },
          this.props.children || React.createElement(RouteHandler, { event: this.props.event })
        )
      ),
      React.createElement(GlobalFooter, { event: this.props.event })
    );
  }
}));

module.exports = Layout;
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(2)(module)))");

[aaronjensen]

Solved. We are using the babel loader with babel?cacheDirectory

https://github.com/babel/babel-loader#options

It's supposed to take the babelrc into account. For some reason, I got into a state where the babelrc I had was synced up with old cache. Maybe it was because I changed the babelrc while webpack was running, I do not know. Either way, removing the cacheDirectory or changing my babelrc file again seems to fix it.