Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught ReferenceError: process is not defined #3809

Open
justinfagnani opened this issue Dec 12, 2023 · 1 comment
Open

Uncaught ReferenceError: process is not defined #3809

justinfagnani opened this issue Dec 12, 2023 · 1 comment
Labels

Comments

@justinfagnani
Copy link

Intended outcome:

The mobx module load in a browser

Actual outcome:

mobx.esm.js throws an error:

Uncaught ReferenceError: process is not defined
    at errors.ts:78:35

How to reproduce the issue:

Use any system that loads modules directly to the browser, such as unpkg.com, jsDelivr, the lit.dev playground, etc.

The import something from mobx, like:

import {makeObservable, observable, action} from 'mobx';

This is due to this line in errors.ts:

var errors = process.env.NODE_ENV !== "production" ? niceErrors : {};

Presumably that comes from this source line:

const errors: typeof niceErrors = __DEV__ ? niceErrors : ({} as any)

but I can't see where __DEV__ is defined.

See this lit.dev playground reproduction:

https://lit.dev/playground/#gist=683ed61114ad2a20430fc8b1cc8229c8

You can get this working by defining window.process.env before loading the main script, but many users do not know to do that and get stuck.

Versions

6.12.0

Potential Solutions

Previous issues (#2564) have been closed due to bundlers using process.env.NODE_ENV !== "production" for optimization. This shouldn't be necessary anymore with wide support for Node package export conditions. Packages can publish separate builds for default and development conditions and tools will pick the correct build.

It's relatively easy to make these separate builds. Packages can define constants (like const __DEV__ = true) that are replaced in the default (prod) build to be false. The a tool like Rollup + Terser can do constant folding and dead code elimination to remove any code gated by if (__DEV__), etc.

@urugator
Copy link
Collaborator

urugator commented Dec 13, 2023

Use one of these:

mobx/scripts/build.js

Lines 56 to 59 in 55260aa

await moveTemp(`esm.development.js`)
await moveTemp(`esm.development.js.map`)
await moveTemp(`esm.production.min.js`)
await moveTemp(`esm.production.min.js.map`)

https://www.unpkg.com/browse/[email protected]/dist/

package export conditions

I am not up to date how "wide" the support is or what is or isn't possible. If you can guarantee it will work well with various setups, won't break existing uses and provide appropriate documentation, PR welcome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants