[Bug]: TypeError: Class extends value undefined is not a constructor or null

[Oke Tega]

Braze Web SDK Version

4.6.1

Integration Method

NPM

Browser

Chrome, Safari

Steps To Reproduce

import braze from "@braze/web-sdk";

  useEffect(() => {
    const paths = history.location.pathname.split("/");
    if (paths.includes("update") || paths.includes("view")) setInvoiceId(paths[paths.length - 1]);
  }, [history.location.pathname]);

  useEffect(() => {
    if (import.meta.env.VITE_BRAZE_API_KEY && import.meta.env.VITE_BRAZE_SDK_ENDPOINT) {
      braze.initialize(import.meta.env.VITE_BRAZE_API_KEY, {
        baseUrl: import.meta.env.VITE_BRAZE_SDK_ENDPOINT,
        safariWebsitePushId: import.meta.env.VITE_SAFARI_WEB_PUSH_ID,
        allowUserSuppliedJavascript: true,
        enableLogging: false,
        // serviceWorkerLocation: "/src/service-worker.ts",
      });
      braze.automaticallyShowInAppMessages();
      braze.openSession();
      braze.requestPushPermission();
    }
  }, []);

  useEffect(() => {
    braze.subscribeToContentCardsUpdates((e) => {
      setCards(e.cards);
    });
    braze.requestContentCardsRefresh();
  }, []);

  useEffect(() => {
    braze.logContentCardImpressions(cards);
  }, [cards]);

  useEffect(() => {
    if (data) braze.changeUser(data?.data.user.id);
  }, [data]);

Expected Behavior

Its meant to properly render the page

Actual Incorrect Behavior

Displays the error boundary. But one the part of the code that contains the braze implementation is commented out, everything works fine

Verbose Logs

TypeError: Class extends value undefined is not a constructor or null

Additional Information

This started occurring when I migrated my react project from CRC to Vice. I'll add the tsconfig and vite config below

tsconfig

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src",
    "noFallthroughCasesInSwitch": true,
    "downlevelIteration": true,
    "types": ["vite/client"] 
  },
  "include": ["src", "**/*.d.ts", "vite.config.ts"]
}

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import svgr from "vite-plugin-svgr";

export default defineConfig(() => {
  return {
    build: {
      outDir: "build",
    },
    // https://github.com/vitejs/vite/issues/1973#issuecomment-787571499
    define: {
      "process.env": {},
    },
    plugins: [react(), tsconfigPaths(), svgr()],
  };
});

[wesleyorbin]

Hi @codebarz. Have you tried this workaround from our docs?

[Oke Tega]

Hi @codebarz. Have you tried this workaround from our docs?

This fixed the problem. Didn't come up in my research for a solution. Thank you.