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

[jonrimmer]

Environment

• Package version(s): "@blueprintjs/core": "^3.18.1"

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

Steps to reproduce

1. 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!

[adidahiya]

What build system are you using? How are you getting Blueprint on the page?

[jonrimmer]

I'm using https://nx.dev/web. I think their build system wraps Webpack.

[adidahiya]

Webpack runs in Node, so process should be defined... looks like there are other requests for nx to support environment variables: nrwl/nx#1848

[jonrimmer]

@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.

[kresli]

just hit the same issue trying use blueprintjs in electron app

[kresli]

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

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

[javahuang]

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

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

hmr will not work when i set global: {}, just set "process.env": "{}",

[d11z]

This was driving me nuts all day, I had to use this instead of the above in order for my electron application to build at all:

plugins: [
    new webpack.DefinePlugin({
      'process.env': `(${JSON.stringify(process.env)})`
    })
]

[uglycoyote]

I ran into this trying to use esbuild to build BlueprintJS. Explicitly defining process myself in my index.html got me past it, but seems like an egregious hack

I added the following before importing my bundle, which got me past the problem.

    <script>
        const process = {};
        process.env = "DEBUG";
    </script>
    <script src="build/index.js"></script>     <---- Bundle Import

But this seems like something that should be cleaned up.

Interestingly, it looks like elsewhere in the blueprint source it checks for the existence of process in a nicer way. I found this in my bundle:

// node_modules/@blueprintjs/core/lib/esm/common/utils/jsUtils.js
  function isNodeEnv(env) {
    return typeof process !== "undefined" && process.env && env === "development";
  }

But if I don't explicitly define process, here is where it fails, due to accessing process without checking if it is defined:

const NS = process.env.BLUEPRINT_NAMESPACE || process.env.REACT_APP_BLUEPRINT_NAMESPACE || "bp3";    

with the error:

Uncaught ReferenceError: process is not defined
    <anonymous> classes.ts:22
    <anonymous> index.js:21565
classes.ts:22:11

[uglycoyote]

Thanks, that was fast. you are awesome @adidahiya .