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

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

Closed
jonrimmer opened this issue Sep 14, 2019 · 11 comments · Fixed by #4934
Closed

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

jonrimmer opened this issue Sep 14, 2019 · 11 comments · Fixed by #4934

Comments

@jonrimmer
Copy link

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
Copy link
Contributor

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

@jonrimmer
Copy link
Author

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

@adidahiya
Copy link
Contributor

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
Copy link
Author

@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
Copy link

kresli commented Mar 21, 2020

just hit the same issue trying use blueprintjs in electron app
image

@kresli
Copy link

kresli commented Mar 21, 2020

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

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

@javahuang
Copy link

javahuang commented Nov 27, 2020

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": "{}",

@maliyshock

This comment has been minimized.

@d11z
Copy link

d11z commented Sep 1, 2021

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)})`
    })
]

joffrey-bion added a commit to joffrey-bion/seven-wonders that referenced this issue Sep 7, 2021
@uglycoyote
Copy link

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
Copy link

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

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

Successfully merging a pull request may close this issue.

7 participants