Getting Started

• Install the vite plugins

  npmyarnpnpm

  npm i @vitejs/plugin-react vite-plugin-node-polyfills -D

• In the vite.config.js file, add the following configuration:

  import react from "@vitejs/plugin-react";
  import { defineConfig } from "vite";
  import { nodePolyfills } from "vite-plugin-node-polyfills";
   
  export default defineConfig({
    plugins: [react(), nodePolyfills()],
    define: {
      "process.env": {},
    },
  });
  

No additional configuration is required if you are using the pages router

If you are using the new app router, and If you import a component such as ThirdwebProvider in a server component, Next.js will throw an error saying that the component is not marked with "use client" directive.

You will need to create an alias for that component in a separate file with "use client" directive on top (before all the imports) and import that instead of using the component directly from @thirdweb-dev/react in server components.

"use client";
 
export { ThirdwebProvider } from "@thirdweb-dev/react";
 
// app/components/ThirdwebProvider.tsx

import { ThirdwebProvider } from "./components/ThirdwebProvider";
 
export default function Home() {
  return <ThirdwebProvider> ... </ThirdwebProvider>;
}
 
// app/page.tsx

• Add below packages as dependencies in your package.json

  {
    ...
    "dependencies": {
      ...
      "url": "latest",
      "http": "npm:http-browserify",
      "https": "npm:https-browserify",
      "zlib": "npm:browserify-zlib",
      "http-browserify": "latest",
      "https-browserify": "latest",
      "browserify-zlib": "latest",
      "assert": "^2.0.0",
      "stream": "^0.0.2"
    }
  }
  

• Install them from NPM using the following command

  npmyarnpnpm

  npm install

To ignore the sourcemap warnings, create a .env file with the following in your root directory:

GENERATE_SOURCEMAP=false