Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"process is not defined" error in common/classes.js

See original GitHub issue

Environment

Package version(s): “@blueprintjs/core”: “^3.18.1”

If possible, link to a minimal repro (fork this code sandbox):

Steps to reproduce

Use BlueprintJS with a build system that does not define process.

Actual behavior

Uncaught ReferenceError: process is not defined
    at Module.../../../node_modules/@blueprintjs/core/lib/esm/common/classes.js (classes.js:20)
    at __webpack_require__ (bootstrap:79)
    at Module.../../../node_modules/@blueprintjs/core/lib/esm/accessibility/focusStyleManager.js (focusStyleManager.js:1)
    at __webpack_require__ (bootstrap:79)
    at Module.../../../node_modules/@blueprintjs/core/lib/esm/accessibility/index.js (index.js:1)
    at __webpack_require__ (bootstrap:79)
    at Module.../../../node_modules/@blueprintjs/core/lib/esm/index.js (index.js:1)
    at __webpack_require__ (bootstrap:79)
    at Module../app/app.tsx (app.tsx:1)
    at __webpack_require__ (bootstrap:79)

Expected behavior

It should not error.

Possible solution

https://github.com/palantir/blueprint/blob/develop/packages/core/src/common/classes.ts#L22

process is a node API. It might exist in the browser if the build system happens to have defined it, but you should not just blindly assume it will be there!

Issue Analytics

State:
Created 4 years ago
Reactions:14
Comments:11 (2 by maintainers)

Top GitHub Comments

24reactions

kreslicommented, Mar 21, 2020

I was able to fix it by adding following to webpack config

plugins: [
new webpack.DefinePlugin({
    "process.env": "{}",
    global: {}
  })
]

11reactions

jonrimmercommented, Sep 17, 2019

@adidahiya This error is occuring in the browser, not in Node. Webpack is a “bundler”, e.g. it runs in Node, but it creates a combined JS file to be executed in the browser. That bundle includes the compiled result of classes.ts. There is a big difference between Webpack the tool, which runs at build-time in Node, and the output of Webpack, which runs in the browser.

If you try to reference a Node API from code running in the browser, it will not work, unless your build tool (such as Webpack) has specially inserted the relevant symbols. However, you cannot assume that it will do this. Some build setups will do so, but many others won’t. For example, you might not be using a bundler at all, and might be importing the ESM module directly using <script type="module"> syntax.

Top Results From Across the Web

javascript - Uncaught ReferenceError: process is not defined

My script is very simple, I am just trying to use a basic function of node.js, so I cannot figure out what errors...

ReferenceError: “process is not defined” - GIMTEC

In NodeJS, “process” is defined, but not in the browser. This is because NodeJS and the browser are different runtime environments. Common Error....

JavaScript Errors: Anatomy of the Error | Bugsnag Blog

Frequently this happens when calling something like a function that actually isn't a function because it is “undefined” or some other value.

Importing '@metaplex-foundation/js' results in 'process is not ...

I eventually solved this adding a polyfill for process into my vite.config.ts define: { "process.env": process.env ?? {}, },.

process is not defined" when importing Mongoose - Reddit

I converted the file to JavaScript and get the same error. I'm calling the function sendScore() from App.tsx, which includes the React frontend ......