@bugsnag/electron: Can't resolve fs/path/other node dependencies when bundling renderer process with webpack

[trungutt]

👋 Thanks for working on this project.

I think the bug was already reported previously here. Unfortunately there's no resolution for it yet. I'm trying to bring up more information for you to understand and hopefully resolve it.

Environment

• Bugsnag version: "@bugsnag/electron": "^7.21.0" (latest at the time of writing)

Describe the bug

According to the docs

Note When webPreferences.nodeIntegration is false, a bundler (such as Webpack) is necessary to resolve dependencies in renderer code."

It's unclear how to "resolve dependencies in renderer code", if these dependencies are Node-related and we are in the UI renderer process.

Our specific use case:

• When importing @bugsnag/electron in the UI renderer process, webpack starts complaining about missing Node-related dependencies.

• Explanation:

https://github.com/bugsnag/bugsnag-js/blob/bd72a11facc5c4d14d717fb264dde8f0315b0d5a/packages/electron/src/notifier.js#L1-L7

From above, @bugsnag/electron uses CJS import (runtime dynamic import) and this leads bundlers (like Webpack) to just include all the CJS style imports directly in the bundle without being able to check whether the imports are actually used. So in the final bundle, webpack need all Node-related dependencies requires by ./client/main and its direct/transitive dependencies. The UI renderer process doesn't need these ultimately.

Note You need to specify target: 'web' in Webpack configuration for UI renderer process to have this issue. Folks usually use target: 'electron-renderer' which polyfills the UI renderer build with some Node-related dependencies at build time but in reality our UI renderer is (and should be) a standalone webpage. By the way, this is recommended by Electron when using nodeIntegration: false/contextIsolation: true (the case of our application).

For now, I see two workarounds:

• Specify this below in Webpack configuration for UI renderer

resolve: {
  fallback: {
    path: false,
    crypto: false,
    zlib: false,
    stream: false,
    timers: false,
    fs: false,
  },
},

but like said above, webpack still bundles all code from ./client/main to the final UI bundle, which isn't used at runtime.

• Specify multiple exports in @bugsnag/electron package.json, something like:

{
  "main": "src/notifier.js",
  "exports": {
    ".": "./src/notifier.js",
    "./renderer": "./src/client/renderer.js",
    "./main": "./src/client/main.js",
  },
}

so that consumers can choose what they want, instead of importing the whole notifier.js. The requires a bit of code refactoring so we have a Client in each main.js/renderer.js.

TIA for feedbacks!

[mclack]

Hi @trungutt

Thanks for your patience on this matter.

It looks like the error message you are seeing is pointing towards the reason for the issue, and as such, we have added an item to our backlog to investigate Webpack 5's compatibility. Although we can't currently provide an ETA on this work, we will make sure to update this thread with any developments.

[sibljon]

I've just run into the exact same thing and I just sent an email to support. I'll try to post here as I get it resolved.

[mclack]

Hi @trungutt and @sibljon

I'm reaching out to let you know that support for Webpack 5 in @bugsnag/electron is now available as part of the v7.23.0 release.

Please let us know if you continue to have any issues after upgrading @bugsnag/electron to 7.23.0.