Add rollup-plugin-replace to replace process.env in React builds

[nguyensomniac]

Love using Figplug but always wished the React scaffold would work :( This fixes the error seen in #2, where the imported React library errors out because process is undefined.

I tested this end-to-end with the default React scaffold, and things are working again in Figma!

[rsms]

Thanks!
I’ll test this locally tomorrow to be sure, but it looks good to me.
I’d also first like to find a repro for the issue and update test.sh so that it fails, and then apply this patch to see the tests pass.

[rsms]

Wonder if the calls to JSON.stringify can be replaced with just constants, e.g. '”development"'

[rsms]

Okay. It seems the culprit is that the latest react library tries to unconditionally access process.env.NODE_ENV which is of course not set in a web browser.

The nicest fix here is to conditionally declare process at the end of lib/figplug.js

Reasons for doing that instead of using :

1. Always try to avoid NPM modules when possible.
2. rollup-plugin-replace seems to replace strings, which is always a tricky thing to do in generated code. Figplug applies some constant optimizations, so code like "process.env" + "NODE_ENV" becomes "process.env.NODE_ENV” which would be replaced by "production" which turns out as invalid JavaScript (i.e. ""production"”)

Something like this, at the end of lib/figplug.js, should do it:

// Finally, set process to make things like process.env.NODE_ENV not explode.
if (typeof process == "undefined") {
  const process = { env: { NODE_ENV: DEBUG ? "production" : "development" } }
} else if (!process.env) {
  process.env = { NODE_ENV: DEBUG ? "production" : "development" }
}

Let me know if you’d like me to make this small change, or if you’d like to update your PR to this :–)

[rsms]

I just tested this theory (it works) but it’s not ideal.
The constant evaluator can’t guarantee that an object property doesn’t change at runtime, so it is unable to eliminate code like this:

if (process.env.NODE_ENV !== "production") {
// lots of helper code
}

Which brings us back to your idea with just replacing strings in the code.
I wonder if we can somehow replace this at the AST level instead, so that legitimate text containing the string isn’t replaced...

[rsms]

Okay, I’ve got a good fix for this. Sorry that this PR didn’t land! I really appreciate the time you took to help out :-)