fix: Remove explicit ReactNode return type (#18)

* fix: Remove explicit ReactNode return type

* Update README with notes on async component import

README.md

@@ -159,27 +159,34 @@ Using React-Chatbot with SSR frameworks may require additional infrastucture. He
 
 Since React-Chatbot requires a few browser-only features to function, we need to defer the rendering of the component to the client. In order to do this, you will need to:
 
-1. Use the `"use client"` directive in the file that imports ReactChatbot.
-2. Use a one-time `useEffect` call in ReactChatbot's consumer. The useEffect callback should set the rendered widget as a state on the consumer component.
+1. Use the `"use client"` directive in the file that imports React-Chatbot.
+2. Use a one-time `useEffect` call in React-Chatbot's consumer. The useEffect callback should import and set the rendered widget as a state on the consumer component. We do the import here as some declarations in imported file also require resources only available in the browser.
 3. Include the rendered widget state value in the rendered consumer component.
 
 Example:
 
 ```
 "use client";
+
 export const App = (props: Props): ReactNode => {
   const [chatWidget, setChatWidget] = useState<ReactNode>(null);
 
   /* the rest of your code */
 
   useEffect(() => {
-    setChatWidget(
-      <ReactChatbot
-        customerId="CUSTOMER_ID"
-        corpusIds={["CORPUS_ID_1", "CORPUS_ID_2", "CORPUS_ID_N"]}
-        apiKey="API_KEY"
-      />
-    );
+    const importAndCreateWidget = async () => {
+      const { ReactChatbot } = await import("@vectara/react-chatbot");
+
+      setChatWidget(
+        <ReactChatbot
+          customerId="CUSTOMER_ID"
+          corpusIds={["CORPUS_ID_1", "CORPUS_ID_2", "CORPUS_ID_N"]}
+          apiKey="API_KEY"
+        />
+      );
+    }
+
+    importAndCreateWidget();
   }, []);
 
   return (

src/index.tsx

@@ -148,7 +148,7 @@ class ReactChatbotWebComponent extends HTMLElement {
 
 window.customElements.get("react-chatbot") || window.customElements.define("react-chatbot", ReactChatbotWebComponent);
 
-export const ReactChatbot = (props: Props): ReactNode => {
+export const ReactChatbot = (props: Props) => {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {