Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PrefetchPageLink in single fetch mode cause "window is not defined" #10474

Open
anhdd-kuro opened this issue Feb 11, 2025 · 1 comment
Open
Assignees

Comments

@anhdd-kuro
Copy link

anhdd-kuro commented Feb 11, 2025

Reproduction

https://stackblitz.com/edit/remix-run-remix-rv7ocwf6

System Info

System:
    OS: macOS 14.7
    CPU: (12) arm64 Apple M2 Pro
    Memory: 92.02 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.1 - /usr/local/bin/node
    npm: 11.1.0 - /usr/local/bin/npm
    pnpm: 9.15.3 - /usr/local/bin/pnpm
    bun: 1.1.38 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 133.1.75.175
    Chrome: 132.0.6834.160
    Safari: 17.6
  npmPackages:
    @remix-run/css-bundle: 2.15.3 => 2.15.3 
    @remix-run/dev: 2.15.3 => 2.15.3 
    @remix-run/eslint-config: 2.15.3 => 2.15.3 
    @remix-run/express: 2.15.3 => 2.15.3 
    @remix-run/node: 2.15.3 => 2.15.3 
    @remix-run/react: 2.15.3 => 2.15.3 
    @remix-run/serve: 2.15.3 => 2.15.3 
    @remix-run/server-runtime: ^2.15.3 => 2.15.3 
    vite: 6.1.0 => 6.1.0

Used Package Manager

pnpm

Expected Behavior

Should render prefetch link normally

Actual Behavior

Causing window is not defined error

ReferenceError: window is not defined
    at Object.singleFetchUrl (/home/projects/remix-run-remix-rv7ocwf6/node_modules/@remix-run/react/dist/single-fetch.js:324:58)
    at eval (/home/projects/remix-run-remix-rv7ocwf6/node_modules/@remix-run/react/dist/components.js:362:27)
    at Object.useMemo (/home/projects/remix-run-remix-rv7ocwf6/node_modules/react-dom/cjs/react-dom-server.node.development.js:5190:19)
    at Object.useMemo (/home/projects/remix-run-remix-rv7ocwf6/node_modules/react/cjs/react.development.js:1650:21)
    at PrefetchPageLinksImpl (/home/projects/remix-run-remix-rv7ocwf6/node_modules/@remix-run/react/dist/components.js:332:36)
    at renderWithHooks (/home/projects/remix-run-remix-rv7ocwf6/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (/home/projects/remix-run-remix-rv7ocwf6/node_modules/react-dom/cjs/react-dom-server.node.development.js:5798:15)
    at renderElement (/home/projects/remix-run-remix-rv7ocwf6/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/home/projects/remix-run-remix-rv7ocwf6/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/home/projects/remix-run-remix-rv7ocwf6/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
@anhdd-kuro anhdd-kuro changed the title Using data function in single fetch with PrefetchPageLink cause "window is not defined" PrefetchPageLink to route that using data function in single fetch with cause "window is not defined" Feb 11, 2025
@anhdd-kuro anhdd-kuro changed the title PrefetchPageLink to route that using data function in single fetch with cause "window is not defined" PrefetchPageLink to route that return deferredData in single fetch mode cause "window is not defined" Feb 11, 2025
@anhdd-kuro anhdd-kuro changed the title PrefetchPageLink to route that return deferredData in single fetch mode cause "window is not defined" PrefetchPageLink in single fetch mode cause "window is not defined" Feb 11, 2025
@joseph0926
Copy link

joseph0926 commented Feb 11, 2025

A temporary solution is to set v3_singleFetch: false, in vite.config.
Alternatively, you could remove loader from “foo.tsx” and replace it with your client logic

The reason for this problem is that you are using client logic in the line "

? new URL(reqUrl, window.location.origin)
", so it seems that this error occurs in SSR environments. I don't know if it's possible to fix it like below, but I think the "remix" team should provide a detailed guide

  let url;
  if (typeof window === "undefined") {
    url = typeof reqUrl === "string" ? new URL(reqUrl, "http://localhost") : reqUrl;
  } else {
    url = typeof reqUrl === "string" ? new URL(reqUrl, window.location.origin) : reqUrl;
  }

@brophdawg11 brophdawg11 self-assigned this Feb 12, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants