Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.getpara.com/llms.txt

Use this file to discover all available pages before exploring further.

Vite’s approach to building React applications can introduce unique considerations when integrating Para. This guide addresses frequent issues and offers tailored solutions to ensure a successful implementation.
Using an LLM (ChatGPT, Claude) or Coding Assistant (Cursor, Github Copilot)? Here are a few tips:
  1. Include the for the most up-to-date help
  2. Check out the for an interactive LLM using Para Examples Hub

​
General Troubleshooting Steps

Before diving into specific issues, try these general troubleshooting steps:
bash rm -rf node_modules npm cache clean --force
bash npm install
bash npm run build

​
Common Issues and Solutions

Problem: Vite doesn’t include Node.js polyfills by default, which can cause issues with packages that depend on Node.js built-ins like buffer or crypto.Solution: Add the necessary polyfills using the vite-plugin-node-polyfills plugin. Adjust the configuration as needed for your specific requirements:
  1. Install the plugin: 
    npm install --save-dev vite-plugin-node-polyfills
  2. Update your vite.config.js: 
    import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [
    react(),
    nodePolyfills({
      include: ["buffer", "crypto", "stream", "util"],
    }),
  ],
  // ... other configurations
});
Problem: Environment variables not being recognized in your application.Solution: Ensure you’re prefixing your environment variables with VITE_ and accessing them correctly:
  1. In your .env file: 
    VITE_PARA_API_KEY=your_api_key_here
  2. In your code: 
    const para = new Para(import.meta.env.VITE_PARA_API_KEY);
Problem: Para’s CSS files not loading correctly.Solution: Import Para’s CSS file in your main App.jsx or index.jsx:
import "@getpara/react-sdk/styles.css";

function App() {
  // Your app code
}

export default App;
Problem: Your app renders <ParaProvider> and also renders a separate <ParaModal />. ParaProvider includes its own embedded modal by default, so the two modal instances can compete for the same Para state and cause inconsistent open, close, or authentication behavior.Solution: Prefer the embedded modal and remove the separate <ParaModal />. Pass modal options to ParaProvider with paraModalConfig:
<ParaProvider
  paraClientConfig={{ apiKey: "YOUR_API_KEY" }}
  config={{ appName: "YOUR_APP_NAME" }}
  paraModalConfig={modalOptions}
>
  <YourApp />
</ParaProvider>
If you intentionally render your own <ParaModal />, disable the provider’s embedded modal:
<ParaProvider
  paraClientConfig={{ apiKey: "YOUR_API_KEY" }}
  config={{
    appName: "YOUR_APP_NAME",
    disableEmbeddedModal: true,
  }}
>
  <YourApp />
  <ParaModal {...modalOptions} />
</ParaProvider>
Do not render a separate <ParaModal /> while ParaProvider has its embedded modal enabled. Run para doctor to detect this setup automatically.
Problem: After upgrading from wagmi v2 to v3, you encounter module resolution errors or missing dependency warnings.Solution: Wagmi v3 requires additional peer dependencies that are not included in the default installation. Install them:
npm install porto @base-org/account @gemini-wallet/core @metamask/sdk @safe-global/safe-apps-provider @safe-global/safe-apps-sdk
The default Para SDK installation uses wagmi v2. These additional dependencies are only needed if you choose to upgrade to wagmi v3.

​
Best Practices

  1. Use the Latest Versions: Always use the latest versions of Vite, React, and Para SDK to ensure compatibility and access to the latest features.
  2. Error Handling: Implement error boundaries to gracefully handle any runtime errors related to Para integration.
  3. Development vs Production: Use environment-specific configurations to manage different settings for development and production builds. Para provides environment-specific API keys.
By following these troubleshooting steps and best practices, you should be able to resolve most common issues when integrating Para with your React application using Vite.

​
Integration Support

If you’re experiencing issues that aren’t resolved by our troubleshooting resources, please contact our team for assistance. To help us resolve your issue quickly, please include the following information in your request:
  1. 1

    A detailed description of the problem you’re encountering.

  2. 2

    Any relevant error messages or logs.

  3. 3

    Steps to reproduce the issue.

  4. 4

    Details about your system or environment (e.g., device, operating system, software version).

Providing this information will enable our team to address your concerns more efficiently.