-
Notifications
You must be signed in to change notification settings - Fork 481
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: WalletConnect throws error when selected and does not resolve [SvelteKit] #762
Comments
I was able to resolve this issue with rollup-plugin-polyfill-node particularly with this configuration: FredKSchott/rollup-plugin-polyfill-node#14 (comment) The relevant parts of my config: // svelte.config.js
import nodePolyfills from 'rollup-plugin-polyfill-node'
const config = {
kit: {
vite: {
plugins: [
nodePolyfills({
include: [
'*.js',
'node_modules/**/*.js',
new RegExp('node_modules/.vite/.*js')
],
// ↓ Not sure if this line is necessary, seems to work without it
exclude: ['node_modules/polyfill-nodeglobal.js']
})
],
resolve: {
alias: {
// ↓ see https://github.com/vitejs/vite/issues/6085
'@ensdomains/address-encoder': '@ensdomains/address-encoder/lib/index.umd.js'
}
}
}
}
}
export default config I assume this would work for any project that uses Vite, not just SvelteKit. You might consider adding this info to the docs. UPDATE While |
Finally got everything working, it took an inordinate amount of time to figure this out. There was no clear documentation I could find on how to properly configure Vite to handle node globals. I think the amount of others having this issue, the many 'hack' attempted solutions I found, and the strangeness of my working configuration attests to that fact that this is uncharted territory and it may not be fully considered by the developers of Vite. For instance this: #667 (comment) — Going as far as using Webpack (an older version at that) with Svelte, just to handle this problem, shows how ridiculous the state of JavaScript, with its incompatible module systems and its host of build tools (within build tools), is. I don't blame anyone for this (except maybe Bill Gates) and it's a miracle that any of this stuff works at all. Anyway, rant over. Here's my solution: import adapter from '@sveltejs/adapter-static'
import preprocess from 'svelte-preprocess'
import nodePolyfills from 'rollup-plugin-polyfill-node'
const MODE = process.env.NODE_ENV
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: preprocess(),
kit: {
adapter: adapter(),
target: '#svelte',
vite: {
plugins: [
// ↓ Have to check the mode here because this cant run on build
MODE === 'development'
? nodePolyfills({
include: ['node_modules/**/*.js', new RegExp('node_modules/.vite/.*js')]
})
: ''
],
build: {
rollupOptions: {
plugins: [
// ↓ Needed for build
nodePolyfills()
]
},
// ↓ Needed for build
commonjsOptions: {
transformMixedEsModules: true
}
},
resolve: {
alias: {
// ↓ see https://github.com/vitejs/vite/issues/6085
'@ensdomains/address-encoder': '@ensdomains/address-encoder/lib/index.umd.js'
}
}
}
}
}
export default config |
@theurgi Did this completely resolve the sveltekit build issues for you? |
I was able to build with this configuration, however I suspect it's very suboptimal. For instance, to successfully build on Cloudflare, I had to increase the memory on the remote Node instance with the following hack in my {
"scripts": {
"build": "NODE_OPTIONS=--max-old-space-size=4096 svelte-kit build"
}
} I don't know if this is just a Cloudflare thing or what. But I foresee this continuing to be a problem as more build tools opt out of handling node globals by default. If you're looking to close this issue, and asking on my behalf, by all means go ahead. |
That seems to be a Vite bug, I'm also having that problem. vitejs/vite#2433 |
@theurgi , was that enough to you get your environment working? I'm having to include |
@imsys Yea, the build config I posted worked for me for both dev and production builds. |
I'm debugging a little bit deeper here, and I think I found where the problem is. |
@imsys 1.0.0-next.202 |
@theurgi thank you for your work on this! 🙏🏾 I am going to close but please feel free to continue commenting about the vite rollup issue as it may come in handy in the future. |
Vite is being used as an alternative to Webpack, and it needs some special settings to get it working with Web3Modal. Adding this to the documentation will help the users. Those settings were found thanks to @theurgi at blocknative/web3-onboard#762 (comment)
Vite is being used as an alternative to Webpack, and it needs some special settings to get it working with Web3Modal. Adding this to the documentation will help the users. Those settings were found thanks to @theurgi at blocknative/web3-onboard#762 (comment)
Current Behavior
When the wallet select modal appears and WalletConnect is selected, the view shows an unending spinner and an error is logged to the console.
The first error is thrown from:
node_modules/keccak/node_modules/readable-stream/lib/_stream_readable.js
Uncaught (in promise) ReferenceError: global is not defined...
This appears to be an issue with onboard dependencies using node builtins and vite: vitejs/vite#728
I suppose this is more of an issue with vite than onboard, but this seems to pretty much make WalletConnect (and perhaps other wallet modules) unusable in SvelteKit.
Considering that onboard is built with Svelte, I wonder if you're aware of any work arounds?
Thanks
Expected Behavior
WalletConnect to work
Steps To Reproduce
await onboard.walletSelect()
is called the modal appears with wallet optionsOnboard Version
^1.36.0
Node Version
v16.11.0
What browsers are you seeing the problem on?
Firefox, Chrome, Safari
Relevant log output
Anything else?
No response
The text was updated successfully, but these errors were encountered: