[Bug]: Building with rollup error on "require$$0$5" undefined

[Rizary]

Current Behavior

Rollup able build and run the project but in the runtime, I get blank page. When look into browser console, it says:

index.js:661 Uncaught ReferenceError: require$$0$5 is not defined
    at index.js:661:23

Expected Behavior

the page loads fine and Onbroad is initialized.

Steps To Reproduce

1. git clone https://github.com/Rizary/wasm-rust-onboard-web3.git
2. npm run watch

What package is effected by this issue?

@web3-onboard/core

Is this a build or a runtime issue?

Runtime

Package Version

"^2.6.0"

Node Version

v18.7.0

What browsers are you seeing the problem on?

No response

Relevant log output

(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on "url", "util", "events", "buffer", "assert", "path", "os", "stream", "https", "http" and "zlib". You might need to include https://github.com/FredKSchott/rollup-plugin-polyfill-node
http://localhost:8189 -> /home/rizary/apps/devhtml
LiveReload enabled
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/@ethersproject/providers/lib.esm/base-provider.js
1: "use strict";
2: var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                    ^
3:     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4:     return new (P || (P = Promise))(function (resolve, reject) {
...and 1 other occurrence
node_modules/@ethersproject/providers/lib.esm/cloudflare-provider.js
1: "use strict";
2: var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                    ^
3:     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4:     return new (P || (P = Promise))(function (resolve, reject) {
...and 1 other occurrence
node_modules/@ethersproject/providers/lib.esm/etherscan-provider.js
1: "use strict";
2: var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                    ^
3:     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4:     return new (P || (P = Promise))(function (resolve, reject) {
...and 1 other occurrence

...and 27 other files
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
url (guessing 'require$$0$5')
util (guessing 'require$$0$6')
crypto (guessing 'require$$0$7')
events (guessing 'require$$0$a')
buffer (guessing 'require$$2$6')
assert (guessing 'require$$0$b')
fs (guessing 'require$$0$8')
path (guessing 'require$$1$4')
os (guessing 'require$$2$7')
stream (guessing 'require$$0$9')
string_decoder/ (guessing 'require$$10$3')
https (guessing 'require$$1$5')
http (guessing 'require$$2$8')
net (guessing 'require$$3$4')
tls (guessing 'require$$4$3')
zlib (guessing 'require$$0$c')
(!) Plugin node-resolve: preferring built-in module 'buffer' over local alternative at '/home/rizary/apps/node_modules/buffer/index.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) Plugin node-resolve: preferring built-in module 'string_decoder/' over local alternative at '/home/rizary/apps/node_modules/string_decoder/lib/string_decoder.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) Circular dependencies
node_modules/joi/lib/index.js -> node_modules/joi/lib/cache.js -> node_modules/joi/lib/common.js -> node_modules/joi/lib/schemas.js -> node_modules/joi/lib/index.js
node_modules/joi/lib/common.js -> node_modules/joi/lib/messages.js -> node_modules/joi/lib/template.js -> node_modules/joi/lib/common.js
node_modules/joi/lib/common.js -> node_modules/joi/lib/messages.js -> node_modules/joi/lib/template.js -> node_modules/joi/lib/errors.js -> node_modules/joi/lib/annotate.js -> node_modules/joi/lib/common.js
...and 6 more
created devhtml/js in 47.6s

[2022-08-09 14:25:07] waiting for changes...

Anything else?

In the devtools, it shows:

index.js:661 Uncaught ReferenceError: require$$0$5 is not defined
    at index.js:661:23

Sanity Check

• If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

[lnbc1QWFyb24]

Hey @Rizary it looks like you will need the node builtins for the wallets that you are using. Could you try installing rollup-plugin-polyfill-node (npm i --save-dev rollup-plugin-polyfill-node) and then adding it as a plugin in your rollup config:

import nodePolyfills from 'rollup-plugin-polyfill-node'

export default {
  // ... other options
  plugins: [
    // ... other plugins
    nodePolyfills({ crypto: true, http: true })
};

[Rizary]

@aaronbarnardsound I already did that in the repo here: https://github.com/Rizary/wasm-rust-onboard-web3/blob/master/rollup.dev.js#L48 and after change it the way you write, the error still persist.

[lnbc1QWFyb24]

Ok no worries, I will try and build a basic rollup example to replicate and get back to you. What wallet modules are you using with Onboard?

[lnbc1QWFyb24]

I have a working Rollup example here with a few wallets if you would like to check it out and use as a reference.

[Rizary]

@aaronbarnardsound I only targeting metamask for now. I'll look into it.

[Rizary]

@aaronbarnardsound I've tried it with my project using your example and it works fine. Thank you for helping me.