search

Tommertom / ionic-sveltekit-ssr-demo

Blazing fast PWAs with SEO power using SvelteKit and Ionic
https://ionic-sveltekit-ssr-demo.vercel.app
25 stars 5 forks source link

ReferenceError: navigator is not defined #1

Open FernieRealEstate opened 1 year ago

FernieRealEstate commented 1 year ago

Hi, nice work! I get this same bug if I clone the repo or build up via the Blog Post. The details are:

ionic-sveltekit-ssr-demo/.svelte-kit/output/server/chunks/pwa.store.js:21 if ("serviceWorker" in navigator)

ReferenceError: navigator is not defined

pwa.store.js in output folder "/chunks/, does not look anything like the pwa.store.ts in the src/lib folder

I also get this error: Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json] even though I can see the file in the folder.

I use pnpm rather than npm, not sure it that makes a difference.

Cheers James

Tommertom commented 1 year ago

hi i need to check this and replay with pnpm and the blog. Possibly later today Tom

Tommertom commented 1 year ago

Can you share the repo? I tried rebuilding from the blog with npm and did not encounter same issue. Nor clone from this repo with pnpm gives errors.

FernieRealEstate commented 1 year ago

Hi Tom, I have not pushed the test site to Github. I am on a Mac, what is your environment? Cheers James

FernieRealEstate commented 1 year ago

I just did a clean clone install. Here are the results:

Ionic-sveltekit-ssr-demo STEPS

1) git clone https://github.com/Tommertom/ionic-sveltekit-ssr-demo.git

2) cd ionic-sveltekit-ssr-demo/

3) pnpm i

4) dependencies:

devDependencies:

4) pnpm run dev

[WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]

../../tsconfig.json:2:12:
  2 │   "extends": "./.svelte-kit/tsconfig.json",
    ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]

tsconfig.json:2:12:
  2 │   "extends": "./.svelte-kit/tsconfig.json",
    ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Forced re-optimization of dependencies

VITE v4.1.2 ready in 1919 ms

➜ Local: http://localhost:5173/

5) http://localhost:5173/

6) Chrome Dev Tools: CONSOLE: Failed to load resource: the server responded with a status of 404 (Not Found) manifest.webmanifest:1 Manifest: Line: 1, column: 1, Syntax error. +page.svelte? [sm]:12 Are we native? false manifest.webmanifest:1 Failed to load resource: the server responded with a status of 404 (Not Found)

APPLICATION - Service Workers empty

7) http://localhost:5173/app 404 Not Found

8) http://localhost:5173/app/install

This works, magic button is spinning.

9) http://localhost:5173/app/login This works

10) http://localhost:5173/app

Still does not work:

GET http://localhost:5173/manifest.webmanifest 404 (Not Found) Manifest: Line: 1, column: 1, Syntax error.

However, the manifest.webmanifest is in the SOURCES tab and appears to have the content identical to the "app" (an html page)

Tommertom commented 1 year ago

Running win10, node v16.14.2 - doing your steps now

Tommertom commented 1 year ago

Seem the same, this part:

dependencies:
+ @capacitor/android 4.6.3
+ @capacitor/core 4.6.3
+ @ionic/core 6.5.4
+ ionic-svelte 0.5.67

devDependencies:
+ @capacitor/cli 4.6.3
+ @sveltejs/adapter-static 1.0.6 (2.0.1 is available)
+ @sveltejs/kit 1.0.0-next.589 (1.7.2 is available)
+ @typescript-eslint/eslint-plugin 5.52.0
+ @typescript-eslint/parser 5.52.0
+ autoprefixer 10.4.13
+ eslint 8.34.0
+ eslint-config-prettier 8.6.0
+ eslint-plugin-svelte3 4.0.0
+ postcss 8.4.21
+ postcss-load-config 4.0.1
+ prettier 2.8.4
+ prettier-plugin-svelte 2.9.0
+ svelte 3.55.1
+ svelte-check 2.10.3 (3.0.3 is available)
+ svelte-preprocess 4.10.7 (5.0.1 is available)
+ tailwindcss 3.2.7
+ tslib 2.5.0
+ typescript 4.9.5
+ vite 4.1.2
+ vite-plugin-pwa 0.14.4
+ workbox-window 6.5.4
Tommertom commented 1 year ago

I ran pnpm run build after the initial pnpm run dev warning. Then that one is gone. Kit imports types from a generated thingy - I think this also might be related to adapter static. I think with adapter auto you don't have this issue

Tommertom commented 1 year ago

Same issue with the manifest.webmanifest - I need to take a deeper look - probably somethinig with file generation.

Probably this also hinders the service worker registration so the beforeinstall prompt is not firing. Are you on Chrome?

Safari does not support beforeinstall prompt. Maybe there should be a macOs test that says -> no go

Biggest issue for me is the service worker registration and the manifest error.

FernieRealEstate commented 1 year ago

Yes, I am on Chrome and changing to @sveltejs/adapter-auto

Tommertom commented 1 year ago

Yes, I am on Chrome and changing to @sveltejs/adapter-auto

Can you see in dev-tools there is a service worker active? Because auto won't help with that

FernieRealEstate commented 1 year ago

I changed from static to auto, ran build, then preview. Failed:

ReferenceError: navigator is not defined Node.js v19.4.0  ELIFECYCLE  Command failed with exit code 1.

Tommertom commented 1 year ago

the pwa setup I used is not the one from kit, but vite-pwa (even an older version that works) - so the service worker setup then changes - you probably need to remove all PWA related stuff and then follow the kit referece. Reason me not using kit version is because it gave issues which I reckon are related to adapter static

FernieRealEstate commented 1 year ago

Thanks Tom, the joy of the bleeding edge...

Tommertom commented 1 year ago

manifest is created at pnpm run build time, using the config in vite.config

{
    "name": "Ionic SsssssssSR demo",
    "short_name": "IonicSSRDemo",
    "start_url": "/app/splash",
    "display": "standalone",
    "background_color": "#ffffff",
    "lang": "en",
    "scope": "./",
    "description": "Ionic SSR demo",
    "theme_color": "#f27649",
    "orientation": "portrait",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable any"
        }
    ]
}

Putting it in static so in dev mode there is no error

Tommertom commented 1 year ago

Thx James for reporting - not sure if everything is solved (navigator issue?)