gaearon/react-transform-boilerplate

A new Webpack boilerplate with hot reloading React components, and error handling on module and component level.

Deprecated

Use this instead:

https://github.com/pmmmwh/react-refresh-webpack-plugin/

react-transform-boilerplate's Issues

How to use with eslint preloader?

I'm not sure exactly where to put this and I apologise if this is the wrong repo — but I ran into an issue where if I used babel-eslint as a preloader (or before babel in the webpack loader config), hot reloading just would not work, and I always had this message:

[HMR] The following modules couldn't be hot updated: (Full reload needed)
[HMR]  - path/to/module
[HMR] Reloading page

No idea if this is a bug or what — just that I spent a long time trying to debug it!

Perhaps it will be of use to someone...

Line numbers are off

Hey @gaearon

With a fresh clone of the repo, the line numbers are off. If you add throw new Error('oops') to line 22 of App.js (the top of the render function) react-redbox will display: "Counter.render \ webpack:///./src/App.js?:92:13".

Of course, practically, it's a not a big deal because the class and method names get you pretty close, but I figure it's still worth fixing.

Thanks for setting this up!

reloading page after an error loads an outdated build

I've noticed this on most webpack builds and I'm not sure if it's a configuration issue, a bug or intentional.

But if you have an error, you get the red screen. This is helpful, but if you reload the page you get the old build, which is pretty confusing. Then if you make a change again, it'll error out.

Any ideas on how to fix this?

Serving static assets

How would you go about for instance serving images? Becaus the dev server now targets all get requests. It doesn't load my images

"[HMR] Reloading page" page isn't reloading

The rest of the functionality seems to be working, but when I make a change that requires a reload, my browser window isn't auto-reloading. I'm using google chrome.

Anyone know how to fix this?

Doctype required?

This is surely a stupid question, so I apologize in advance, but isn't the doctype required in index.html for HTML5 documents?

Adding the HTML5 doctype to the top of index.html causes the page to render slightly differently in Chrome and Firefox. (Not specific to React. The same happens for the pure HTML prototype.)

Question: should webpack rebundling output a long list of files on each change?

After having turned off the suppression of webpack output in devServer.js:

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: false,
  publicPath: config.output.publicPath
}));

After starting the app for the first time, webpack outputs a long list of files. I would have thought that on subsequent single-file changes webpack would only be rebuilding the changed file, but instead I get something like this:

 [210] ./~/redbox-react/lib/index.js 3.62 kB {0} [built]
  [211] ./~/redbox-react/lib/style.js 736 bytes {0} [built]
  [212] ./~/redbox-react/~/error-stack-parser/error-stack-parser.js 6.36 kB {0} [built]
  [213] ./~/redbox-react/~/error-stack-parser/~/stackframe/stackframe.js 3.48 kB {0} [built]
  [214] ./~/redbox-react/~/object-assign/index.js 896 bytes {0} [built]
  [215] ./src/colors.js 180 bytes {0} [built]
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
webpack building...
webpack built 3766d849814060964d98 in 597ms
Hash: 3766d849814060964d98
Version: webpack 1.12.2
Time: 597ms
                               Asset      Size  Chunks             Chunk Names
                           bundle.js    835 kB       0  [emitted]  main
0.e13b499d3273db6afe6d.hot-update.js   5.52 kB       0  [emitted]  main
e13b499d3273db6afe6d.hot-update.json  36 bytes          [emitted]  
chunk    {0} bundle.js, 0.e13b499d3273db6afe6d.hot-update.js (main) 724 kB [rendered]
    [0] multi main 40 bytes {0}
    [1] (webpack)-hot-middleware/client.js 3.27 kB {0}
    [2] (webpack)/buildin/module.js 251 bytes {0}
    [3] (webpack)-hot-middleware/~/strip-ansi/index.js 161 bytes {0}
    [4] (webpack)-hot-middleware/~/strip-ansi/~/ansi-regex/index.js 145 bytes {0}
    [5] (webpack)-hot-middleware/client-overlay.js 883 bytes {0}
    [6] (webpack)-hot-middleware/process-update.js 2.93 kB {0}
    [7] ./src/index.js 367 bytes {0}
    [8] ./~/react/react.js 56 bytes {0}
    [9] ./~/react/lib/React.js 1.41 kB {0}
   [10] ./~/react/lib/ReactDOM.js 3.71 kB {0}
   [11] (webpack)/~/node-libs-browser/~/process/browser.js 2.06 kB {0}
   [12] ./~/react/lib/ReactCurrentOwner.js 653 bytes {0}
   [13] ./~/react/lib/ReactDOMTextComponent.js 4.32 kB {0}
   [14] ./~/react/lib/DOMChildrenOperations.js 5 kB {0}
   [15] ./~/react/lib/Danger.js 6.96 kB {0}
   [16] ./~/react/~/fbjs/lib/ExecutionEnvironment.js 1.09 kB {0}
   [17] ./~/react/~/fbjs/lib/createNodesFromMarkup.js 2.71 kB {0}
   [18] ./~/react/~/fbjs/lib/createArrayFromMixed.js 2.36 kB {0}
   [19] ./~/react/~/fbjs/lib/toArray.js 1.98 kB {0}
   [20] ./~/react/~/fbjs/lib/invariant.js 1.51 kB {0}
   [21] ./~/react/~/fbjs/lib/getMarkupWrap.js 3.06 kB {0}
   [22] ./~/react/~/fbjs/lib/emptyFunction.js 1.09 kB {0}
   [23] ./~/react/lib/ReactMultiChildUpdateTypes.js 861 bytes {0}
   [24] ./~/react/~/fbjs/lib/keyMirror.js 1.27 kB {0}
   [25] ./~/react/lib/ReactPerf.js 2.51 kB {0}
   [26] ./~/react/lib/setInnerHTML.js 3.35 kB {0}
   [27] ./~/react/lib/setTextContent.js 1.2 kB {0}
   [28] ./~/react/lib/escapeTextContentForBrowser.js 849 bytes {0}
   [29] ./~/react/lib/DOMPropertyOperations.js 7.88 kB {0}
   [30] ./~/react/lib/DOMProperty.js 9.57 kB {0}
   [31] ./~/react/lib/quoteAttributeValueForBrowser.js 746 bytes {0}
   [32] ./~/react/~/fbjs/lib/warning.js 1.77 kB {0}
   [33] ./~/react/lib/ReactComponentBrowserEnvironment.js 1.26 kB {0}
   [34] ./~/react/lib/ReactDOMIDOperations.js 3.29 kB {0}
   [35] ./~/react/lib/ReactMount.js 36.8 kB {0}
   [36] ./~/react/lib/ReactBrowserEventEmitter.js 12.4 kB {0}
   [37] ./~/react/lib/EventConstants.js 2.04 kB {0}
   [38] ./~/react/lib/EventPluginHub.js 9.22 kB {0}
   [39] ./~/react/lib/EventPluginRegistry.js 8.41 kB {0}
   [40] ./~/react/lib/EventPluginUtils.js 6.79 kB {0}
   [41] ./~/react/lib/ReactErrorUtils.js 2.27 kB {0}
   [42] ./~/react/lib/accumulateInto.js 1.74 kB {0}
   [43] ./~/react/lib/forEachAccumulated.js 893 bytes {0}
   [44] ./~/react/lib/ReactEventEmitterMixin.js 1.3 kB {0}
   [45] ./~/react/lib/ViewportMetrics.js 638 bytes {0}
   [46] ./~/react/lib/Object.assign.js 1.26 kB {0}
   [47] ./~/react/lib/isEventSupported.js 1.97 kB {0}
   [48] ./~/react/lib/ReactDOMFeatureFlags.js 458 bytes {0}
   [49] ./~/react/lib/ReactElement.js 8.07 kB {0}
   [50] ./~/react/lib/canDefineProperty.js 629 bytes {0}
   [51] ./~/react/lib/ReactEmptyComponentRegistry.js 1.38 kB {0}
   [52] ./~/react/lib/ReactInstanceHandles.js 10.6 kB {0}
   [53] ./~/react/lib/ReactRootIndex.js 723 bytes {0}
   [54] ./~/react/lib/ReactInstanceMap.js 1.25 kB {0}
   [55] ./~/react/lib/ReactMarkupChecksum.js 1.39 kB {0}
   [56] ./~/react/lib/adler32.js 1.2 kB {0}
   [57] ./~/react/lib/ReactReconciler.js 3.55 kB {0}
   [58] ./~/react/lib/ReactRef.js 2.34 kB {0}
   [59] ./~/react/lib/ReactOwner.js 3.45 kB {0}
   [60] ./~/react/lib/ReactUpdateQueue.js 10.9 kB {0}
   [61] ./~/react/lib/ReactUpdates.js 8.54 kB {0}
   [62] ./~/react/lib/CallbackQueue.js 2.44 kB {0}
   [63] ./~/react/lib/PooledClass.js 3.55 kB {0}
   [64] ./~/react/lib/Transaction.js 9.55 kB {0}
   [65] ./~/react/~/fbjs/lib/emptyObject.js 482 bytes {0}
   [66] ./~/react/~/fbjs/lib/containsNode.js 1.43 kB {0}
   [67] ./~/react/~/fbjs/lib/isTextNode.js 628 bytes {0}
   [68] ./~/react/~/fbjs/lib/isNode.js 712 bytes {0}
   [69] ./~/react/lib/instantiateReactComponent.js 4.52 kB {0}
   [70] ./~/react/lib/ReactCompositeComponent.js 27.5 kB {0}
   [71] ./~/react/lib/ReactComponentEnvironment.js 1.67 kB {0}
   [72] ./~/react/lib/ReactPropTypeLocations.js 549 bytes {0}
   [73] ./~/react/lib/ReactPropTypeLocationNames.js 611 bytes {0}
   [74] ./~/react/lib/shouldUpdateReactComponent.js 1.49 kB {0}
   [75] ./~/react/lib/ReactEmptyComponent.js 1.68 kB {0}
   [76] ./~/react/lib/ReactNativeComponent.js 3.02 kB {0}
   [77] ./~/react/lib/validateDOMNesting.js 13.1 kB {0}
   [78] ./~/react/lib/ReactDefaultInjection.js 3.99 kB {0}
   [79] ./~/react/lib/BeforeInputEventPlugin.js 14.9 kB {0}
   [80] ./~/react/lib/EventPropagators.js 5.22 kB {0}
   [81] ./~/react/lib/FallbackCompositionState.js 2.49 kB {0}
   [82] ./~/react/lib/getTextContentAccessor.js 994 bytes {0}
   [83] ./~/react/lib/SyntheticCompositionEvent.js 1.16 kB {0}
   [84] ./~/react/lib/SyntheticEvent.js 5.75 kB {0}
   [85] ./~/react/lib/SyntheticInputEvent.js 1.15 kB {0}
   [86] ./~/react/~/fbjs/lib/keyOf.js 1.11 kB {0}
   [87] ./~/react/lib/ChangeEventPlugin.js 11.5 kB {0}
   [88] ./~/react/lib/getEventTarget.js 930 bytes {0}
   [89] ./~/react/lib/isTextInputElement.js 1.03 kB {0}
   [90] ./~/react/lib/ClientReactRootIndex.js 551 bytes {0}
   [91] ./~/react/lib/DefaultEventPluginOrder.js 1.26 kB {0}
   [92] ./~/react/lib/EnterLeaveEventPlugin.js 3.9 kB {0}
   [93] ./~/react/lib/SyntheticMouseEvent.js 2.2 kB {0}
   [94] ./~/react/lib/SyntheticUIEvent.js 1.64 kB {0}
   [95] ./~/react/lib/getEventModifierState.js 1.3 kB {0}
   [96] ./~/react/lib/HTMLDOMPropertyConfig.js 7.61 kB {0}
   [97] ./~/react/lib/ReactBrowserComponentMixin.js 1.15 kB {0}
   [98] ./~/react/lib/findDOMNode.js 2.17 kB {0}
   [99] ./~/react/lib/ReactDefaultBatchingStrategy.js 1.92 kB {0}
  [100] ./~/react/lib/ReactDOMComponent.js 36.9 kB {0}
  [101] ./~/react/lib/AutoFocusUtils.js 816 bytes {0}
  [102] ./~/react/~/fbjs/lib/focusNode.js 725 bytes {0}
  [103] ./~/react/lib/CSSPropertyOperations.js 5.71 kB {0}
  [104] ./~/react/lib/CSSProperty.js 3.5 kB {0}
  [105] ./~/react/~/fbjs/lib/camelizeStyleName.js 1.03 kB {0}
  [106] ./~/react/~/fbjs/lib/camelize.js 729 bytes {0}
  [107] ./~/react/lib/dangerousStyleValue.js 1.93 kB {0}
  [108] ./~/react/~/fbjs/lib/hyphenateStyleName.js 1 kB {0}
  [109] ./~/react/~/fbjs/lib/hyphenate.js 822 bytes {0}
  [110] ./~/react/~/fbjs/lib/memoizeStringOnly.js 778 bytes {0}
  [111] ./~/react/lib/ReactDOMButton.js 1.15 kB {0}
  [112] ./~/react/lib/ReactDOMInput.js 5.74 kB {0}
  [113] ./~/react/lib/LinkedValueUtils.js 5.18 kB {0}
  [114] ./~/react/lib/ReactPropTypes.js 12.3 kB {0}
  [115] ./~/react/lib/getIteratorFn.js 1.17 kB {0}
  [116] ./~/react/lib/ReactDOMOption.js 2.79 kB {0}
  [117] ./~/react/lib/ReactChildren.js 5.83 kB {0}
  [118] ./~/react/lib/traverseAllChildren.js 6.9 kB {0}
  [119] ./~/react/lib/ReactDOMSelect.js 6.09 kB {0}
  [120] ./~/react/lib/ReactDOMTextarea.js 4.35 kB {0}
  [121] ./~/react/lib/ReactMultiChild.js 14.7 kB {0}
  [122] ./~/react/lib/ReactChildReconciler.js 4.52 kB {0}
  [123] ./~/react/lib/flattenChildren.js 1.65 kB {0}
  [124] ./~/react/~/fbjs/lib/shallowEqual.js 1.28 kB {0}
  [125] ./~/react/lib/ReactEventListener.js 7.51 kB {0}
  [126] ./~/react/~/fbjs/lib/EventListener.js 2.65 kB {0}
  [127] ./~/react/~/fbjs/lib/getUnboundedScrollPosition.js 1.09 kB {0}
  [128] ./~/react/lib/ReactInjection.js 1.37 kB {0}
  [129] ./~/react/lib/ReactClass.js 27.8 kB {0}
  [130] ./~/react/lib/ReactComponent.js 5.04 kB {0}
  [131] ./~/react/lib/ReactNoopUpdateQueue.js 3.94 kB {0}
  [132] ./~/react/lib/ReactReconcileTransaction.js 4.58 kB {0}
  [133] ./~/react/lib/ReactInputSelection.js 4.32 kB {0}
  [134] ./~/react/lib/ReactDOMSelection.js 6.83 kB {0}
  [135] ./~/react/lib/getNodeForCharacterOffset.js 1.66 kB {0}
  [136] ./~/react/~/fbjs/lib/getActiveElement.js 876 bytes {0}
  [137] ./~/react/lib/SelectEventPlugin.js 6.71 kB {0}
  [138] ./~/react/lib/ServerReactRootIndex.js 868 bytes {0}
  [139] ./~/react/lib/SimpleEventPlugin.js 17.4 kB {0}
  [140] ./~/react/lib/SyntheticClipboardEvent.js 1.23 kB {0}
  [141] ./~/react/lib/SyntheticFocusEvent.js 1.12 kB {0}
  [142] ./~/react/lib/SyntheticKeyboardEvent.js 2.76 kB {0}
  [143] ./~/react/lib/getEventCharCode.js 1.56 kB {0}
  [144] ./~/react/lib/getEventKey.js 2.93 kB {0}
  [145] ./~/react/lib/SyntheticDragEvent.js 1.13 kB {0}
  [146] ./~/react/lib/SyntheticTouchEvent.js 1.33 kB {0}
  [147] ./~/react/lib/SyntheticWheelEvent.js 1.99 kB {0}
  [148] ./~/react/lib/SVGDOMPropertyConfig.js 3.8 kB {0}
  [149] ./~/react/lib/ReactDefaultPerf.js 8.63 kB {0}
  [150] ./~/react/lib/ReactDefaultPerfAnalysis.js 5.72 kB {0}
  [151] ./~/react/~/fbjs/lib/performanceNow.js 830 bytes {0}
  [152] ./~/react/~/fbjs/lib/performance.js 612 bytes {0}
  [153] ./~/react/lib/ReactVersion.js 379 bytes {0}
  [154] ./~/react/lib/renderSubtreeIntoContainer.js 463 bytes {0}
  [155] ./~/react/lib/ReactDOMServer.js 766 bytes {0}
  [156] ./~/react/lib/ReactServerRendering.js 3.3 kB {0}
  [157] ./~/react/lib/ReactServerBatchingStrategy.js 673 bytes {0}
  [158] ./~/react/lib/ReactServerRenderingTransaction.js 2.3 kB {0}
  [159] ./~/react/lib/ReactIsomorphic.js 2.05 kB {0}
  [160] ./~/react/lib/ReactDOMFactories.js 3.36 kB {0}
  [161] ./~/react/lib/ReactElementValidator.js 10.8 kB {0}
  [162] ./~/react/~/fbjs/lib/mapObject.js 1.47 kB {0}
  [163] ./~/react/lib/onlyChild.js 1.21 kB {0}
  [164] ./~/react/lib/deprecated.js 1.77 kB {0}
  [165] ./~/react-dom/index.js 63 bytes {0}
  [166] ./src/App.js 5.01 kB {0} [built]
  [167] ./~/react-transform-hmr/lib/index.js 3.69 kB {0}
  [168] ./~/react-transform-hmr/~/react-proxy/modules/index.js 413 bytes {0}
  [169] ./~/react-transform-hmr/~/react-proxy/modules/createClassProxy.js 5.8 kB {0}
  [170] ./~/react-transform-hmr/~/react-proxy/modules/createPrototypeProxy.js 5.25 kB {0}
  [171] ./~/react-transform-hmr/~/react-proxy/~/lodash/object/assign.js 1.62 kB {0}
  [172] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/assignWith.js 943 bytes {0}
  [173] ./~/react-transform-hmr/~/react-proxy/~/lodash/object/keys.js 1.3 kB {0}
  [174] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/getNative.js 456 bytes {0}
  [175] ./~/react-transform-hmr/~/react-proxy/~/lodash/lang/isNative.js 1.29 kB {0}
  [176] ./~/react-transform-hmr/~/react-proxy/~/lodash/lang/isFunction.js 1.06 kB {0}
  [177] ./~/react-transform-hmr/~/react-proxy/~/lodash/lang/isObject.js 732 bytes {0}
  [178] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/isObjectLike.js 289 bytes {0}
  [179] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/isArrayLike.js 372 bytes {0}
  [180] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/getLength.js 440 bytes {0}
  [181] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/baseProperty.js 351 bytes {0}
  [182] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/isLength.js 644 bytes {0}
  [183] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/shimKeys.js 1.14 kB {0}
  [184] ./~/react-transform-hmr/~/react-proxy/~/lodash/lang/isArguments.js 963 bytes {0}
  [185] ./~/react-transform-hmr/~/react-proxy/~/lodash/lang/isArray.js 1.16 kB {0}
  [186] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/isIndex.js 778 bytes {0}
  [187] ./~/react-transform-hmr/~/react-proxy/~/lodash/object/keysIn.js 1.66 kB {0}
  [188] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/baseAssign.js 516 bytes {0}
  [189] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/baseCopy.js 545 bytes {0}
  [190] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/createAssigner.js 1.29 kB {0}
  [191] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/bindCallback.js 1.22 kB {0}
  [192] ./~/react-transform-hmr/~/react-proxy/~/lodash/utility/identity.js 355 bytes {0}
  [193] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/isIterateeCall.js 906 bytes {0}
  [194] ./~/react-transform-hmr/~/react-proxy/~/lodash/function/restParam.js 1.9 kB {0}
  [195] ./~/react-transform-hmr/~/react-proxy/~/lodash/array/difference.js 987 bytes {0}
  [196] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/baseDifference.js 1.36 kB {0}
  [197] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/baseIndexOf.js 678 bytes {0}
  [198] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/indexOfNaN.js 657 bytes {0}
  [199] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/cacheIndexOf.js 586 bytes {0}
  [200] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/createCache.js 650 bytes {0}
  [201] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/SetCache.js 706 bytes {0}
  [202] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/cachePush.js 379 bytes {0}
  [203] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/baseFlatten.js 1.29 kB {0}
  [204] ./~/react-transform-hmr/~/react-proxy/~/lodash/internal/arrayPush.js 437 bytes {0}
  [205] ./~/react-transform-hmr/~/react-proxy/modules/bindAutoBindMethods.js 2.4 kB {0}
  [206] ./~/react-transform-hmr/~/react-proxy/modules/deleteUnknownAutoBindMethods.js 2.45 kB {0}
  [207] ./~/react-transform-hmr/~/react-proxy/~/react-deep-force-update/lib/index.js 1.29 kB {0}
  [208] ./~/react-transform-hmr/~/global/window.js 243 bytes {0}
  [209] ./~/react-transform-catch-errors/lib/index.js 2.46 kB {0}
  [210] ./~/redbox-react/lib/index.js 3.62 kB {0}
  [211] ./~/redbox-react/lib/style.js 736 bytes {0}
  [212] ./~/redbox-react/~/error-stack-parser/error-stack-parser.js 6.36 kB {0}
  [213] ./~/redbox-react/~/error-stack-parser/~/stackframe/stackframe.js 3.48 kB {0}
  [214] ./~/redbox-react/~/object-assign/index.js 896 bytes {0}
  [215] ./src/colors.js 180 bytes {0}
webpack: bundle is now VALID.

Does anyone know if this looks like it should? Am I just misreading this or is webpack doing more work than it needs to?

Thanks!

Consistent error display

In the demo syntax mistakes look different to a runtime failure, is it possible to use https://github.com/KeywordBrain/redbox-react for both?

loading error when making http request for initial data

using fb's flux.
when some data is requested
like:

utils/cartAPI.js

getProductData: function() {
request.get('../data.json')
.set('Accept', 'application/json')
.end((err, response) => {
if (err) return console.error(err);
console.log(response.body);
FluxCartActions.receiveProduct(response.body);
});
}

App.js
CartAPI.getProductData();

only momentarily i get this error as the data loads, it goes away after it loads.
any ideas as a work around?

TypeError: Cannot read property 'sku' of null
at ProxyClass.render (webpack:///./src/components/FluxProduct.react.js?:66:34)
at ProxyClass.proxiedMethod (webpack:///.//react-transform-hmr//react-proxy/modules/createPrototypeProxy.js?:44:30)
at ProxyClass.tryRender as render
at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (webpack:///.//react/lib/ReactCompositeComponent.js?:789:34)
at ReactCompositeComponentMixin._renderValidatedComponent (webpack:///.//react/lib/ReactCompositeComponent.js?:816:14)
at wrapper as _renderValidatedComponent
at ReactCompositeComponentMixin.mountComponent (webpack:///.//react/lib/ReactCompositeComponent.js?:237:30)
at wrapper as mountComponent
at Object.ReactReconciler.mountComponent (webpack:///.//react/lib/ReactReconciler.js?:38:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (webpack:///./~/react/lib/ReactMultiChild.js?:192:44)tryRender @ index.js:45ReactCompositeComponentMixin.renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:789ReactCompositeComponentMixin.renderValidatedComponent @ ReactCompositeComponent.js:816wrapper @ ReactPerf.js:70ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:237wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js:192ReactDOMComponent.Mixin.createContentMarkup @ ReactDOMComponent.js:289ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js:199ReactReconciler.mountComponent @ ReactReconciler.js:38ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:247wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:247wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js:247wrapper @ ReactPerf.js:70ReactReconciler.mountComponent @ ReactReconciler.js:38mountComponentIntoNode @ ReactMount.js:248Mixin.perform @ Transaction.js:134batchedMountComponentIntoNode @ ReactMount.js:269Mixin.perform @ Transaction.js:134ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:66batchedUpdates @ ReactUpdates.js:110ReactMount.renderNewRootComponent @ ReactMount.js:404wrapper @ ReactPerf.js:70ReactMount.render @ ReactMount.js:493wrapper @ ReactPerf.js:70(anonymous function) @ index.js:11(anonymous function) @ bundle.js:593__webpack_require @ bundle.js:521fn @ bundle.js:76(anonymous function) @ multi_main:2(anonymous function) @ bundle.js:551__webpack_require @ bundle.js:521(anonymous function) @ bundle.js:544(anonymous function) @ bundle.js:547

hapi backend?

trying to understand what the equivalent of these lines would be in hapi.js

app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

Implementing devServer page rendering

Hello, I am trying to make app, where nodejs renders page on server side, and then it serves to client.
This example works great, but I am stuck with one problem.

I am trying to insert my React-Routes to devServer.js and then run Router.
I fail to rundevServer.js, because devServer.js is in vanilla JS (node devServer.js), BUT! my src/my_routes.jsx is written in ES6 + JSX.

I dont know how to tell package.json to run start task with babel transformer.

"scripts": {
    "start": "node devServer.js",
}

I tried "start": "babel devServer.js | node" but it doesnt work.

NoErrorsPlugin breaks compatibility with eslint-loader

We are using eslint-loader to enforce linting rules independent of individual editor setups. eslint-loader doesn't work with NoErrorsPlugin. Is this a hard dependency of react-transform?

Does not work in IE < 11

The class call check in babel throws in IE 9 & 10. Happens in our app as well, unsure which babel-plugin messes up.

React hot loader works for our app, so going back to that for now

Unable to get react-transform-boilerplate working with Django

I had react-hot-loader working with django working by following this article. I've tried to change it to the new react-transform.

Everything seems to be loading fine but browser reload doesn't occur and I am getting no HMR related messages in console. The only malfunctioning hint that I got is the following log from Django server:

"GET /__webpack_hmr/ HTTP/1.1" 404 1700       
"GET /__webpack_hmr HTTP/1.1" 301 0           

Django is running on port 80 and webpack dev server on port 3000. I assume that the problem I am experiencing is that __webpack_hmr should be called on the webpack-dev-server and not on django.

Could someone point me to where is the port/address of GET /__webpack_hmr is set and whether it can be changed?

Usage without JSX?

Any examples would be helpful.

Typescript instead of babel

Is it possible to make this work without using babel? I'm using typescript with ts-loader so I'm wondering if it's possible to make react-transform independent of babel?

using boilerplate over exciting data

I have been using boilerplate for few days and I am loving it.

I have a question tho - this might be totally out of topic and I could simply be wrong but can I clone react-transform-boilerplate into my existing rails project and reconfigure it to use my existing data?

Lets say I will clone it into APP_ROOT/vendor/react-transform-boilerplate I will run npm install from inside that folder and reconfigure a port on node app to use a different port.
Can I then make boilerplate to work off APP_ROOT/app/assets/javascript/components instead off ./src?

So when I start it from inside APP_ROOT/vendor/react-transform-boilerplate with npm start it will be using js files from APP_ROOT/app/assets/javascript/components?

Sorry if this doesn't make any sense.

error after npm start

Hello, after npm install and npm start, it throws this error :

    [0] multi main 40 bytes {0} [built] [1 error]
    [1] (webpack)-hot-middleware/client.js 2.55 kB {0} [built]
    [2] (webpack)-hot-middleware/~/strip-ansi/index.js 161 bytes {0} [built]
    [3] (webpack)-hot-middleware/~/strip-ansi/~/ansi-regex/index.js 145 bytes {0} [built]
    [4] (webpack)-hot-middleware/client-overlay.js 917 bytes {0} [built]
    [5] (webpack)-hot-middleware/processUpdate.js 2.75 kB {0} [built]

ERROR in ./src/index.js
Module build failed: ReferenceError: Symbol is not defined
    at exports.default (/home/regisg/Projets/react-transform-boilerplate/node_modules/babel-plugin-react-transform/lib/index.js:36:18)
    at Function.memoisePluginContainer (/home/regisg/Projets/react-transform-boilerplate/node_modules/babel-core/lib/transformation/file/plugin-manager.js:77:23)
    at PluginManager.add (/home/regisg/Projets/react-transform-boilerplate/node_modules/babel-core/lib/transformation/file/plugin-manager.js:209:30)
    at File.buildTransformers (/home/regisg/Projets/react-transform-boilerplate/node_modules/babel-core/lib/transformation/file/index.js:237:21)
    at new File (/home/regisg/Projets/react-transform-boilerplate/node_modules/babel-core/lib/transformation/file/index.js:139:10)
    at Pipeline.transform (/home/regisg/Projets/react-transform-boilerplate/node_modules/babel-core/lib/transformation/pipeline.js:164:16)
    at transpile (/home/regisg/Projets/react-transform-boilerplate/node_modules/babel-loader/index.js:12:22)
    at Object.module.exports (/home/regisg/Projets/react-transform-boilerplate/node_modules/babel-loader/index.js:69:12)

slackin invitation wot working

I invited myself via http://www.reactiflux.com/ and still cannot receive an invitation letter.

The same `devServer.js`, not works when I call it in `gulp.babel.js`

Very strange, same devServer.js, works fine when I call node devServer.js,

But If a call it in gulp.babel.js, like:

const devServer = port => {

  var devServer = require('./devServer.js')

  /*var express = require('express');
  var webpack = require('webpack');
  var config = require('./webpack/webpack.config.dev.js');

  var app = express();
  var compiler = webpack(config);

  app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
  }));

  app.use(require('webpack-hot-middleware')(compiler));

  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname,req.path));
  });

  app.listen(3000, 'localhost', function(err) {
    if (err) {
      console.log(err);
      return;
    }

    console.log('Listening at http://localhost:3000');
  });*/


}
// task: dev
gulp.task('dev', [], done => devServer(ports.dev))

This cause the problem The following modules couldn't be hot updated: (Full reload needed), can not auto reload in browser.

The follow file is my devServer.js, any help, thanks

var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack/webpack.config.dev.js');

var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, req.path));
});

app.listen(3000, 'localhost', function(err) {
  if (err) {
    console.log(err);
    return;
  }

  console.log('Listening at http://localhost:3000');
});

Question: devServer example using Hapi.js

Does this work with Hapi?

.babelrc will interfere with mocha node tests.

The redbox-react package is required regardless of whether NODE_ENV is production or not and it references the window identifier which causes tests that run in node to fail. This is because babel picks up the default .babelrc config file and executes it, but you only really want the config file in this repo to be executed when using HMR and not during node test runs...

Does'n work in vagrant

There is some approaches to use it on vagrant vm?

I have tried to use pure boilerplate. I think it blocks by vagrant proxy which connect my vm to my host.

Make available under public domain licence

Since this project is seemingly supposed to serve as the basis of other projects, I think it is confusing to the end user how to handle this already having a license.

For example, is it valid to remove the LICENSE file and then copy your licence to only the files one keeps? Then again how to handle partial files?

Broken in Safari

1. Change
   
2. Save
   Get this in the console:

[Log] [HMR] bundle rebuilding
[Log] [HMR] bundle rebuilt in 153ms
[Log] [HMR] Checking for updates on the server...
[Log] [React HMR] Patching Counter
[Log] [React HMR] Patching App
[Log] [HMR] Updated modules:
[Log] [HMR] - ./src/App.js
[Log] [HMR] App is up to date.
[Error] Error
tryRender
_renderValidatedComponentWithoutOwnerOrContext
_renderValidatedComponent
ReactCompositeComponent__renderValidatedComponent
_updateRenderedComponent
_performComponentUpdate
updateComponent
ReactCompositeComponent_updateComponent
performUpdateIfNecessary
performUpdateIfNecessary
runBatchedUpdates
perform
perform
perform
flushBatchedUpdates
ReactUpdates_flushBatchedUpdates
(anonymous function) ([native code], line 0)
closeAll
perform
batchedUpdates
enqueueUpdate
enqueueUpdate
enqueueForceUpdate
forceUpdate
(anonymous function)
forEach
(anonymous function)
[Error] Error: Cannot parse given Error object
perform (undefined, line 260)
batchedUpdates
enqueueUpdate
enqueueUpdate
enqueueForceUpdate
forceUpdate
(anonymous function)
forEach ([native code], line 0)
(anonymous function)

Issue on fresh install

Hi Dan,

I cloned this last night and it worked fine, but there seem to be some changes from the recent commit that aren't working too well together.

Any suggestions?

npm ERR! Darwin 14.5.0
npm ERR! argv "node" "/usr/local/bin/npm" "install"
npm ERR! node v0.10.33
npm ERR! npm  v2.1.11
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: react-transform-hmr@'>=0.1.6 <0.2.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.1.5"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/Daniel/Sites/react-transformer/npm-debug.log

Why set NODE_ENV twice?

I'm looking through the code and don't understand why the environment variable NODE_ENV is set in both webpack.config.prod.js:

new webpack.DefinePlugin({
  'process.env': {
    'NODE_ENV': JSON.stringify('production')
  }
}),

... and package.json's build:webpack task:

"build:webpack": "NODE_ENV=production webpack --config webpack.config.prod.js"

I tried removing NODE_ENV=production from package.json, and it didn't seem to change anything. Is this intentional, and why?

Example hot loading css (css-loader?module)

Are there any examples using this template combined with CSS modules as per https://github.com/css-modules/webpack-demo?

Flux impl. request

Hi, awesome work, congrats.. Just a little question, did you think to do the react-transfom implementation in a flux app.

Best regards.

Problems hot-reloading non-components.

I've been trying out this hot-loading methodology in a redux app and have been running into issues with non-components not being hot-reloadable. Things like reducers and actions that export 'pure' functions that should be hot-swappable. I've been trying to dig into the hot reload internals to figure-out why but have hit a brick wall in my understanding of the system.

I forked this repo and converted it to a very simple redux app here:
https://github.com/cpsubrian/react-transform-boilerplate

To reproduce, simply edit and save the reducer (such as changing counter: state.counter + 1 to counter: state.counter + 2). It should result in the HMR warning below:

[HMR] The following modules couldn't be hot updated: (Full reload needed)
[HMR]  - ./src/reducer.js

At first I thought that maybe I needed to opt-in these modules specifically to the hot api, but editing colors.js works as expected without any specific hot api buy-in.

devServer example using Hapi.js

Does this work with Hapi?

Saving file does nothing

I've been using react-redux-start-kit as of late and my hot reloading stopped working. Since it uses react-transform-hmr, I cloned this repo bone stock and did the same changes shown in the animated graphic with the same negative result. There are no messages in the console or in the terminal on save; just nothing. I have to fully relaunch the server to see any of the changes. Since I doubt this would be something that would go unnoticed, I'm beginning to think it might be a problem on my machine (OS X 10.10.5), but I thought I should report it anyway. Any advice on where to start looking for the problem would be appreciated.

[Announcement] Please don't create React 0.14-related PRs

Hi all,

Thanks a lot for sending 0.14-related PRs.
I know it's out, and I'm working on releasing updates for React Transform-related packages.

Currently, sending PRs doesn't help because it's not hard for me to fix the warnings—the issue is in coordinated release of all packages (React Redux, DevTools, React Transform, etc) and fixing compatibility issues in the tooling. I will do my best to transition everything to 0.14 this week.

In the meantime, please don't send PRs related to React 0.14 to React Transform, Redux, and related projects.

Thanks.

Always servers index.html

The devServer.js always serves the index.html page, even when I request a file which exists in the directory defined in publicPath.

Any idea why?

hot reloading not happening for child [dumb] components

I have container components and child components. Live reloading happens for my any changes in root (container) components but child components changes are not triggering even webpack rebuild.

part of webpack.config.file

entry: {
    main: [
      'webpack-hot-middleware/client',
      './src/index.js'
    ]
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'public'),
    publicPath: '/public/'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      include: path.join(__dirname, 'src'),
      loader: ['babel'],
      exclude: [nodeModulesPath],
      // Options to configure babel with
      query: {

      }
    }

.babelrc

{
  "stage": 0,
  "env": {
    "development": {
      "plugins": ["react-transform"],
      "extra": {
        "react-transform": {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }
      }
    }
  }
}

Normal compilation in development mode?

Since HMR plugin needs to be enabled in the .babelrc how would you go about making the webpack command work in local? Currently doing BABEL_ENV=production webpack cause otherwise I get the locals[0] error where it tells me I bundled react-transform when I'm not in hot mode

Heroku deployment procedure

What's the right way to push the code in this boilerplate repo to a production on Heroku? It seems all the building blocks are in place, and just a Procfile is missing?

Will the buildpack automagically pack all the assets into the right bundle?

Components get mixed up when using classic syntax

Hot reload uses different component after you change component places in code.
Bug only appears when using classic syntax. With ES6 syntax everything works as expected.
Manual page reload also fixes it.

Steps:

1. Make 2 components inside App.js: App and Banana. Export only App component.
2. In index.js import App component and render it to page.
3. Inside App.js change Banana and App places.
4. Save

Expected behavior: App is rendered
Actual behavior: Banana is rendered

Can anyone else reproduce it?

Hot reloading doesn't work on Windows 10 x64

When I follow the instructions from the readme, the boilerplate compiles and pretty much everything works (I can open the server at localhost, the changes I make to the source files cause Webpack's build, etc), except for hot reloading. I have used the original files from this repo without any modifications. I've tested it in multiple browser and hot reloading didn't work in any of them.

There are no errors in the console and [HMR] connected isn't being printed. Webpack build is working fine, whenever I make a change to a file, something like webpack built 981db3a4007a4789937d in 213ms is printed in the console.

I've tried to debug it by adding console.log statements in various places and here's what I've found:

1. Those events are never triggered.
2. source variable always has readystate: 0, meaning that connection is never made.

Versions of the soft I'm using:

$ npm -v
2.11.3
$ node -v
v0.12.7

Any ideas what might be wrong or what steps should I take to figure it out?

not working in node v4?

haven't narrowed down what the cause may be but I am on node v4.1, and npm 3.3.3.

I can see the " webpack built" messages in terminal when I save a file, but the changes are no longer live. I have to manually F5.

Hot load fails (without errors) when running inside vagrant

How to reproduce

1. Create a vagrant config and forward port 3000
2. Clone the repo in the same directory
3. vagrant up
4. install nodejs & npm install
5. npm start inside vagrant
6. load page in browser, it loads, works but file changes are not detected
7. stop the devserver server and kill vagrant
8. in the same directory but this time in host, do npm start
9. open page in browser, everything works

Node version 0.12, vagrant box ubuntu/trusty64

TypeError: this.props.data.map is not a function

When I use the code from reactjs/react-tutorial (https://github.com/reactjs/react-tutorial/blob/master/public/scripts/example.js) and test with a modified devServer.js, as I post a new comment I got the following error:
TypeError: this.props.data.map is not a function
ProxyClass.render
webpack:///./src/App.js?:129:40
ProxyClass.proxiedMethod
webpack:///.//react-transform-hmr//react-proxy/modules/createPrototypeProxy.js?:44:30
ProxyClass.tryRender
webpack:///.//react-transform-catch-errors/lib/index.js?:36:31
ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext
webpack:///.//react/lib/ReactCompositeComponent.js?:587:34
ReactCompositeComponentMixin._renderValidatedComponent
webpack:///.//react/lib/ReactCompositeComponent.js?:607:32
wrapper
webpack:///.//react/lib/ReactPerf.js?:66:21
ReactCompositeComponentMixin._updateRenderedComponent
webpack:///.//react/lib/ReactCompositeComponent.js?:560:36
ReactCompositeComponentMixin._performComponentUpdate
webpack:///.//react/lib/ReactCompositeComponent.js?:544:10
ReactCompositeComponentMixin.updateComponent
webpack:///.//react/lib/ReactCompositeComponent.js?:473:12
wrapper
webpack:///.//react/lib/ReactPerf.js?:66:21

Proxy index.html

In this boilerplate, it assumes that the index.html is at the same source code as the React code. This was not my case. I need a proxy to my index.html because it is served by a remote server.

I used to use webpack-dev-server, and I had it set at webpack.config.js like so:

  devServer: {
    publicPath: publicPath,
    port: 3000,
    hot: true,
    inline: true,
    proxy: {
      '*': 'http://api.example.com'
    }
  }

I managed to proxy the requests like webpack-dev-server did and it solved my issues. If anyone is having the same issue, you can check how I changed server.js to work in this scenario here:
https://gist.github.com/brenoc/e0ba0979014a62a1ff1c

Sorry to create an issue for this, but I found it helpful to share it. Maybe add it to the README?

Usage with splitting/chunking ?

How can I get react-transform working with hot module loading when the entry field is an object like as required by https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code?

react-transform-boilerplate assumes that the entry field will be an array, and that webpack-hot-middleware/client will be the first item in it.

multiple entry points

I am trying to setup hot module replacement to generate exact same pathname for scripts as the webpack cold build does. I have some problems with CommonsChunkPlugin (https://github.com/webpack/docs/wiki/optimization#multi-page-app). Is it supported by hot module replacement?

Errors from React's render() function are not being shown

The only main difference between my setup and react-transform-boilerplate i that I'm using updated packges:
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"react-transform-hmr": "^1.0.1",
"redbox-react": "^1.1.1",
"webpack": "^1.12.2",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.4.1",
"react": "^0.14.0"

I'm also using webpack multiple entry points (https://webpack.github.io/docs/multiple-entry-points.html), but that shouldn't cause any problem.

"Symbol is not defined" error

Hello! Just trying this out. I've followed the steps in the README. But, running the "npm start" command results in this output/error:

> [email protected] start /dev/react-transform-boilerplate
> node devServer.js

Listening at http://localhost:3000
webpack built 3ce3db4b60dda21e65d3 in 889ms
Hash: 3ce3db4b60dda21e65d3
Version: webpack 1.12.2
Time: 889ms
    Asset     Size  Chunks       Chunk Names
bundle.js  29.7 kB       0       main
chunk    {0} bundle.js (main) 6.62 kB [rendered]
    [0] multi main 40 bytes {0} [built] [1 error]
    [1] (webpack)-hot-middleware/client.js 2.6 kB {0} [built]
    [2] (webpack)-hot-middleware/~/strip-ansi/index.js 161 bytes {0} [built]
    [3] (webpack)-hot-middleware/~/strip-ansi/~/ansi-regex/index.js 145 bytes {0} [built]
    [4] (webpack)-hot-middleware/client-overlay.js 917 bytes {0} [built]
    [5] (webpack)-hot-middleware/processUpdate.js 2.75 kB {0} [built]

ERROR in ./src/index.js
Module build failed: ReferenceError: /dev/react-transform-boilerplate/src/index.js: Symbol is not defined
    at buildIsCreateClassCallExpression (/dev/react-transform-boilerplate/node_modules/babel-plugin-react-transform/lib/index.js:65:43)
    at NodePath.enter (/dev/react-transform-boilerplate/node_modules/babel-plugin-react-transform/lib/index.js:346:42)
    at NodePath.call (/dev/react-transform-boilerplate/node_modules/babel-core/lib/traversal/path/context.js:56:28)
    at NodePath.visit (/dev/react-transform-boilerplate/node_modules/babel-core/lib/traversal/path/context.js:90:8)
    at TraversalContext.visitSingle (/dev/react-transform-boilerplate/node_modules/babel-core/lib/traversal/context.js:132:12)
    at TraversalContext.visit (/dev/react-transform-boilerplate/node_modules/babel-core/lib/traversal/context.js:148:19)
    at Function.traverse.node (/dev/react-transform-boilerplate/node_modules/babel-core/lib/traversal/index.js:76:17)
    at Object.traverse [as default] (/dev/react-transform-boilerplate/node_modules/babel-core/lib/traversal/index.js:55:14)
    at PluginPass.transform (/dev/react-transform-boilerplate/node_modules/babel-core/lib/transformation/plugin-pass.js:51:27)
    at File.transform (/dev/react-transform-boilerplate/node_modules/babel-core/lib/transformation/file/index.js:621:12)
 @ multi main

Node version is 0.10.26.

Potential enhancement: some restructuring & including isomorphic React

I have a similar boilerplate at inxilpro/react-redux-isomorphic-hot-boilerplate. The notable changes are:

1. All dependencies are the latest versions (including react-0.14-rc1)
2. React is implemented in an isomorphic fashion
3. Directory structure is a little more split up, into:
   • client/ for client code
   • server/ for dev and production server code
   • webpack/ for webpack configs
   • Root still contains package.json etc
4. Redux and redux-devtools are included
5. react-transform is configured in the webpack config instead of the .babelrc file
6. Feature flags __DEV__ __ON_SERVER__ and __ON_CLIENT__ are added
7. As well as a few other minor tweaks

If there's anything in that list that you'd be interested in receiving PR's for, please let me know! I'd much rather contribute to this repo than maintain my own. I just wanted to get something up so you could take a look.

If not, that's fine too :)

Chris

Heroku deploy

Hi guys sorry for the question if I want deploy this in Heroku, i need a prodServer true?

How to update .babelrc for babel 6.x

{
  "stage": 0,
  "env": {
    "development": {
      "plugins": ["react-transform"],
      "extra": {
        "react-transform": {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }
      }
    }
  }
}