Getting build errors building browser extension locally

Code Contributions (Archived)
1

Clients / Repos Affected:

  • Browser Extension

Hello, I was trying to build the browser extension locally but i’m having build errors and i’m not sure what i’m doing wrong.

These are the version that i have installed:

  • node -v
    v16.11.1
  • npm -v
    8.0.0
  • gulp -v
    CLI version: 2.3.0
    Local version: 3.9.1

OS: Ubuntu 20.04.3 LTS

Do I have to do anything besides the Build/Run instructions on the github page for the extension? (GitHub - bitwarden/clients: Bitwarden client applications (web, browser extension, desktop, and cli))

Is it possible that the version of something i have is TOO new?

I have 2 warnings and I have 8 errors.
The errors all seem to be related to webpack.

They start like this:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it…

Any help would be appreciated.
I searched github and this bitwarden community forums and i couldn’t find any help.
If someone can point me in the right direction or let me know where i should of posted this instead. Thanks.

2

Can you post the full error messages?

I’d recommend using a Node version manager to make sure you’re using the recommended version. Node and npm can be touchy, using the right version is the easiest way to make sure it’s not causing the errors.

3

Hello, I actually do have nvm installed. I was just trying to run it with the latest version of everything i have. I didn’t see anything on the github page that said it was locked to a particular version. So maybe its possible that i’m running it with something that is too new.

Here are the error messages, sorry i wasn’t sure if there was a better way for me to make this easier to read:

ERROR in ./node_modules/@microsoft/signalr-protocol-msgpack/dist/esm/MessagePackHubProtocol.js 11:0-32
Module not found: Error: Can’t resolve ‘buffer’ in ‘/home/Nerd/Projects/bitWardenExtension/browser/node_modules/@microsoft/signalr-protocol-msgpack/dist/esm’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

  • add a fallback ‘resolve.fallback: { “buffer”: require.resolve(“buffer/”) }’
  • install ‘buffer’
    If you don’t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { “buffer”: false }
    @ ./node_modules/@microsoft/signalr-protocol-msgpack/dist/esm/index.js 6:0-66 6:0-66
    @ ./jslib/common/src/services/notifications.service.ts 11:0-70 57:37-74
    @ ./src/background/main.background.ts 26:0-83 121:40-60
    @ ./src/background.ts 1:0-58 2:49-63

ERROR in ./jslib/common/src/misc/utils.ts 3:48-62
Module not found: Error: Can’t resolve ‘url’ in ‘/home/Nerd/Projects/bitWardenExtension/browser/jslib/common/src/misc’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

  • add a fallback ‘resolve.fallback: { “url”: require.resolve(“url/”) }’
  • install ‘url’
    If you don’t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { “url”: false }
    @ ./src/background/main.background.ts 40:0-48 521:26-41
    @ ./src/background.ts 1:0-58 2:49-63

ERROR in ./node_modules/bl/bl.js 3:19-34
Module not found: Error: Can’t resolve ‘util’ in ‘/home/Nerd/Projects/bitWardenExtension/browser/node_modules/bl’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

  • add a fallback ‘resolve.fallback: { “util”: require.resolve(“util/”) }’
  • install ‘util’
    If you don’t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { “util”: false }
    @ ./node_modules/msgpack5/index.js 5:9-22
    @ ./node_modules/@microsoft/signalr-protocol-msgpack/dist/esm/MessagePackHubProtocol.js 12:0-37 93:22-30 205:22-30 218:22-30 231:22-30 237:22-30 254:22-30
    @ ./node_modules/@microsoft/signalr-protocol-msgpack/dist/esm/index.js 6:0-66 6:0-66
    @ ./jslib/common/src/services/notifications.service.ts 11:0-70 57:37-74
    @ ./src/background/main.background.ts 26:0-83 121:40-60
    @ ./src/background.ts 1:0-58 2:49-63

ERROR in ./node_modules/core-util-is/lib/util.js 103:0-52
Module not found: Error: Can’t resolve ‘buffer’ in ‘/home/Nerd/Projects/bitWardenExtension/browser/node_modules/core-util-is/lib’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

  • add a fallback ‘resolve.fallback: { “buffer”: require.resolve(“buffer/”) }’
  • install ‘buffer’
    If you don’t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { “buffer”: false }
    @ ./node_modules/readable-stream/lib/_stream_readable.js 67:25-48
    @ ./node_modules/readable-stream/readable-browser.js 1:10-63
    @ ./node_modules/msgpack5/lib/streams.js 3:16-52
    @ ./node_modules/msgpack5/index.js 6:14-38
    @ ./node_modules/@microsoft/signalr-protocol-msgpack/dist/esm/MessagePackHubProtocol.js 12:0-37 93:22-30 205:22-30 218:22-30 231:22-30 237:22-30 254:22-30
    @ ./node_modules/@microsoft/signalr-protocol-msgpack/dist/esm/index.js 6:0-66 6:0-66
    @ ./jslib/common/src/services/notifications.service.ts 11:0-70 57:37-74
    @ ./src/background/main.background.ts 26:0-83 121:40-60
    @ ./src/background.ts 1:0-58 2:49-63

ERROR in ./node_modules/msgpack5/index.js 4:13-30
Module not found: Error: Can’t resolve ‘assert’ in ‘/home/Nerd/Projects/bitWardenExtension/browser/node_modules/msgpack5’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

  • add a fallback ‘resolve.fallback: { “assert”: require.resolve(“assert/”) }’
  • install ‘assert’
    If you don’t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { “assert”: false }
    @ ./node_modules/@microsoft/signalr-protocol-msgpack/dist/esm/MessagePackHubProtocol.js 12:0-37 93:22-30 205:22-30 218:22-30 231:22-30 237:22-30 254:22-30
    @ ./node_modules/@microsoft/signalr-protocol-msgpack/dist/esm/index.js 6:0-66 6:0-66
    @ ./jslib/common/src/services/notifications.service.ts 11:0-70 57:37-74
    @ ./src/background/main.background.ts 26:0-83 121:40-60
    @ ./src/background.ts 1:0-58 2:49-63

ERROR in ./node_modules/msgpack5/lib/decoder.js 4:11-26
Module not found: Error: Can’t resolve ‘util’ in ‘/home/Nerd/Projects/bitWardenExtension/browser/node_modules/msgpack5/lib’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

  • add a fallback ‘resolve.fallback: { “util”: require.resolve(“util/”) }’
  • install ‘util’
    If you don’t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { “util”: false }
    @ ./node_modules/msgpack5/index.js 7:18-42
    @ ./node_modules/@microsoft/signalr-protocol-msgpack/dist/esm/MessagePackHubProtocol.js 12:0-37 93:22-30 205:22-30 218:22-30 231:22-30 237:22-30 254:22-30
    @ ./node_modules/@microsoft/signalr-protocol-msgpack/dist/esm/index.js 6:0-66 6:0-66
    @ ./jslib/common/src/services/notifications.service.ts 11:0-70 57:37-74
    @ ./src/background/main.background.ts 26:0-83 121:40-60
    @ ./src/background.ts 1:0-58 2:49-63

ERROR in ./node_modules/safe-buffer/index.js 2:13-30
Module not found: Error: Can’t resolve ‘buffer’ in ‘/home/Nerd/Projects/bitWardenExtension/browser/node_modules/safe-buffer’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

  • add a fallback ‘resolve.fallback: { “buffer”: require.resolve(“buffer/”) }’
  • install ‘buffer’
    If you don’t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { “buffer”: false }
    @ ./node_modules/msgpack5/index.js 3:13-42
    @ ./node_modules/@microsoft/signalr-protocol-msgpack/dist/esm/MessagePackHubProtocol.js 12:0-37 93:22-30 205:22-30 218:22-30 231:22-30 237:22-30 254:22-30
    @ ./node_modules/@microsoft/signalr-protocol-msgpack/dist/esm/index.js 6:0-66 6:0-66
    @ ./jslib/common/src/services/notifications.service.ts 11:0-70 57:37-74
    @ ./src/background/main.background.ts 26:0-83 121:40-60
    @ ./src/background.ts 1:0-58 2:49-63

ERROR in ./node_modules/tldjs/lib/clean-host.js 2:10-24
Module not found: Error: Can’t resolve ‘url’ in ‘/home/Nerd/Projects/bitWardenExtension/browser/node_modules/tldjs/lib’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:

  • add a fallback ‘resolve.fallback: { “url”: require.resolve(“url/”) }’
  • install ‘url’
    If you don’t want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { “url”: false }
    @ ./node_modules/tldjs/index.js 9:22-52
    @ ./jslib/common/src/misc/utils.ts 1:0-31 198:39-44 198:57-62 198:85-98 198:110-123 205:34-39 205:51-66 205:77-92 211:27-32 211:44-59 211:70-85
    @ ./src/background/main.background.ts 40:0-48 521:26-41
    @ ./src/background.ts 1:0-58 2:49-63

8 errors have detailed information that is not shown.
Use ‘stats.errorDetails: true’ resp. ‘–stats-error-details’ to show it.

webpack 5.58.2 compiled with 8 errors and 2 warnings in 23293 ms

4

Update: I got it to build correctly and looks like everything is working now!
I’m not sure what i did that fixed it. I just pulled latest and when trying to merge the latest with my local version i noticed that there were some changes on my local versions of package.json and package-lock.json that i did not make myself, at least intentionally.
I think what may have happened is that when i was using nvm it might of changed somethings in my package.json files that caused the build errors.

I do have some follow up questions:

  1. When testing the local version of the extension in the browser… is it connecting to the actual bitwarden servers?
  2. So would i be able to use my actual bitwarden account to login?
  3. Is it ok to log in with my actual bitwarden account or is it recommended or best practice to create an account that i would specifically use for testing my locally build version?

Thank you.

5

Hi @bitBelt , I’m glad you got that working! To answer your other questions:

  1. When testing the local version of the extension in the browser… is it connecting to the actual bitwarden servers?

Yes, unless you configure it to point to a local running server.

  1. So would i be able to use my actual bitwarden account to login?

Yes, indeed.

  1. Is it ok to log in with my actual bitwarden account or is it recommended or best practice to create an account that i would specifically use for testing my locally build version?

Yes, it absolutely is okay, however I know most of our team doesn’t do that because when you’re doing development work it’s generally a good idea that you’re not messing with things you care about :wink: , but there’s no reason you couldn’t. From a practical standpoint it may make sense to create a dummy account you simply use for development work, depending on what you’re building/doing… if you’re not working on anything “destructive” then you’re probably fine to use your actual production account (but I would probably still shy away from that unless you’re messing with a premium feature that you really need active for testing).

1 Like