Sveltekit example does not work with vercel

Elliott-Green commented 4 months ago

Current Behavior

Deploying the sveltekit example repo here https://github.com/blocknative/web3-onboard/tree/main/examples/with-sveltekit to vercel causes an error

Expected Behavior

Deploying to vercel should return no error.

Steps To Reproduce

https://github.com/Elliott-Green/sk-web3-vercel-minrepo OR https://github.com/blocknative/web3-onboard/tree/main/examples/with-sveltekit

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

What package is effected by this issue?

@web3-onboard/core

Is this a build or a runtime issue?

Build

Package Version

2.21.0

Node Version

20.10.0

What browsers are you seeing the problem on?

Firefox

Relevant log output

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

Anything else?

No response

Sanity Check

[X] 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.

Adamj1232 commented 4 months ago

@Elliott-Green I was able to get it up and running with the following steps: First, ensure you have @rollup/plugin-commonjs installed:

npm install @rollup/plugin-commonjs --save-dev

Then, include it in your Vite configuration:

import commonjs from '@rollup/plugin-commonjs';

// Inside your Vite config
const config: UserConfig = {
  plugins: [
    sveltekit(),
    commonjs({
      include: /node_modules/ // Only transpile CommonJS modules from node_modules
    }),
    // Your other plugins...
  ],
  // Your other config options...
};

Can you give that a try and let me know?

Adamj1232 commented 4 months ago

PR to get the example working : https://github.com/blocknative/web3-onboard/pull/2086

Elliott-Green commented 4 months ago

Hey @Adamj1232,

Thanks for looking into this.

I've picked the changes up from #2086 but alas, I'm still having the same issues.

Did you ever get a vercel deployment out for 2086? build+preview work locally, so looks ok, but will error on vercel.

Had a few other local issues that I managed to resolve, would recommend these packages get updated as they've been patched to work nicely with commonJS - or something, I have no idea, this side of js is a black box to me.

4:05:42 PM [vite] Error when evaluating SSR module /node_modules/@web3-onboard/core/node_modules/svelte-i18n/dist/runtime.esm.js: failed to import "intl-messageformat"
|- SyntaxError: [vite] Named export 'IntlMessageFormat' not found. The requested module 'intl-messageformat' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'intl-messageformat';
const {IntlMessageFormat} = pkg;

By overriding some of the package versions, I am able to resolve some of my build issues like:

"overrides": {
        "@web3-onboard/core": {
            "svelte-i18n": "^4.0.0",
            "intl-messageformat": "^10.5.1",
            "bnc-sdk": {
                "rxjs": "^7.8.1"
            }
        },
        "@web3-onboard/coinbase": {
            "@coinbase/wallet-sdk": {
                "rxjs": "^7.8.1"
            }
        },
        // Not sure about this one, trying to fix atm
        "@web3-onboard/trezor": {
            "@ethereumjs/tx": "^5.2.1",
            "eth-crypto": {
                "@ethereumjs/tx": "^5.2.1"
            }
        }
    }

Svelte-i18n/intl-messageformat

https://stackoverflow.com/questions/77193468/syntaxerror-when-building-sveltekit-the-requested-module-intl-messageformat-i https://github.com/kaisermann/svelte-i18n/issues/232

ethereumjs/tx

error during build:
RollupError: [vite-plugin-sveltekit-compile] node_modules/eth-crypto/dist/es/sign-transaction.js (1:9): "Transaction" is not exported by "node_modules/eth-crypto/node_modules/@ethereumjs/tx/dist.browser/index.js", imported by "node_modules/eth-crypto/dist/es/sign-transaction.js".
file: /Users/elliott/Documents/GitHub/5725Cafe/node_modules/eth-crypto/dist/es/sign-transaction.js:1:9
1: import { Transaction } from '@ethereumjs/tx';
            ^
2: import { publicKeyByPrivateKey } from './public-key-by-private-key';
3: import { toAddress as addressByPublicKey } from './public-key';
file: /Users/elliott/Documents/GitHub/5725Cafe/node_modules/eth-crypto/dist/es/sign-transaction.js:1:9
1: import { Transaction } from '@ethereumjs/tx';
            ^
2: import { publicKeyByPrivateKey } from './public-key-by-private-key';
3: import { toAddress as addressByPublicKey } from './public-key';

blocknative / web3-onboard