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

codebarz commented 1 year ago

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 commented 1 year ago

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

codebarz commented 1 year ago

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.

braze-inc / braze-web-sdk