gaearon / react-transform-hmr Goto Github PK

Is it possible to suppress console messages and/or errors?

(issue moved from gaearon/babel-plugin-react-transform#39)
Since I started using Relay, hot loading always gives the error

[HMR] The following modules couldn't be hot updated: (They would need a full reload!)

The issue is also mentioned in fortruce/relay-skeleton#1, but I don't think that solution is a good way to go.

Node: 5.3.0
presets: ["react", "es2015", "stage-0"],

class App extends Component {
  state = {msg: "myMsg"}

  render() {
    return (
      <div>
        <h1>{this.state.msg}</h1>
      </div>
    );
  }
}

Changing myMsg does not hotreload, mapping it to a variable outside the class does.

@gaearon, thanks for your remarkable work on this project. I know you have a lot on your plate right now, so this is a heads-up, not a complaint.

react-transform-hmr will not work without the following babel plugins enabled:

1. transform-es2015-modules-commonjs
2. transform-es2015-classes

# 1 is because the code react-transform-hmr generates includes ES6-style imports. Ideally these should be pre-compiled to CommonJS (with option for AMD).

# 2 is trickier - it looks like internals of the HMR transform depend on some implementation detail of Babel's class implementation. Running against Chrome without the es6 transform does not work, even though Chrome has native support for es6 classes.

I met this error and have no idea how to solve it. Could you please help me with that ?
[HMR] Cannot apply update. Need to do a full reload!
[HMR] Error: Aborted because 129 is not accepted

If I do not transpile down ES6 classes to ES5, I received:

Class constructors cannot be invoked without 'new'

Basically I have to use babel-plugin-transform-es2015-classes, even though Node.js and modern browsers already have support for ES6 classes.

Is there some way to work around this?

When migrating from a working implementation with react-transform-webpack-hmr to react-transform-hmr I get the following error:

Error: locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr

Here is the .babelrc file I'm using:

{
  "stage": "0",
  "env": {
    "production": {
      "plugins": [
        "react-require",
        "dead-code-elimination"
      ],
    },
    "development": {
      "plugins": [
        "react-transform",
        "react-require"
      ],
      "extra": {
        "react-transform": [{
          "target": "react-transform-hmr", // changed from react-transform-webpack-hmr
          "imports": ["react"],
          "locals": ["module"]
        }, {
          "target": "react-transform-catch-errors",
          "imports": ["react", "redbox-react"]
        }]
      }
    }
  }
}

Hi, I got this error in browser. Any ideas what it mean?

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

When changing a file with material-ui components, hmr didn't happen.

FYI, files following

index.jsx

import React from 'react'
import { render } from 'react-dom'

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

import Hello from './components/hello'
render(<Hello />, document.getElementById('root'))

hello.jsx

import React from 'react'
import RaisedButton from 'material-ui/lib/raised-button'

class Hello extends React.Component {
  render() {
    return <RaisedButton label="submit" />
  }
}

export default Hello

.babelrc

{
  "presets": ["react", "es2015"],
  "env": {
    // this plugin will be included only in development mode, e.g.
    // if NODE_ENV (or BABEL_ENV) environment variable is not set
    // or is equal to "development"
    "development": {
      "plugins": [
        // must be an array with options object as second item
        ["react-transform", {
          // must be an array of objects
          "transforms": [{
            // can be an NPM module name or a local path
            "transform": "react-transform-hmr",
            // see transform docs for "imports" and "locals" dependencies
            "imports": ["react"],
            "locals": ["module"]
          }]
          // by default we only look for `React.createClass` (and ES6 classes)
          // but you can tell the plugin to look for different component factories:
          // factoryMethods: ["React.createClass", "createClass"]
        }]
      ]
    }
  }
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './public/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.jsx?/,
      loaders: ['babel'],
      include: path.join(__dirname, 'public')
    }]
  },
  resolve: {
    extensions: ["", ".js", ".jsx"]
  }
};

When you compile your server with babel-node and render React Components on the server you will get the following error message:

/Users/nikgraf/Projects/time/node_modules/react-transform-hmr/lib/index.js:54
    throw new Error('locals[0] does not appear to be a `module` object with Hot Module ' + 'replacement API enabled. You should disable react-transform-hmr in ' + 'production by using `env` section in Babel configuration. See the ' + 'example in README: https://github.com/gaearon/react-transform-hmr');
    ^

Error: locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr
    at proxyReactComponents (/Users/nikgraf/Projects/time/node_modules/react-transform-hmr/lib/index.js:54:11)
    at Object.<anonymous> (/Users/nikgraf/Projects/time/src/containers/Index.js:5:67)
    at Module._compile (module.js:434:26)
    at normalLoader (/Users/nikgraf/Projects/time/node_modules/babel-core/lib/api/register/node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/nikgraf/Projects/time/node_modules/babel-core/lib/api/register/node.js:216:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/nikgraf/Projects/time/src/routes.js:8:35)
22 Sep 21:55:38 - [nodemon] app crashed - waiting for file changes before starting...

It's happening due this change: 9afec1b

Ideally you want to avoid transforming on the server. Babel uses the existing .babelrc by default. There are several solutions I can imagine:

1. Split the server into the webpack and the render part and proxy the rendering endpoint. In case babel-node would allow babelrc option you could provide an alternative .babelrc.
2. Don't return an error and make it noop again 😄

Did I miss something? I'm happy to contribute, but I wasn't sure whats your opinion?

P.S: I went for the proxy solution as I want to run the rendering server with nodemon anyway but avoid webpack from restarting continuously. I worked around it by setting BABEL_ENV="developer-client"only for the webpack process and also use "developer-client" in .babelrc.

The message is:

[HMR] The following modules couldn't be hot updated: (Full reload needed)
processUpdate.js:60 [HMR]  - ./src/components/Blank.jsx
processUpdate.js:91 [HMR] Reloading page

And the page is not being reloaded with the component change :(
It was working well before I made the change on .babelrc, and updating the references of module name

the component is very simple:

import React, { Component, PropTypes } from 'react';
import Form, { Input, Button } from '../../../../core/components/form';
import Panel, { PanelHeading, PanelHeadingTitle, PanelBody, PanelFooter } from '../../../../core/components/Panel'

class Blank extends Component {
    constructor (props, context) {
        super(props, context);

        this.state = {
            canSubmit: false
        };

        this.onValid = this.onValid.bind(this);
        this.onInvalid = this.onInvalid.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onValid () {
        this.setState({
            canSubmit: true
        });
    }

    onInvalid () {
        this.setState({
            canSubmit: false
        });
    }

    onSubmit (model) {
        console.log('model', model);
    }

    render () {
        const {name, unreadCount} = this.state;

        return (
            <Panel color="primary">
                <PanelHeadingTitle>Sample Form</PanelHeadingTitle>
                <Form onSubmit={ this.onSubmit } onValid={ this.onValid } onInvalid={ this.onInvalid }>
                    <PanelBody>
                        <Input name="name" placeholder="Your Name" required>Names</Input>
                        <Input name="lastname" placeholder="Your Last Name">Last Name</Input>
                        <Input name="Username" placeholder="Your Username" icon="user">Username</Input>
                        <Input name="email" icon="envelope" validations="isEmail" validationError="This is not a valid email" placeholder="Your Email" required>Email</Input>
                    </PanelBody>
                    <PanelFooter>
                        <Button type="submit" color="primary" disabled={!this.state.canSubmit}>Submit</Button>
                    </PanelFooter>
                </Form>
            </Panel>
        );
    }
}

export default Blank;

Any suggestion?
Regards.

I'm receiving the following warning with "ProxyClass" in place of the React component name in my browser console when a required prop is not passed to the component.

Warning: Failed propType: Required prop `hintText` was not specified in `ProxyClass`. Check the render method of `ProxyClass`.

Is there a depth limit for files that trigger a webpack rebundling? In our project, we have a rather deep file structure. E.g., common/components/App/index.js triggers rebundling, but common/components/icons/Icon/index.js does not.

I started playing around with the counter example of redux and added some things. One of those additions was react router.

I have also changed some other things, so I am not 100% sure that this is the issue, but I realized that now my hot reloading is not working anymore.

I have also seen that it does not work in the real-world example.
reduxjs/redux#832

I'm trying to make basic app setup with react-jss and it doesn't seem to be working with react-transform-hmr, however hmr works well with everything else. Actually, hot-update file is loaded and it contains updated style, but seems that stylesheet is not replaced after.
I use ES6 classes for component definition and ES7 decorator @useSheet for applying higher-order react-jss component, if it can help with investigation.
Thnx in advance.

When doing server side rendering I get the error:

locals[0] does not appear to be amoduleobject with Hot Module replacement API enabled

Which makes sense since module only exists in a webpack environment. However, I still need it to run for server side rendering...?

{
  "env": {
    "development": {
      "plugins": [
        "react-transform"
      ],
      "extra": {
        "react-transform": [{
          "target": "react-transform-hmr",
          "imports": ["react"],
          "locals": ["module"]
        }, {
          "target": "react-transform-catch-errors",
          "imports": ["react", "redbox-react"]
        }]
      }
    },
    "production": {
      "optional": [
        "optimisation.react.constantElements",
        "optimisation.react.inlineElements"
      ]
    }
  }
}

In the context of a class

export default class Frontend extends Component {

With this, hot reloading works:

componentDidMount() {
  this.props.dispatch(whoami());
}

But with this, no hot reloading happens in the component or any of its child components:

componentDidMount = () => {
  this.props.dispatch(whoami());
};

Based on #51, I'd expect that making a change to componentDidMount would not trigger a hot reload when declared as a class property.

What surprises me is that making a change to the render method in the component—which is not a class property—fails to trigger a hot reload.

I'm able to consistently reproduce the problem with this test component:

import React, { Component } from 'react';

export default class TestComponent extends Component {

  componentDidMount = () => {
    console.log("why can't I have nice things?");
  };

  render() {
    return (
      <div>{'change me for hot reloading'}</div>
    );
  }
}

While this component hot reloads as expected:

import React, { Component } from 'react';

export default class TestComponent extends Component {

  render() {
    return (
      <div>{'change me for hot reloading'}</div>
    );
  }
}

Maybe a bug with my setup, or maybe a bug with react-transform-HMR. If it's the former, sorry to waste your time—if the latter, perhaps this helps.

(Thanks so much for your work on this and related components. My team and I have truly enjoyed working with Redux, etc.)

How would I go about loading static assets like images with the devServer? It does not load my images.

Hi,
I've installed 1.0.0, I've copy&pasted .babelrc from the examples and I'm using babel-loader with webpack as adviced, all in my dev environment, but I'm getting said error as soon as I'm running the whole thing. Whereas, the previous version worked.

Is there anything not yet documented I'm missing?

In the context of a export default class Random extends React.Component {

With

    render() {
      return(
        {this.renderTest()}
        {this.renderTest3()}
     );
   }

    renderTest()
    {
      return <Button>I will hot reload</Button>;
    }

Works for hot reloading but

    renderTest3 = () => {
      return <Button>I will fail.</Button>;
    };

Will never get hot reloaded when changing the string. Is it a desired behavior ?

We get the [React Transform HMR] Patching Builder process-update.js?e13e:75 [HMR] Updated modules: process-update.js?e13e:77 [HMR] - ./app/components/Random.jsx process-update.js?e13e:82 [HMR] App is up to date.

And the corresponding webpackHotUpdate gets fetched, but the page stays the same.

.babelrc plugins:

"presets": ["stage-0","react", "es2015"],
  "plugins": [
    "syntax-class-properties",
    "syntax-decorators",
    "syntax-object-rest-spread",
    "transform-class-properties",
    "transform-decorators-legacy",
    "transform-object-rest-spread",
  ]

versions:

    "babel-plugin-react-transform": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-classes": "^6.3.15",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.3.16",
    "babel-plugin-transform-object-rest-spread": "^6.3.13",

Could it be because it's a stage0 feature according to https://github.com/jeffmo/es-class-fields-and-static-properties ?

So I guess doc should be updated?

...../react-transform-boilerplate/node_modules/react-transform-hmr/lib/index.js:51
throw new Error('locals[0] does not appear to be a module object with Hot Module ' + 'replacement API enabled. You should disable react-transform-hmr in ' + 'production by using env section in Babel configuration. See the ' + 'example in README: https://github.com/gaearon/react-transform-hmr');

I'm trying server-side rendering and I use react-transform-hmr to do hot reload, but when I import react components to the script, the error above is thrown.

I followed react-transform-boilerplate and simply add a line to the top of the devServer.js:

var App = require('./src/App');
...

then run the script with babel-node:

"start": "babel-node devServer.js"

and you will see the problem. So how can I use this plugin to do server-side rendering?

Hey, first, thanks for all of your great projects! They've saved me so much time, and I've learned a ton from them.

So, onto the issue:

I've been transitioning various projects from react-hot-loader to react-transform-webpack-hmr, and it's gone without a hitch on React web projects. I've been trying it out on my react-native projects, where I'm running react-native-webpack-server. I followed your basic instructions in this issue, along with the boilerplate setup, but for some strange reason, I always get this error in the iOS simulator:

Requiring unknown module "react-transform-webpack-hmr"

http://localhost:8080/index.ios.bundle:23569 ...

I realize that I'm very likely barking up the wrong tree (and I apologize if that's the case), but I've tried working around this from every angle I can think of, so I wanted to see if this is something you've seen before and whether there's a fix I'm not aware of.

Again, thank you for all your work!

Update: I should note the obvious: I do have the module installed, and I've removed and re-installed it several times, and likewise restarted the packager, just to sanity check myself.

I followed the docs to set up hot reloading with react-transform, but I'm getting a full reload instead (the state is not preserved).

Here is a project to reproduce the issue:
https://github.com/moroshko/accessible-colors

Just:

npm install
npm start

What am I missing?

I'm not sure to understand the use case of this console.info(...).
It's adding noise to my console. What do you think about removing it or adding a way do disabling it?

I have a setup with webpack and react-transform-hmr, I managed to make it work correctly, i.e. when changing a component, I get the expected:

[HMR] bundle rebuilding
[HMR] bundle rebuilt in 1780ms
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./src/containers/App.js
[HMR]  - ./src/routes.js
[HMR]  - ./src/bin/client.js
[HMR] App is up to date.

However, this doesn't trigger a rerender of the components, therefore making it less useful.

Is that the expected behaviour anyway ? Or am I missing something ?

I get this error message then I was trying start webpack-hot-middleware.

The main reason is that I imported routes (even if I will not use them) in server.js file. And one more interesting thing is, if you rename render method, everything will works.

I have created an example of this problem based on redux counter example.
https://github.com/mikhail-riabokon/redux-counter

The latest stable release of React Native packager is broken due to the react-transform-hmr's transitive dependency react-deep-force-update including a Babel 6 incompatible .babelrc file in the npm package. (See facebook/react-native#5393)

This dependency is already fixed upstream at [email protected].

In order to fix the issue downstream at React Native, I believe we will need a new release that updates this dependency. I am not deep enough into this library to be able to safely make and test this upgrade. I will submit a PR for convenience, but would appreciate if a maintainer could weigh in.

I'm not sure why this might be happening, but I'm getting the following on a new project on the first jest test:

node_modules/react-transform-hmr/lib/index.js: Cannot read property 'type' of null

I was confused why react-transform-hmr was even being required for anything, so I took out the react-transform stuff from babelrc and uninstalled the module, but then I got

product-preview.jsx: Cannot find module 'react-transform-hmr' 

So it seems like it's being explicitly required somewhere/somehow.

Any guidance would be greatly appreciated, thanks so much for the great product!

A simple example:

  render() {
    return (<div onClick={this.log} >{'foo'}</div>);
  }

  log = function() {
    console.log('foo');
  }

(property function needs Babel stage 0)

The change inside render function can HMR, however, the change inside log function will not HMR.

It seems react-transform-hmr only patch the function at proto, but not at the object instance.

For react on ES6+, class property function mainly used with arrow function to provide 'this' binding. See example at http://babeljs.io/blog/2015/06/07/react-on-es6-plus/

So I suppose it's better to fix this bug.

For now, a work around way is not use class property function, but just use function bind at constructor.

I'll try to figure out a fix if I have time next week.

I'm not having any luck getting components defined as a pure function to hot-reload. The component in question:

export default function Light (props) {
  const { light, toggleLight, id } = props
  const status = light.state.on ? 'one' : 'off'

  return (
    <div>{light.name}
      <button onClick={() => toggleLight({ ...light, id })}>
        {status}
      </button>
    </div>
  )
}

I get this error in the console:

[HMR] Updated modules:
(index):25734 [HMR]  - ./app/components/light.js
(index):25734 [HMR]  - ./app/components/lights.js
(index):25739 [HMR] App is up to date.
(index):15049 Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null

Is this scenario supposed to work? Any idea what I'm doing wrong? Let me know if more context is needed.

Do you think there's a way to use this with Electron, without Browserify or Webpack, relying on the chrome-remote-interface? That's what electron-hot uses, which works quite well for pure functions. About to try it with React.

I'm having troubles getting PhantomJS to work with the react transform boilerplate. When I run it with Chrome all tests pass but if I run it with Phantom it just hangs with [HMR] connected.

Have you ever ran into this before? Any ideas for troubleshooting would be most helpful!

Here's the full debug info if it's helpful:

acceptance|master⚡ ⇒ be rspec

Randomized with seed 56835
D: [11/05/15 21:31:13][tests] - Executing tests with this configuration:

---
BROWSER: phantomjs
BASE_URL: http://localhost:3000

D: [11/05/15 21:31:13][tests] -
D: [11/05/15 21:31:13][tests] - =============================
D: [11/05/15 21:31:13][tests] - Starting test: Page: Overview should have overview heading
D: [11/05/15 21:31:13][tests] - From file    : ./spec/pages/overview_spec.rb
D: [11/05/15 21:31:13][tests] - -----------------------------
[HMR] connected
D: [11/05/15 21:33:19][tests] -
D: [11/05/15 21:33:19][tests] - -----------------------------
D: [11/05/15 21:33:19][tests] - Completed test: Page: Overview should have overview heading
D: [11/05/15 21:33:19][tests] - From file     : ./spec/pages/overview_spec.rb
D: [11/05/15 21:33:19][tests] - Result        : Fail - RSpec::Core::MultipleExceptionError
D: [11/05/15 21:33:19][tests] - =============================

Cheers!

I just tried upgrading to babel 6 and I'm getting the following error:

Module build failed: ReferenceError: [BABEL] client/lib/app.jsx: Unknown option: client/.babelrc.env.development.extra

Apparently babel 6 has changed their configuration options. This isn't a bug in react-transform-hmr per se but at least the README documentation will need to be updated to the new option format. If I can figure it out I will post here.

Hi! I use the redux counter sample to set my project. The react-transform-hmr always send the message "Full reload needed" in browser console. Could you please help me with that ?

My simple project is in https://github.com/white87332/reduxCounter

Having some bother getting this up and running. I'm using the babel 6 beta. It connects ok, and registers a changed file, but when it comes to the crunch we get:

GET http://localhost:3010/static/5c86957e12d231184053.hot-update.json 404 (Not Found)hotDownloadManifest @ bootstrap 5c86957e12d231184053:522hotCheck @ bootstrap 5c86957e12d231184053:706check @ process-update.js:30module.exports @ process-update.js:26processMessage @ client.js?101f:115handleMessage @ client.js?101f:63
process-update.js:35 [HMR] Cannot find update (Full reload needed)
process-update.js:36 [HMR] (Probably because of restarting the server)

my webpack:

var path = require("path"),
  autoprefixer = require("autoprefixer"),
  ExtractTextPlugin = require("extract-text-webpack-plugin"),
  webpack = require("webpack");


var definePlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.NODE_ENV === "development"))
});

module.exports = {
  context: path.join(__dirname, "../src"),
  entry: [
    'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr',
    "./client/index.es6"
  ],
  resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".js", ".es6", ".jsx", ".less", ".css", ".json"]
  },
  output: {
    path: path.join(__dirname, "../build"),
    filename: "app.js",
    publicPath: "/static/"
  },
  devtool: "#source-map",
  module: {
    loaders: [{
      test: /(.es6|.jsx)/,
      loader: "babel",
      exclude: /node_modules/,
      query: {
        presets: ["es2015", "react", "stage-1"],
        plugins: [
            ["react-transform", {
              transforms: [{
                transform: "react-transform-hmr",
                imports: ["react"],
                locals: ["module"]
              }]}
            ]
        ]
        // optional: ["runtime"]
      },
      exclude: /node_modules/
    }, {
      test: /\.less$/,
      loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader")
    }, {
      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
      loader: "url-loader?limit=100000"
    }]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin("app.css", {
      allChunks: true
    }),
    definePlugin
  ],
  postcss: [autoprefixer]
};

my devserver:

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

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

app.use(function(req, res, next) {
  res.set("Access-Control-Allow-Origin", "*");
  next();
});

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, 'index.html'));
// });

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

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

Hi, using this plugin with babel 6 throws an exception complaining about Unknown option: base.extra or Unknown option: base.env.development.extra

With some of my components I'm getting the following message all the time.

[HMR] The following modules couldn't be hot updated: (Full reload needed)
app.js:839 [HMR]  - ./~/css-loader?sourceMap&modules&localIdentName=[name]--[local]--[hash:base64:5]!./~/postcss-loader!./app/styles/Tag.css

Any idea why this might happen? Below is the source of my component and its stylesheet.

import { PropTypes } from 'react'
import cx from 'classnames'
import s from 'styles/Tag'


Tag.propTypes = {
  selected: PropTypes.bool.isRequired,
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired
}

export default function Tag({selected, label, onClick}) {

  const classes = cx(s.main, {
    [s.selected]: selected
  })

  return (
    <span className={classes} onClick={onClick}>{label}</span>
  )
}

@import 'variables/all';

.main {
  height: 1.5em;
  background-color: var(--color-white);

  line-height: 1;
  text-align: center;
  vertical-align: middle;
  padding: 0.2em;

  border: 1px solid var(--color-gray);

  &.selected {
    background-color: var(--color-gray);
    color: var(--color-white);
  }
}

What if I'm writing code in coffeescript?

We've been breaking our heads on an issue where a full reload is triggered on a change within the render method of a React component, with the warning: "[HMR] The following modules couldn't be hot updated: (Full reload needed)".

After a lot of fiddling with the source, and stripping it down to the bare basics, we came to the conclusion that using class properties with arrow functions causes the issue. It is reproducible in react-transform-boilerplate with this simple change.

In the boilerplate app, the issue only seems to pop up when changing the render function of the root component. In our own app, changing the definition of any function causes a full reload when changing something inside that function.

I'm not so sure that I'm filing this issue on the correct project. Please 302 me if necessary.

Changes to routes in React Router are not updated. If you add a route, it is not available when you navigate to it until you refresh. If you remove a route, it is still available until you refresh.

However, if you change the number of children in the parent containing the router, then it will update.

I cloned the boilerplate repo and made some changes to demonstrate: https://github.com/toddw/react-transform-boilerplate/blob/master/src/App.js

Demonstration:

Hi @gaearon, just wanted to say thanks for everything you're working on, really awesome stuff and really pushing things forward!

After trying to run the react-transform-boilerplate, I think I managed to narrow down the component at fault to this transform. The error is occurring in Firefox Developer Edition, version 42, and it seems as though the bundle is prevented from executing completely with the following message:

TypeError: Not allowed to define a non-configurable property on the WindowProxy object

This does not occur in Chrome 45. Unfortunately Firefox seems unable to map the eval'd line numbers back to source at all, making debugging pretty difficult...

Basically wrapped components seem to be missing their setState method. Might be an issue with react-proxy and not react-transform-hmr... Tested on IE9. Here's a repo with a minimal repro case: https://github.com/kentor/react-transform-hmr-ie9.

I also get the Warning message "Something is calling a React component directly. Use a factory or JSX instead."

Other info:

• Don't get this issue in Chrome or Firefox.
• Don't think browserify-hmr is the problem. Same thing with webpack using the babel transform.
• Did not get this with react-hot-loader

@gaearon do you know what could cause this on top of your head? if not I can look into it some time tomorrow

So, trying to do this.setState({render: 'val'}); breaks HMR errors wrapper (not 100% sure that's the correct place to report, feel free to close/point me to the right repo).

How to reproduce:

1. Clone react-transform-boilerplate
2. Change method tick() in App.js to the following:

tick() {
    this.setState({
        render: 'whatever',
        counter: this.state.counter + this.props.increment
    });
}

You will see the following error in the console:

Uncaught TypeError: Cannot read property 'prototype' of undefined
    wrapToCatchErrors @ index.js?9778:32

Adjusting the code just a bit makes it work fine, e.g.:

tick() {
    const s = {
        render: 'whatever',
        counter: this.state.counter + this.props.increment
    };
    this.setState(s);
}

It seems that render property gets parsed incorrectly in some place along the way.

This happens on on dev environment, and only at runtime. And only for ES6 classes (not React.createClass components) being used in redux-forms.

class GiftCodeForm extends React.Component {
...
}
...
module.exports = connectReduxForm({
    form: 'gift_code_form', 
    fields: ['code'],
    validate: validateForm
})(GiftCodeForm);
module.exports = GiftCodeForm;

I'm using babel6 and the new babel-react-transform. If I remove react-transform-hmr from .babelrc, error goes away.

Here's the .bablerc:

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

Trying to integrate this into a project, but the plugin complains that it cannot find parents for certain files.

@gaearon Is there a certain structure which i need to follow? Do I still need a single top level react component which then imports my routes etc.?

Sorry if this issue does not actually belong here - was not sure whether to post here or on the repo for the babel plugin.

Since I added this transformation, I am getting this issue on Firefox Nightly, which is completely breaking my rendering (note: works on Chrome and Safari)
Any idea ?

Seems related to

• https://github.com/domenic/window-proxy-spec
• https://esdiscuss.org/topic/figuring-out-the-behavior-of-windowproxy-in-the-face-of-non-configurable-properties
• https://github.com/domenic/window-proxy-spec/issues/4#issuecomment-126566221

I pasted some clues, but to be honest, 🐶 "I don't know what I am doing".

I have the following action in actions.js:

export function reorderBlocks(viewId, newOrder) {
  return {
    type: REORDER_BLOCKS,
    payload: newOrder,
    meta: {
      context,
      viewId,
    },
  };
}

It's used by ReduxDashboardView.jsx:

import {
  reorderBlocks, 
  ...
} from './actions';

class ReduxDashboardView extends Component {
  ...
  onReorderFinished = () => {
    let {model} = this.state;
    let viewId = model.get('_id');
    let newOrder = model.getIn(['data', 'blocks']).map(block => block.get('_id')).toArray();
    this.props.dispatch(reorderBlocks(viewId, newOrder));
  }
  render() {
    let {model} = this.state;
    let {onReorderBlocks, onReorderFinished, onResizeBlock, onResizeFinished} = this;
    return <DashboardView {...this.props} model={model}
      onReorderBlocks={onReorderBlocks} onReorderFinished={onReorderFinished}
      onResizeBlock={onResizeBlock} onResizeFinished={onResizeFinished}/>;
  }
}

Now if I add console.log('test'); at the top of reorderBlocks and save, the browser appears to indicate that everything has been hot updated, yet when I trigger the action again, it doesn't print to console. But when I refresh the page and trigger the action again, it does print to console.

I had assumed what would happen in this case is that the react-transform-hmr wrapper for the parent of ReduxDashboardView ends up re-requiring ReduxDashboardView.jsx (which requires the new actions.js in turn) and mounts a completely new <ReduxDashboardView> that can call the new reorderBlocks. But I'm guessing that's not what happens -- is it impossible for react-transform-hmr to hot reload in this case or am I doing something wrong?

When running a react-transform-hmr-enabled application in IE10, you will get Class Call Check ("Cannot call a class as a function") errors from Babel and React components will fail to render. This seems to occur when calling React.render on an ES6 class. This might be a problem in react-proxy, but react-transform-hmr is as much as I could isolate it.

Note that IE10 is probably not going to support hot loading in most setups (it doesn't support Server-Sent-Events, which at least webpack-hot-middleware uses), so this is more of an inconvenience than a blocker; I have to completely turn off HMR and restart the Webpack server to test in IE10, rather than it failing gracefully.