Uncaught TypeError: reactLifecyclesCompat.polyfill is not a function

[oraricha]

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

Description

What you are reporting:
While upgrading to react-hot-loader 4.1.2, I get the following runtime error in the browser console:
Uncaught TypeError: reactLifecyclesCompat.polyfill is not a function

When I look into the dist code in my node-modules folder, I see the following line failing: reactLifecyclesCompat.polyfill(AppContainer);, line 1440 in react-hot-loader.development.js.

The original source code is here: https://github.com/gaearon/react-hot-loader/blob/948138ace84d08c95f29870b1e461154f1208cc7/src/AppContainer.dev.js#L66

It seems the code is not transpiled into ES5.1 correctly. Correct me if I'm wrong.

If I change line 1440 in the dist version to reactLifecyclesCompat(AppContainer); everything runs as expected and my app works again.

Expected behavior

The code should run out of the box with no errors.

Actual behavior

The code fails to run since the function polyfill doesn't exist in reactLifecyclesCompat, but is exported as that module itself, as seen here in the source code: https://github.com/reactjs/react-lifecycles-compat/blob/e4e21a682361c6d580508fb5cfd33d265bb800cf/index.js#L47

Environment

React Hot Loader version: 4.1.2

Run these commands in the project folder and fill in their results:

1. node -v: v8.9.4

2. npm -v: 5.6.0

Then, specify:

1. Operating system: macOS Sierra 10.12.6
2. Browser and version: Chrome, version 65.0.3325.181

Thanks

[theKashey]

Not reproducible.

[Alek-S]

The client project I am on observed the same error described above starting last week, which led to us needing to downgrade the hot-reloader version.

[oraricha]

@theKashey If you install RHL in a demo app, using npm, and look at line 1440 in react-hot-loader.development.js, you'll see what I'm talking about.

[theKashey]

So export function polyfill(Component) { means - it will be named import of the library
Named import means - import {polyfill} from 'react-lifecycles-compat';
And that will be transpiled to reactLifecyclesCompat.polyfill(XXX);

[theKashey]

Tested on fresh install - everything works.
The only way to "break" it - use react-lifecycles-compat version 1, where polyfill was a default export.

Could you double check "what" is reactLifecyclesCompat for you?

[oraricha]

Sure, reactLifecyclesCompat is the polyfill function itself, instead of being an objet as the code assumes.
If I change the dist code from reactLifecyclesCompat.polyfill(AppContainer) to reactLifecyclesCompat(AppContainer) the code runs as expected, like I mention in the issue.

[theKashey]

@oraricha - that is only possible if you are using reactLifecyclesCompat v1.
Could you remove node_modules and install them back?
Something wired up in a weird way.

[chyzwar]

In my case there is conflict with [email protected] that use reactLifecyclesCompat v1.

[theKashey]

But it is listed in dependencies, not peerDependencies. How could it conflict?

[chyzwar]

Honestly, I do not know. From what I can see my deps tree look this:

• node_modules
  • react-lifecycle-compact-v1 (required by material-ui)
  • react-hot-loader
    • react-lifecycle-compact-v2

I think that it might be a bug in webpack or misconfiguration on my side. I use webpack 4.6.0 with mostly standard settings.

[theKashey]

That is a correct behaviour. And it should work without issues.

[max-mykhailenko]

Clearing node_modules and removing package-lock.json helps for me

[brendonco]

@max-mykhailenko did that, didnt work. still getting the error:

Uncaught TypeError: reactLifecyclesCompat.polyfill is not a function
    at eval (react-hot-loader.development.js:1398)

[larsnystrom]

I can confirm that changing reactLifecyclesCompat.polyfill(AppContainer) to reactLifecyclesCompat(AppContainer) solves this issue.

I have react-lifecycles-compat@v1 installed in my root node_modules and v3 installed in react-hot-loader/node_modules. So if the problem is that v1 is used instead of v3, then it appears this is a bug in webpack, right? I'm using [email protected] right now.

[theKashey]

As long people continues complaining about this, and the code itself is correct - I have to make a tought decision and solve it with a hack.

[theKashey]

Should be double fixed.