Fix/build and client error (#169)

Author: codingki

CONTRIBUTING.md

@@ -42,7 +42,7 @@ The following steps will get you up and running to contribute to `graz`:
    ```
 
 3. Setup all the dependencies and packages by running `pnpm`. This command will install dependencies and bootstrap the repo.
-   > We are using `pnpm` as the default package manager, we suggest to you to do the same.
+   > We are using `pnpm` as the default package manager, we suggest to you to do the same. pnpm version should be `9` or higher.
 
 ## Directory structure
 

example/next/package.json

@@ -14,7 +14,7 @@
     "@emotion/styled": "^11.11.0",
     "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.58",
     "framer-motion": "^10.16.4",
-    "graz": "*",
+    "graz": "workspace:*",
     "next": "^13.4.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

example/starter/package.json

@@ -18,7 +18,7 @@
     "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.58",
     "bignumber.js": "^9.1.2",
     "framer-motion": "^10.16.4",
-    "graz": "*",
+    "graz": "workspace:*",
     "next": "^13.4.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

example/vite/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "graz": "*",
+    "graz": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/graz/src/provider/index.tsx

@@ -1,6 +1,6 @@
 import type { QueryClientProviderProps } from "@tanstack/react-query";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import type { FC } from "react";
+import { type FC, useEffect } from "react";
 
 import type { ConfigureGrazArgs } from "../actions/configure";
 import { configureGraz } from "../actions/configure";
@@ -34,12 +34,14 @@ export type GrazProviderProps = Partial<QueryClientProviderProps> & {
  * @see https://tanstack.com/query
  */
 export const GrazProvider: FC<GrazProviderProps> = ({ children, grazOptions, ...props }) => {
-  configureGraz(grazOptions);
+  useEffect(() => {
+    configureGraz(grazOptions);
+  }, []);
 
   return (
     <QueryClientProvider key="graz-provider" client={queryClient} {...props}>
-      {children}
       <ClientOnly>
+        {children}
         <GrazEvents />
       </ClientOnly>
     </QueryClientProvider>