React: useEffect fails with `Cannot set property 'lastEffect' of null` in production mode

[steadicat]

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

What is the current behavior?
When rendering a component that calls useEffect in production mode, React crashes with Cannot set property 'lastEffect' of null.

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:
I’m still working on reproducing locally. Meanwhile, here’s the relevant error from Sentry:

What is the expected behavior?
No error.

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

[gaearon]

Would be very helpful to have some code example.

[steadicat]

Sorry for the delay. Here’s a simple repo that repros: https://github.com/steadicat/react-useeffect-test

The code is pretty straightforward. The bug seems to be caused by the latest version of uglifyjs-webpack-plugin (2.0.1).

[gaearon]

The bug seems to be caused by the latest version of uglifyjs-webpack-plugin (2.0.1).

Do you mind reporting it upstream please? Seems like we can't fix this.

[steadicat]

Sure thing: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/374.

[pie6k]

Just for reference, here is minified piece of code that is breaking when I'm using useEffect

function yg(a, b, c, d) {
  a = {
    tag: a,
    create: b,
    destroy: c,
    deps: d,
    next: null
  };
  null === hg ? (hg = {
    lastEffect: null
  }, hg.lastEffect = a.next = a) : (b = hg.lastEffect, null === b ? hg.lastEffect = a.next = a : (c = b.next, b.next = a, a.next = c, hg.lastEffect = a));
  return a;
}

and prettierized:

function yg(a, b, c, d) {
  a = {
    tag: a,
    create: b,
    destroy: c,
    deps: d,
    next: null
  };
  null === hg
    ? ((hg = {
        lastEffect: null
      }),
      (hg.lastEffect = a.next = a))
    : ((b = hg.lastEffect),
      null === b
        ? (hg.lastEffect = a.next = a)
        : ((c = b.next), (b.next = a), (a.next = c), (hg.lastEffect = a)));
  return a;
}

[theskillwithin]

is this fixed now? I don't seem to be experiencing this problem anymore

[gsanta]

I still have this problem.

[gaearon]

This problem is unrelated to React. If you have it, you are using a broken minifier.

I recommend upgrading to terser if you use an old version of Uglify.
terser doesn't have this problem.

For example, you might want to switch from uglifyjs-webpack-plugin to terser-webpack-plugin.