Getting a "window is not defined" error

leafer_design · October 31, 2024, 3:00pm

I’ve been getting a “window is not defined” error on a page in my project and I’m not quite sure why

Screenshots:
Test Page 1:

Test Page 2:

Dev Log message

error message in dev log

PLASMIC: Encountered error when pre-rendering rt: ReferenceError: window is not defined
ReferenceError: window is not defined
    at yt (file:///home/pops/webdev/cbat-beta/node_modules/@plasmicapp/loader-core/src/registry.ts:110:13)
    at rt (file:///home/pops/webdev/cbat-beta/node_modules/@plasmicapp/loader-core/src/registry.ts:110:13)
    at renderWithHooks (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5732:15)
    at renderElement (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderNode (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6270:12)
    at renderChildrenArray (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6222:7)
    at renderNodeDestructiveImpl (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6152:7)
    at renderNodeDestructive (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderElement (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5982:9)
    at renderNodeDestructiveImpl (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderNode (/home/pops/webdev/cbat-beta/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6270:12)
  108 |     let func;
  109 |     try {
> 110 |       func = new Function("require", "exports", code);
      |             ^
  111 |     } catch (err) {
  112 |       throw new Error(`PLASMIC: Failed to create function for ${name}: ${err}`);
  113 |     }

My project: Plasmic
Test pages:
- 1: 洩漏區塊®探索工作坊
- 2: 洩漏區塊®探索工作坊

fmota · October 31, 2024, 7:33pm

Hi, as stated in Dynamic values | Learn Plasmic we don’t recommend using the window object in dynamic expressions, since window is only available in the browser, the server can’t access its not able to process your page correctly. To fix it, you should search into your project for the places that use window and use the appropriate replacement.

leafer_design · November 2, 2024, 2:54pm

I don’t believe I ever used window in my dynamic expressions …
After more troubleshooting, I think I narrowed on the culprit: something to do with the timing/sequence of returning null values from GraphQL data query in dynamic values.

For context, here’s how the test page above is set up:

loading boundary ($queries.reportQuery.isLoading)
- conditional guard to show section A if 123 all are NOT defined (see below)
- conditional guard to show section B if 123 all are defined

const req1Ocr = $queries.reportQuery?.data?.response?.data?.report?.req1Ocr;
const req2Observe = $queries.reportQuery?.data?.response?.data?.report?.req2Observe;
const req3Disclose = $queries.reportQuery?.data?.response?.data?.report?.req3Disclose;

!(req1Ocr && req2Observe && req3Disclose)

So, I’m not getting a “window is not defined” React error on the screen in localhost anymore, but I’m still seeing the message in the terminal devlog (a), and the other error message in chrome localhost devlog (b).
(a) PLASMIC: Encountered error when pre-rendering rt: ReferenceError: window is not defined
(b)

full error text

VM2321:4 Warning: Cannot update a component (`Plasmic_06BAnalyzeReport`) while rendering a different component (`DataCtxReader`). To locate the bad setState() call inside `DataCtxReader`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at DataCtxReader (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:449:23)
    at DataProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:385:19)
    at Suspense
    at ot (eval at load (webpack-internal:///./node_modules/@plasmicapp/loader-core/dist/index.esm.js), <anonymous>:7:575)
    at main
    at div
    at div
    at e (eval at load (webpack-internal:///./node_modules/@plasmicapp/loader-core/dist/index.esm.js), PlasmicPageNavFooterWrapper:4:2410)
    at G
    at div
    at div
    at o (eval at load (webpack-internal:///./node_modules/@plasmicapp/loader-core/dist/index.esm.js), Plasmic_06BAnalyzeReport:14:4330)
    at eval (eval at load (webpack-internal:///./node_modules/@plasmicapp/loader-core/dist/index.esm.js), <anonymous>:14:4674)
    at s (eval at load (webpack-internal:///./node_modules/@plasmicapp/loader-core/dist/index.esm.js), <anonymous>:4:693)
    at c (eval at load (webpack-internal:///./node_modules/@plasmicapp/loader-core/dist/index.esm.js), <anonymous>:4:770)
    at MaybeWrap (webpack-internal:///./node_modules/@plasmicapp/loader-react/dist/index.esm.js:255:16)
    at PlasmicLinkProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:497:22)
    at Wo
    at pr (eval at load (webpack-internal:///./node_modules/@plasmicapp/loader-core/dist/index.esm.js), <anonymous>:4:25857)
    at Suspense
    at DataProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:385:19)
    at pr (eval at load (webpack-internal:///./node_modules/@plasmicapp/loader-core/dist/index.esm.js), <anonymous>:4:25857)
    at Tn (eval at load (webpack-internal:///./node_modules/@plasmicapp/loader-core/dist/index.esm.js), <anonymous>:4:24487)
    at PlasmicComponent (webpack-internal:///./node_modules/@plasmicapp/loader-react/dist/index.esm.js:1310:11)
    at MaybeWrap (webpack-internal:///./node_modules/@plasmicapp/loader-react/dist/index.esm.js:255:16)
    at DataProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:385:19)
    at DataProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:385:19)
    at DataProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:385:19)
    at DataProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:385:19)
    at PageParamsProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:438:23)
    at SWRConfig$1 (webpack-internal:///./node_modules/swr/dist/index.mjs:504:23)
    at PlasmicQueryDataProvider (webpack-internal:///./node_modules/@plasmicapp/query/dist/index.esm.js:143:11)
    at PlasmicRootProvider (webpack-internal:///./node_modules/@plasmicapp/loader-react/dist/index.esm.js:327:5)
    at PlasmicRootProvider (webpack-internal:///./node_modules/@plasmicapp/loader-nextjs/dist/index.esm.js:499:133)
    at PlasmicLoaderPage (webpack-internal:///./pages/[[...catchall]].tsx:59:13)
    at DataProvider (webpack-internal:///./node_modules/@plasmicapp/host/dist/host.esm.js:385:19)
    at AcrossAllPages (webpack-internal:///./pages/_app.tsx:27:11)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:81:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/pages/ErrorBoundary.js:41:9)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/pages/ReactDevOverlay.js:33:11)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:80:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:213:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:437:11)

Is there a proper way that I’m supposed to do this?