React-hot-loader: createProxy is not a function

[alansouzati]

When I try to use react-hot-loader version 3, I'm facing issues with AppContainer.

Uncaught TypeError: createProxy is not a function

I'm using 3.0.0-alpha.12.

NPM: 3.8.3
Node: v5.10.1

This is the code I'm trying to run, I got that from TodoMVC in Redux:

import 'react-hot-loader/patch';

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

import { AppContainer } from 'react-hot-loader';
import Main from './Main';

let element = document.getElementById('content');
render(<AppContainer component={Main} />, element);

document.body.classList.remove('loading');

if (module.hot) {
  module.hot.accept('./Main', () => {
    render(
      <AppContainer
        component={require('./Main').default}
      />,
      document.getElementById('content')
    );
  });
}

[gaearon]

What is the output of npm ls react-proxy? My guess is you have an old version (less than 3.x) installed for some reason, maybe due to some of the past dependencies. You can try removing node_modules, making sure you only have react-hot-loader (and not react-transform-hmr), and run npm install again.

[alansouzati]

Hi @gaearon thanks for the quick follow up.

I deleted my node_modules and I cannot face the issue with createProxy anymore.

But I cannot get the hot reloading to work with my ES6 classes. There is no issue in the console, and I see the recompilation happened in webpack. But the component does not update in the browser.

I'm fine closing this issue and deal with this problem separately. But in case you can help me in this issue, here is what I'm trying:

.babelrc

{
  "presets": [ "es2015", "react" ],
  "plugins": ["react-hot-loader/babel"]
}

index.js

import 'react-hot-loader/patch';

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

import { AppContainer } from 'react-hot-loader';
import Main from './Main';

let element = document.getElementById('content');
render(<AppContainer component={Main} />, element);

document.body.classList.remove('loading');

if (module.hot) {
  module.hot.accept('./Main', () => {
    render(
      <AppContainer
        component={require('./Main').default}
      />,
      document.getElementById('content')
    );
  });
}

I don't have react-hot in my loader chain with Babel, and I'm using Webpack 1.13.0 and React 0.14.X

[gaearon]

@alansouzati If you could create a sample project reproducing this (you can fork https://github.com/gaearon/react-hot-boilerplate/pull/61) and file an issue in https://github.com/gaearon/react-hot-loader repo, it would be very helpful! For now, closing it here.

[cameronroe]

Had the same issue. @alansouzati => Remove any hmr plugins/dependencies. npm prune your packages.

[davidfurlong]

react-native depends on react-transform-hmr https://github.com/facebook/react-native/blob/master/package.json#L180 so it seems a bit problematic that its deprecated..

[davidfurlong]

It seems doing a npm uninstall react-transform-hmr resolves this. This behaviour is highly irregular, and it appears I need react-transform-hmr as I'm sharing the package.json between a react-native and react application (to share redux states). (Although that might be a mistake in itself)

[c-h-]

Has there been any movement on this? Doesn't sound like it's possible to get HMR working in a project that co-locates React and React Native due to react-transform-hmr being present?

PS hey @davidfurlong long time no see.

[davidfurlong]

@c-h- It has been a while! Can't be of much help unfortunately - I have simply extracted shared code from react-native & react into a separate codebase and included it in both projects

[nealoke]

My issue was not the react-transform-hmr but the babel preset babel-preset-react-hmre which also included an outdated react-proxy. Removing these solved the problem.

[slorber]

Also run into this issue while trying to use React-Native-Web with Gatsby and trying to transpile glamorous-native in Gatsby webpack config, due to the RN preset. npm uninstall react-transform-hmr seems to work