From f8d099e8e49e0240a702631eee1eb8def086ac30 Mon Sep 17 00:00:00 2001 From: Mohammad Shahbaz Alam Date: Fri, 10 Nov 2023 08:24:09 +0530 Subject: [PATCH 1/2] nit --- src/components/HelpCards/index.tsx | 2 +- src/components/navDropdown/help.html | 2 +- src/theme/Footer/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/HelpCards/index.tsx b/src/components/HelpCards/index.tsx index 1805a4824..c86127efb 100644 --- a/src/components/HelpCards/index.tsx +++ b/src/components/HelpCards/index.tsx @@ -39,7 +39,7 @@ export default function QuickNavigation() {
-
Community Discussions
+
Community Forum

Join our community of passionate developers - learn, grow and get help for your Web3Auth setup.

diff --git a/src/components/navDropdown/help.html b/src/components/navDropdown/help.html index e780ca3d5..356cba3b5 100644 --- a/src/components/navDropdown/help.html +++ b/src/components/navDropdown/help.html @@ -35,7 +35,7 @@

Schedule a Demo

-

Community Discussions

+

Community Forum

Join our community of passionate developers - learn, grow and get help for your Web3Auth setup.

diff --git a/src/theme/Footer/index.tsx b/src/theme/Footer/index.tsx index bfc1a4a7b..e4e050d90 100644 --- a/src/theme/Footer/index.tsx +++ b/src/theme/Footer/index.tsx @@ -159,7 +159,7 @@ export default function FooterComponent(): JSX.Element {
- Community Discussions + Community Forum
{/*
From f9bc10ab6a6c37f54564063746bd1b659c0a2a78 Mon Sep 17 00:00:00 2001 From: Maharshi Mishra Date: Fri, 10 Nov 2023 11:11:41 +0530 Subject: [PATCH 2/2] troubleshooting for svelte added --- docs/troubleshooting/svelte-issues.mdx | 72 ++++++++++++++++++++++++++ docs/troubleshooting/vite-issues.mdx | 18 +++---- sidebars.js | 1 + 3 files changed, 82 insertions(+), 9 deletions(-) create mode 100644 docs/troubleshooting/svelte-issues.mdx diff --git a/docs/troubleshooting/svelte-issues.mdx b/docs/troubleshooting/svelte-issues.mdx new file mode 100644 index 000000000..1e81cee6e --- /dev/null +++ b/docs/troubleshooting/svelte-issues.mdx @@ -0,0 +1,72 @@ +--- +title: Bundler Polyfill Issues - Svelte with Vite +image: "/docs/images/docs-meta-cards/troubleshoot-card.png" +displayed_sidebar: docs +description: "Bundler Polyfill Issues - Svelte with Vite | Documentation - Web3Auth" +--- + +When developing a new web3 project with Svelte and Vite, you may encounter bundler issues due to missing polyfills. This commonly occurs with packages +like `eccrypto` which rely on node modules not present in the browser environment. Directly adding these modules to your package can solve the issue +but may lead to a larger bundle size, affecting load times and user experience. + +It's essential to recognize that the required node polyfills should only be included during development and testing, and the bundler should be +instructed to exclude them from the production build. + +The following guide provides instructions for adding the necessary polyfills in a Svelte project using Vite. + +## Install the missing modules + +First, identify the missing libraries in your build. For integrating Web3Auth with Svelte, you will need to polyfill `buffer` and `process`. For other +libraries, use an alternative like the `empty-module` to prevent build warnings. + +```bash npm2yarn +npm install --save-dev buffer process vite-plugin-node-polyfills +``` + +:::caution + +You may need to polyfill additional libraries depending on the other blockchain libraries you are using with Web3Auth. Common polyfills include +crypto-browserify, stream-browserify, and others listed in the previous guide. + +::: + +## Update your `vite.config.js` + +Modify your Vite configuration to integrate the polyfills with Svelte as follows: + +```tsx +import { sveltekit } from "@sveltejs/kit/vite"; +import { defineConfig } from "vitest/config"; +import { nodePolyfills } from "vite-plugin-node-polyfills"; + +export default defineConfig({ + plugins: [ + nodePolyfills({ + exclude: ["fs"], + globals: { + Buffer: true, + global: true, + process: true, + }, + protocolImports: true, + }), + sveltekit(), + ], + optimizeDeps: { + include: ["dayjs/plugin/relativeTime.js", "dayjs", "@web3auth/ethereum-provider"], + }, + test: { + include: ["src/**/*.{test,spec}.{js,ts}"], + }, +}); +``` + +This configuration sets up the necessary aliases and defines globals for the browser environment, ensuring compatibility and reducing bundle size. + +## Address additional dependency issues + +If there are additional dependencies that need to be polyfilled, consider adding them to the include array in the optimizeDeps section of the Vite +config. Test your application thoroughly to ensure that all functionalities work as expected after the polyfills are added. + +By following these steps, you should be able to resolve bundler polyfill issues in your Svelte and Vite web3 project, leading to a more efficient +build and a smoother user experience. diff --git a/docs/troubleshooting/vite-issues.mdx b/docs/troubleshooting/vite-issues.mdx index fd6b048d9..b345d983c 100644 --- a/docs/troubleshooting/vite-issues.mdx +++ b/docs/troubleshooting/vite-issues.mdx @@ -5,19 +5,19 @@ displayed_sidebar: docs description: "Bundler Polyfill Issues - Vite | Documentation - Web3Auth" --- -While setting up a new web3 project from scratch, you might face multiple issues the bundler. This issue is caused due to the fact that the core -packages like `eccrypto` have certain dependencies, which are not present within the build environment. For rectifying this, the go to method has been -to just add the missing modules directly into the package, and edit the bundler configuration to take advantage of that. +While setting up a new web3 project from scratch, you might face multiple issues with the bundler. This issue is caused because the core packages like +`eccrypto` have certain dependencies, which are not present within the build environment. For rectifying this, the go-to method has been to just add +the missing modules directly into the package, and edit the bundler configuration to take advantage of that. -Although this method works, but it increases the bundle size significantly. Causing slow loading speeds and a bad user experience. It is important to -note that these modules, even while the build fails, are still present within the browser environment. Many libraries like Web3Auth are written in a -way so as to take advantage of this fact. Hence, even if the build doesn't contain the polyfill, the library should still work as expected. However, -if you are using a library which does not take advantage of this fact, you might face issues while using the library. +Although this method works, it increases the bundle size significantly. Causing slow loading speeds and a bad user experience. It is important to note +that these modules, even while the build fails, are still present within the browser environment. Many libraries like Web3Auth are written in a way to +take advantage of this fact. Hence, even if the build doesn't contain the polyfill, the library should still work as expected. However, if you are +using a library that does not take advantage of this fact, you might face issues while using the library. -Hence, you need to be mindful of the fact that you only require certain node polyfills to be added to your project, while testing each of it's +Hence, you need to be mindful of the fact that you only require certain node polyfills to be added to your project, while testing each of its functionalities. At the same time, you need to tell the bundler to ignore the missing modules, and not include them in the build. -In this guide, we have added instructions of adding the polyfills in Vite: +In this guide, we have added instructions for adding the polyfills in Vite: ## Install the missing modules diff --git a/sidebars.js b/sidebars.js index e5200732e..14f868293 100644 --- a/sidebars.js +++ b/sidebars.js @@ -276,6 +276,7 @@ module.exports = { "troubleshooting/error-429", "troubleshooting/webpack-issues", "troubleshooting/vite-issues", + "troubleshooting/svelte-issues", "troubleshooting/metro-issues", "troubleshooting/jwt-errors", "troubleshooting/supported-browsers",