Comments (4)
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.
Repro would definitely be useful.
from babel-plugin-react-transform.
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.
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)
- Local path as an argument to "transform" does not resolve the path.
- Modify the contents of the function will not be updated.
- Doesn't work with React.PureComponent HOT 1
- Template is not a function
- Deprecated with no alternative? HOT 1
- no release info or changelog for 3.0.0
- `addImport()` is deprecated in Babel 7 HOT 2
- Use without .babelrc HOT 4
- jspm with plugin-babel and react preset: "cannot read property 'transform' of undefined" HOT 1
- React transforms being run on Backbone views HOT 6
- Question: Is it a bad practice to use react-transform for production code? HOT 1
- Transform(s) to strip propTypes and displayName HOT 4
- Ember objects detected as react components HOT 5
- Appears to wrap other functions than createClass() HOT 10
- error when passing properties to createClass() HOT 4
- Future of React Transform HOT 2
- Can we have superClass Regexp matching option , for inheritance ? HOT 2
- undefined value static properties outside class HOT 3
- displayName equals 'Constructor' HOT 8
- static properties are undefined HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-react-transform.