Minified React error #130

[wroughtec]

Getting Minified React error #130 with 11.1.1

Upgrade from 11.1.0 > 11.1.1 and in dev or locally I had no issues but as soon as I try in prod mode I get the dreaded minified error

Unfortunately its not something that can be replicated on codesandbox as can't switch to prod. I will try and get a mini replicant repo up. But thought I would post here encase anyone else hits this and is banging their heads trying to work out what caused it.

Expected behavior:

Not to get a minified error

Environment information:

• react version: 17.0.1
• @emotion/react version: 11.1.1

[Andarist]

Something has probably been removed incorrectly from the bundle. What bundler are you using?

[wroughtec]

"webpack": "5.4.0",
"webpack-cli": "4.2.0"

I might also have been wrong about the version number the problem seems to also happen at version 11.1.0 but not 11.0.0

[wroughtec]

The only reason I first suspected it could be emotion was based upon:
react-boilerplate/react-boilerplate#2518

(I am not using react-boilerplate) but it seems to put me on the right path

[Andarist]

This issue seems to be highly unrelated but coincidentally pointed you in the right direction 😅

I would love to get to fixing this right away but I need to have a repro case first. From what I understand this has been caused by the latest tree-shakeability improvements which turned out to be too aggressive but I would very much like to keep them if possible so I need to understand first why this happens and how I could work around this.

[wroughtec]

sure once I've got this release out (thankfully I checked staging before I hit release lol) I will get a repo up either this evening or tomorrow morning

[wroughtec]

Ok an attempt to reproduce failed, but I noticed webpack had an update installed to v5.5.0 and it seems to have resolved the issue so webpack may have been the culprit

[Andarist]

So just to confirm - webpack@5.4.0 has suffered from this issue with @emotion/react@1.1.1 but webpack@5.5.0 doesn't suffer from it any longer?

If that's the case then I guess this might be mentioned in their release note as:

fix side-effect-free handling of exports for concatenated modules that causes an unused export

And this seems to be the PR that has introduced this fix: https://github.com/webpack/webpack/pull/11999/files . It looks slightly different from our setup but there is a chance that the issue that they have fixed somehow affected us.

[wroughtec]

it may also be my setup as I am using lerna etc. as on the minimal repo I could not replicate for either version but guess it may depend upon the different packages and there may have been a clash. For now it seems resolved if I hit it again I will do some further digging.

[Andarist]

I would try the reverse approach when it comes to reproducing it - remove stuff until this stops happening. I'm not sure though if it's worth it at this point as the new webpack seems to have fixed this. The main benefit of having a repro case now would be the possibility to provide a regression test for webpack based on it.

[alexreardon]

I can confirm this issue is occurring with the parcel@2 bundler which uses the https://github.com/terser/terser project. I'm getting this error:

Uncaught TypeError: {}.call is not a function

[alexreardon]

I'm guessing this issue only occurs when process.env.NODE_ENV === "production" as it will use a different file

if (process.env.NODE_ENV === "production") {
  module.exports = require("./emotion-react.cjs.prod.js");
} else {
  module.exports = require("./emotion-react.cjs.dev.js");
}

[Andarist]

@alexreardon would you be able to prepare a runnable repro case? It seems like a bug in Parcel (I believe they implement a tree-shaking algorithm that might be broken). In webpack's case the culprit was not Terser but the webpack itself (to the best extent of my knowledge).

If the repro case would be provided I could try to debug it and try to report the distilled repro case to the Parcel team.

Also - does this problem occur with @emotion/react@11.0.0?

[alexreardon]

The issue does not occur with 11.0.0

[Andarist]

Would you be able to work on providing a repro case?

[alexreardon]

How would you like me to provide a reproduction for this one?

[Andarist]

A GitHub repository with the issue reproduced would be great. It could even be a full-blown app - I would be able to distill it to a minimal repro case but I understand that you have most probably encountered this in some private repo that you can't share (unless you can?). When trying to pinpoint problems like this I usually just start to remove files/lines as long as I can remove more stuff while still being able to reproduce the issue.

[alexreardon]

I couldn't reproduce with create-react-app

[alexreardon]

I've managed to reproduce it with a super basic parcel@2 setup. I'll put my up my repo soon

[Andarist]

If that was bashing then how is bashing me helpful?

Thank you very much ❤️ this will be of tremendous help here.

[alexreardon]

Here you go @Andarist: https://github.com/alexreardon/emotion11.1.1-bug

• yarn start: start local development (works)
• yarn build: create production build. You then need to start a static server for ./dist
• http-server ./dist: using http-server to start a static server. Emotion will bug out and you will see an error in the console

[alexreardon]

My example has this:

<div css={[css`color:red`]}>

I was playing around.

But this will error out too:

<div css={css`color:red`}>

[Andarist]

Thank you - I will try to play around with this over the weekend.

[alexreardon]

I can confirm that the repo I made works for production builds on @emotion/react@11.0.0

When switching dependency versions, it's safest to remove .parcel-cache and .dist

[Andarist]

@alexreardon Thanks to your repro I was able to create a minimal repro case for the Parcel team. See the issue I've filed here: parcel-bundler/parcel#5375 . Note that this is a different problem than the one that got originally reported here.

[alexreardon]

Thank you for going so deep @Andarist, I really appreciate it. Sorry I sent you down a parcel specific rabbit hole that was actually already fixed.

I have now upgraded parcel and moved to emotion@11.1.1 and my issue is gone

[Andarist]

Thank you for going so deep @Andarist, I really appreciate it. Sorry I sent you down a parcel specific rabbit hole that was actually already fixed.

Not a problem! I haven't rechecked their latest nightly build either ;p

I have now upgraded parcel and moved to emotion@11.1.1 and my issue is gone

As both @wroughtec's and your issues have been fixed upstream in the consuming tools I'm going to close this issue now.