esm uses process.node.env causing an error.

[mmulet]

🐛 Bug Report

When using immer.esm.js on browser. We get
Uncaught ReferenceError: process is not defined

<script type="module" src="./testESM.js"></script>

import { produce } from "https://unpkg.com/[email protected]/dist/immer.esm.js";

Declaring the variable ahead of time fixes the issue.

<script>
  let process = {
    env: {
      NODE_ENV: "production"
    }
  };
</script>

Link to repro

Couldn't use code-sandbox because it wanted to import all modules as
node modules instead of as an esm module.
repo

To Reproduce

npm install . && npm test

Observed behavior

On import, throws
Uncaught ReferenceError: process is not defined

Expected behavior

Not throwing an exception

Environment

We only accept bug reports against the latest Immer version.

• Immer version: latest
• N/A Occurs with setUseProxies(true)
• N/A Occurs with setUseProxies(false) (ES5 only)

[oriSomething]

You've just used the wrong reference. I think using https://unpkg.com/[email protected]/dist/immer.umd.production.min.js will fix you the issue

[mmulet]

Unfortunately, that reference doesn't export any functions and can't be used as an esm module.
So it won't work see this branch.
I've done some more digging, and it looks like the problem stems from tsdx, (which in turn uses the plugin babel-plugin-dev-expression).
It's replacing all instances of __DEV__ with the code incompatible with browsers.
There is even an open issue in the babel-plugin-dev-expression repo about supporting modern browsers.
I think this issue may be best solved upstream,

[mmulet]

Closing this issue.
For those of you following along from home:
Instead of using npm run build to build immer, use tsdx build --name immer --env production --minify --format esm to create a browser compatible esm file.
The immer maintainers might consider distributing this file as well as the other esm build, but that would be a different issue/debate.

[jeremychone]

Just my 2 cents. Immer is a great approach to immutable, and something that naturally fit client and server. Having something special to handle between client and server does add friction and unfortunate workarounds. We are using rollup/typescript, and I am not sure how to use the umd version, and the default setting seems to pickup the esm version by default. Anyway, for now, we have the following workaround in our code, and had to put it very high in the call stack.

// WORKAROUND for immer.js esm (see https://github.com/immerjs/immer/issues/557)
window.process = {
	env: {
		NODE_ENV: "production"
	}
};

Hope to understand how to setup immer with the rollup/typescript. I might be missing something obvious.