Use ESM build in modern browser (<script type="module" ...>)

Current Behavior

babel-plugin-dev-expression replaces all instances of __DEV__ with process.env.NODE_ENV !== 'production'. As the process variable may not be available outside of nodejs, it introduces an incompatibility with modern browsers.

Suggested solution(s)

There are several different ways we could approach fixing this:

1. Add an option to tsdx.config.js that allows users to opt out of babel-plugin-dev-expression, or replace with a different plugin.
2. Replace babel-plugin-dev-expression with another plugin that works in both browser and nodejs environments. I made a quick fork of babel-plugin-dev-expression that does just that.

Additional context

Affects these issues: immer an open issue in babel-plugin-dev-expression

[mmulet]

1. I agree, I think a separate production production, minified ESM build would be better than stubbing things in. I’ll close this issue.
2. For completion’s sake:

//test.js
var process = typeof process === "undefined" ? {env: {NODE_ENV: "production"}} : process;
console.log(process );

node test.js
#Outputs {env: {NODE_ENV: "production"}}

What’s happening, is that the process referred to in typeof process is the variable: var process. (This will actually throw an error if you use use let process or const process). So, it actually looks like this due to hoisting:

var process;
process = typeof process === "undefined" ? {env: {NODE_ENV: "production"}} : process;

As you can see, process will always be undefined. I mistakenly thought it worked in the browser because typeof process == undefined was the desired outcome. Finally: I did get a solution to work. In both node and browsers.

const globalScope = typeof global === "undefined" ? window : global;
const process = globalScope.process || {env: {NODE_ENV: "production"}};
//or in the future:
const process = globalScope.process ?? {env: {NODE_ENV: "production"}};

[agilgur5]

edit: Nevermind. Doesn’t work in nodejs

Why doesn’t this work in Node? Seems to work ok on my local Node version (v10.16.0). Can also simplify to just process || {env: {NODE_ENV: "production"}}.

Buuut stubbing process may cause unexpected errors further downstream if there were any checks for it etc. process?.env?.NODE_ENV is much safer with that regard

Giving it some thought, I also don’t think this solution is optimal for browser ESM support, because the files aren’t minified. If we make a production, minified ESM build, that would support this feature. As a workaround, I think if you run tsdx build --env production --minify --format esm, that’s what you’d get. But there’s no way to include that in package.json, afaik there is no field specific to browser ESM. See also #140 / #141 / #142 on why TSDX doesn’t ship dev/prod ESM bundles (tl;dr you can’t do conditional imports like you can with CJS) (Also --env and --minify aren’t officially supported (#508 , #310), I think they just happen to work because the options happen to get passed all the way through.)