SK + web3 onboard + vercel - minimal

This example repo provided by blocknative can be found at blocknative/web3-onboard/tree/main/examples/with-sveltekit

This repo has the fixes recommended at the web3-onboard docs

  build: {
    rollupOptions: {
      external: ['@web3-onboard/*'],
      plugins: [nodePolyfills({ include: ['crypto', 'http'] }), inject({ Buffer: ['Buffer', 'Buffer'] })]
    },
    commonjsOptions: {
      transformMixedEsModules: true
    }
  },

and

<script>
  var global = global || window
</script>

When deploying this example repo to vercel, this polyfill error is returned.

Cloning github.com/Elliott-Green/sk-web3-vercel-minrepo (Branch: main, Commit: d984944)
Cloning completed: 292.694ms
Previous build cache not available
Running "vercel build"
Vercel CLI 33.5.3
Installing dependencies...
yarn install v1.22.17
warning package.json: No license field
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
warning with-sveltekit@0.0.1: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "@web3-onboard/walletconnect > @walletconnect/modal > @web3modal/core > valtio > use-sync-external-store@1.2.0" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning " > rollup-plugin-polyfill-node@0.12.0" has unmet peer dependency "rollup@^1.20.0 || ^2.0.0 || ^3.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 21.44s.
Running "yarn run build"
yarn run v1.22.17
warning package.json: No license field
$ vite build
vite v4.0.5 building for production...
transforming...
✓ 677 modules transformed.
6:45:33 PM [vite-plugin-svelte] dom compile done.
package        files  time    avg
with-sveltekit     4 0.17s 43.4ms
[vite]: Rollup failed to resolve import "Buffer" from "/vercel/path0/node_modules/@walletconnect/encoding/dist/esm/index.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "Buffer" from "/vercel/path0/node_modules/@walletconnect/encoding/dist/esm/index.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-9cd3c8cb.js:44636:19)
    at onwarn (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-9cd3c8cb.js:44407:13)
    at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:24276:13
    at Object.logger [as onLog] (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:25950:9)
    at ModuleLoader.handleInvalidResolvedId (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:24862:26)
    at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:24822:26
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1

Reproduction

git clone https://github.com/Elliott-Green/sk-web3-vercel-minrepo.git npm i npm run build npm run preview git commit -m "[chore] poke build" vercel builds, errors with log

create-svelte

Everything you need to build a Svelte project, powered by create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Build env configurations and troubleshooting

For further build env configs and troubleshooting checkout our official docs here