Sveltekit example does not work with vercel #2078

Elliott-Green · 2024-03-07T19:08:24Z

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 [email protected]: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "@web3-onboard/walletconnect > @walletconnect/modal > @web3modal/core > valtio > [email protected]" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".
warning " > [email protected]" 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

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 · 2024-03-14T17:14:36Z

@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 · 2024-03-14T17:45:51Z

PR to get the example working : #2086

Elliott-Green · 2024-03-15T18:27:28Z

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
kaisermann/svelte-i18n#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';

beeb · 2024-12-23T22:14:23Z

I still have the issue to this date. svelte-i18n v4.0.0 was released more than a year ago and likely solves the problem by depending on a newer version of intl-messageformat. Can web3-onboard be upgraded?

Also, the svelte/sveltekit examples could really use an upgrade to svelte 5 which has been out for 2 months.

@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

This did not work for me on @sveltejs/kit 2.15.0 and svelte 5.15.0.

At the moment I'm unable to use web3-onboard at all with svelte 5.

Adamj1232 · 2024-12-27T18:53:12Z

@beeb there is a release coming out today which will use the latest svelte-i18n version.
If you would like to update the sveltekit example that would be great as this project is open source and maintaining those examples across frameworks is a large effort.

Adamj1232 · 2024-12-27T21:17:27Z

This fix is live with the latest version released today! Please let me know if you have any other issues. Thanks again!

beeb · 2024-12-28T21:15:35Z

The build now works thanks! The wagmi integration still doesn't however. I'll open an issue if I find the time over the next days.

Elliott-Green added the bug Something isn't working label Mar 7, 2024

Elliott-Green assigned lnbc1QWFyb24, Adamj1232 and leightkt Mar 7, 2024

This was referenced Dec 27, 2024

FIX/UPDATE - i18n wallets connected string handling, formatting and version bumps #2326

Merged

Release 2.28.2 #2327

Merged

Adamj1232 closed this as completed Dec 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sveltekit example does not work with vercel #2078

Sveltekit example does not work with vercel #2078

Elliott-Green commented Mar 7, 2024

Adamj1232 commented Mar 14, 2024

Adamj1232 commented Mar 14, 2024

Elliott-Green commented Mar 15, 2024 •

edited

Loading

beeb commented Dec 23, 2024 •

edited

Loading

Adamj1232 commented Dec 27, 2024

Adamj1232 commented Dec 27, 2024

beeb commented Dec 28, 2024

Sveltekit example does not work with vercel #2078

Sveltekit example does not work with vercel #2078

Comments

Elliott-Green commented Mar 7, 2024

Current Behavior

Expected Behavior

Steps To Reproduce

What package is effected by this issue?

Is this a build or a runtime issue?

Package Version

Node Version

What browsers are you seeing the problem on?

Relevant log output

Anything else?

Sanity Check

Adamj1232 commented Mar 14, 2024

Adamj1232 commented Mar 14, 2024

Elliott-Green commented Mar 15, 2024 • edited Loading

Svelte-i18n/intl-messageformat

ethereumjs/tx

beeb commented Dec 23, 2024 • edited Loading

Adamj1232 commented Dec 27, 2024

Adamj1232 commented Dec 27, 2024

beeb commented Dec 28, 2024

Elliott-Green commented Mar 15, 2024 •

edited

Loading

beeb commented Dec 23, 2024 •

edited

Loading