React: useEffect hook is broken in production

[TrySound]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

useEffect hook throws an error when production bundle is used. In development everything is good.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/980q737lk4

What is the expected behavior?

All hooks should work in production.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

react v16.7.0-alpha.0
react-dom v16.7.0-alpha.0

[arianon]

Your example works when I download it, use the normal entrypoint (as in, replace "react/cjs/react.production.min" with just "react"), and then run yarn; yarn build; serve -s build as you would with a normal CRA app.

The issue seems to stem from trying to use the production build directly.

[TrySound]

@arianon I know development bundle works fine. I mentioned it in issue. The issue is exactly about production bundle. The title is clear about it.

[arianon]

useEffect hook is broken in production

No, it isn't. it breaks when importing the production bundle on development mode instead of using react-scripts build

Notice that React Developer Tools is indicating that the production build is being used.

[TrySound]

And what react-script build changes in my code to make useEffect work?

It's actually broken in my app in production and I don't use CRA in it.

[gaearon]

This particular sandbox is set up incorrectly because ReactDOM just imports react which points to development bundle. So you end up with two different Reacts.

[TrySound]

@gaearon Funny story. This code is broken for me with uglify and works fine with terser.

import React from "react";
import ReactDOM from "react-dom";

function App() {
  React.useEffect(() => {
    console.log("mounted");
  }, []);

  return (
    <div>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

I get this error with uglify

We probably need to sunset it and move all forces to terser support.

[TrySound]

This is uglify-js by the way. Not only unsupported uglify-es is buggy.

[gaearon]

Can you try to extract the minimal repro for Uglify?

[gaearon]

I'll close since there's no bug in React.