Using Server-Side Data Fetching causes page to be client side rendered and cause Invalid URL error

[d-borys]

Please provide the environment you discovered this bug in.

OS: Windows Browser: Firefox/Chrome ENV: Local

Which area/package is the issue in?

create-analog

Description

Hey folks, I have a strange bug that I cannot debug in any way.

Basically whenever I add *.server.ts file next to my page, the server then throws an error ERROR TypeError: Invalid URL

And my page starts to render on the client instead of server side. I tried to check closed issues, but haven't really found anything.

With *.server.ts file:

Without:

Please provide the exception or error you saw

ERROR TypeError: Invalid URL
    at new URL (node:internal/url:775:36)
    at load (eval at instantiateModule (file:///D:/Prywatne%20projekty/phonemock/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:54894:28), <anonymous>:99:29)
    at eval (eval at instantiateModule (file:///D:/Prywatne%20projekty/phonemock/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:54894:28), <anonymous>:4141:78)
    at Module.runInInjectionContext (eval at instantiateModule (file:///D:/Prywatne%20projekty/phonemock/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:54894:28), <anonymous>:3405:16)
    at getResolver (eval at instantiateModule (file:///D:/Prywatne%20projekty/phonemock/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:54894:28), <anonymous>:4141:33)
    at eval (eval at instantiateModule (file:///D:/Prywatne%20projekty/phonemock/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:54894:28), <anonymous>:4132:90)
    at doInnerSub (D:\Prywatne projekty\phonemock\node_modules\rxjs\dist\cjs\internal\operators\mergeInternals.js:22:31)
    at outerNext (D:\Prywatne projekty\phonemock\node_modules\rxjs\dist\cjs\internal\operators\mergeInternals.js:17:70)
    at OperatorSubscriber._this._next (D:\Prywatne projekty\phonemock\node_modules\rxjs\dist\cjs\internal\operators\OperatorSubscriber.js:33:21)
    at Subscriber.next (D:\Prywatne projekty\phonemock\node_modules\rxjs\dist\cjs\internal\Subscriber.js:51:18) {
  code: 'ERR_INVALID_URL',
  input: '',
  base: ''
}

Other information

This is my package.json

{
  "name": "phonemock",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@analogjs/content": "^1.5.0",
    "@analogjs/router": "^1.5.0",
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/platform-server": "^17.3.12",
    "@angular/router": "^17.3.0",
    "@angular/youtube-player": "^17.3.10",
    "@nx/angular": "~18.0.0",
    "@supabase/ssr": "^0.5.1",
    "canvas-confetti": "^1.9.3",
    "flowbite": "^2.5.1",
    "html2canvas": "^1.4.1",
    "jszip": "^3.10.1",
    "konva": "^9.3.14",
    "marked": "^5.0.2",
    "marked-gfm-heading-id": "^3.0.4",
    "marked-highlight": "^2.0.1",
    "ng2-konva": "^8.0.0",
    "ngx-color-picker": "^17.0.0",
    "prismjs": "^1.29.0",
    "rxjs": "~7.8.0",
    "tailwind-merge": "^2.5.2",
    "tslib": "^2.3.0",
    "uuid": "^10.0.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@analogjs/platform": "^1.7.3",
    "@analogjs/vite-plugin-angular": "^1.5.0",
    "@analogjs/vitest-angular": "^1.5.0",
    "@angular-devkit/build-angular": "^17.3.8",
    "@angular/cli": "^17.3.8",
    "@angular/compiler-cli": "^17.3.0",
    "@nx/vite": "~18.0.0",
    "@types/canvas-confetti": "^1.6.4",
    "@types/jasmine": "~5.1.0",
    "@types/uuid": "^10.0.0",
    "autoprefixer": "^10.4.20",
    "jasmine-core": "~5.1.0",
    "jsdom": "^22.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.41",
    "tailwindcss": "^3.4.10",
    "typescript": "~5.4.2",
    "vite-tsconfig-paths": "^4.2.0",
    "vitest": "^1.3.1"
  },
  "type": "module"
}

I would be willing to submit a PR to fix this issue

• [x] Yes
• [ ] No

[brandonroberts]

If you're on a version prior to 1.7.0, you need to add a .env and define the VITE_ANALOG_PUBLIC_BASE_URL=http://localhost:5173

https://analogjs.org/docs/features/data-fetching/server-side-data-fetching

In version 1.7.0, this should work without defining the environment variable.

[d-borys]

Thanks Brandon and sorry for not seeing that!