import error with botframework-webchat

[gaurav-pachar]

Issue summary

while integrating 'botframework-webchat' package into the app facing a get request failure with 504 error

Actual behavior

this is the error being logged in the chrome console
GET https://****-***-***-**-**.ngrok.io/node_modules/.vite/deps/botframework-webchat.js?v=2c4faf44 net::ERR_ABORTED 504

[hmr] Failed to reload /src/components/HomePage.jsx. This could be due to syntax errors or importing non-existent modules. (see errors above)

this is how HomePage.jsx looks like:

import {
  Card,
  Page,
  Layout,
  TextContainer,
  Image,
  Stack,
  Link,
  Heading,
} from "@shopify/polaris";

import trophyImgUrl from "../assets/home-trophy.png";

import { ProductsCard } from "./ProductsCard";

import Classes from './homePage.module.css';
import { FaRocketchat } from "react-icons/fa";
import { Bot } from './Bot';

export function HomePage() {
  const [showChatBox, setshowChatBox] = useState(false);
  const chatboxControl = () => {
       setshowChatBox(!showChatBox);
  }
  return (
    <Page fullWidth>
      <Layout>
        <Layout.Section>
          <Card sectioned>
            <Stack
              wrap={false}
              spacing="extraTight"
              distribution="trailing"
              alignment="center"
            >
              <Stack.Item fill>
                <TextContainer spacing="loose">
                  <Heading>Nice work on building a Shopify app 🎉</Heading>
                  <p>
                    Your app is ready to explore! It contains everything you
                    need to get started including the{" "}
                    <Link url="https://polaris.shopify.com/" external>
                      Polaris design system
                    </Link>
                    ,{" "}
                    <Link url="https://shopify.dev/api/admin-graphql" external>
                      Shopify Admin API
                    </Link>
                    , and{" "}
                    <Link
                      url="https://shopify.dev/apps/tools/app-bridge"
                      external
                    >
                      App Bridge
                    </Link>{" "}
                    UI library and components.
                  </p>
                  <p>
                    Ready to go? Start populating your app with some sample
                    products to view and test in your store.{" "}
                  </p>
                  <p>
                    Learn more about building out your app in{" "}
                    <Link
                      url="https://shopify.dev/apps/getting-started/add-functionality"
                      external
                    >
                      this Shopify tutorial
                    </Link>{" "}
                    📚{" "}
                  </p>
                </TextContainer>
              </Stack.Item>
              <Stack.Item>
                <div style={{ padding: "0 20px" }}>
                  <Image
                    source={trophyImgUrl}
                    alt="Nice work on building a Shopify app"
                    width={120}
                  />
                </div>
              </Stack.Item>
            </Stack>
          </Card>
        </Layout.Section>
        <Layout.Section secondary>
          <ProductsCard />
        </Layout.Section>
        <a className={Classes.float} onClick={chatboxControl}>
          <FaRocketchat/>
        </a>
        {showChatBox && <div className={Classes.botContainer}><Bot/></div>}
      </Layout>
    </Page>
  );
}```



this is how Bot.jsx file looks like:

```import React from 'react';
import ReactWebChat, { createDirectLine } from "botframework-webchat";

export function Bot() {
   const directLine = createDirectLine({ token: 'your_access_token' });
  return (<ReactWebChat directLine={directLine}/>);
};```



this is vite.config.js file: 

```import react from "@vitejs/plugin-react";
import "dotenv/config";

/**
 * @type {import('vite').UserConfig}
 */
export default {
  define: {
    "process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
  },
  plugins: [react()],
};```

## Specifications

- Browser:
- chrome
- Device:
- Macboot air M1
- Operating System:
- MacOS Monterey(version 12.1)

[JaKXz]

Hi @gaurav-pachar I'm not sure this is an issue with the starter template itself, so I've moved it to the Q&A discussions to see if anyone else in the community can support you.