mobx-react-lite:3.1.5 + parcel, invalid production build output

[evilfer]

Hi,

I have a project using react+typescript+mobx, and builds were fine with mobx-react:7.0.0 (and dependency mobx-react-lite:3.0.1).

However, after upgrading to mobs-react:7.0.4 and mobx-react-lite:3.1.5, production builds contain what looks like invalid JS output.

As an example, I created this repository: https://github.com/evilfer/mobx-react-lite-test-build.

In there, https://github.com/evilfer/mobx-react-lite-test-build/blob/master/dist-mf704-mrl315/mrl.a6b78398.js is the JS output with mobs-react:7.0.4 and mobx-react-lite:3.1.5. The output includes in four places this code: {}() which fails to run with error "{} is not a function".

The same project build with versions mobx-react:7.0.0 and mobx-react-lite:3.0.1 has correct output https://github.com/evilfer/mobx-react-lite-test-build/blob/master/dist-mr700-mrl301/mrl.5d4eb783.js, without any case of {}().

Am I missing some configuration change that is needed with the latest mobx-react/mobx-react-lite versions?

[danielkcz]

That's really curious. I did some build changes due to monorepo migration, but nothing too serious that could cause something like that.

It seems like some problem in mobx-react, because when I use observer from mobx-react-lite directly, the output seems correct. Do you plan to have class-based components? If not, you can ignore mobx-react completely.

[evilfer]

I think in all cases where {}() happens, the source code is isUsingStaticRendering(). So somehow import { isUsingStaticRendering } from "mobx-react-lite" fails and isUsingStaticRendering ends up being {} in the compiled code.

I'm guessing the way "mobx-react-lite" exports isUsingStaticRendering must have changed somehow. The problem really happens only when upgrading mobx-react-lite.

In my project I use only function components, so I'll try -lite directly, but anyway I think it's an interesting issue, I'm interested in understanding what's happening for parcel to produce something like {}().

[evilfer]

Will open a ticket with them :), I'll update this if I get a response.

[danielkcz]

Well, I found the difference, you are right it originates in exports from mobx-react-lite

https://unpkg.com/browse/mobx-react-lite@3.1.0/lib/index.js
https://unpkg.com/browse/mobx-react-lite@3.1.5/lib/index.js

The new version uses

Object.defineProperty(exports, "isUsingStaticRendering", { enumerable: true, get: function () { return staticRendering_2.isUsingStaticRendering; } });"

instead of direct

exports.isUsingStaticRendering = staticRendering_2.isUsingStaticRendering;

I am not yet sure what causes such a difference, but I would say Parcel should be able to handle this.

[danielkcz]

I consulted it with Michel, and the new version is actually an improvement of TS 4.0 that should be more correct in ESM terms. So I guess Parcel needs to tackle that for sure.

[evilfer]

Thank you for your responses. The ticket in the Parcel2 repo is parcel-bundler/parcel#5334, will update here if they respond.

In the meantime, I can confirm that using directly mobx-react-lite:3.1.5 in the small exampe repo seems to work correctly, at least {}() is not in the output :).