Giter VIP home page Giter VIP logo

Comments (4)

aaronjensen avatar aaronjensen commented on April 30, 2024

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.

from babel-plugin-react-transform.

gaearon avatar gaearon commented on April 30, 2024

Repro would definitely be useful.

from babel-plugin-react-transform.

aaronjensen avatar aaronjensen commented on April 30, 2024

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)))");

from babel-plugin-react-transform.

aaronjensen avatar aaronjensen commented on April 30, 2024

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.

from babel-plugin-react-transform.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.