Coder Social home page Coder Social logo

Updating Sveltekit/Vite now throws: `request in handle has been replaced with event. See https://github.com/sveltejs/kit/pull/3384 for details` about sveltekitpwa HOT 9 CLOSED

inspiredlabs avatar inspiredlabs commented on July 1, 2024
Updating Sveltekit/Vite now throws: `request in handle has been replaced with event. See https://github.com/sveltejs/kit/pull/3384 for details`

from sveltekitpwa.

Comments (9)

FunMiles avatar FunMiles commented on July 1, 2024

@inspiredlabs Yes there are some incompatibilities with the new sveltekit. I have done fixes on a local copy so far but have been a bit too busy to complete a clean work to push back. Hopefully, I'll find time this weekend. I'll try to give more info on here in a few hours if you want to put them in by hand yourself in your project.

from sveltekitpwa.

FunMiles avatar FunMiles commented on July 1, 2024

I have a working local fixed version. I need to check it works correctly as a PWA and then I will push it.

PS: I pushed it but cannot deploy it to Vercel for testing. It builds correctly locally but not on Vercel.

from sveltekitpwa.

inspiredlabs avatar inspiredlabs commented on July 1, 2024

PS: I pushed it but cannot deploy it to Vercel for testing. It builds correctly locally but not on Vercel.

I got the deployment working on Vercel following a Sveltekit installation and merge – see: app.html now has %sveltekit.things% as opposed to %svelte.things%.

Although now dev tools Lighthouse throws:

__layout.svelte-06035f0d.js:2 cannot register service worker DOMException: Failed to register a ServiceWorker for scope ('https://inspectort.vercel.app/') with script ('https://inspectort.vercel.app/service-worker.js'): Operation has been aborted
(anonymous) @ __layout.svelte-06035f0d.js:2
inspectort.vercel.app/:1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://inspectort.vercel.app/') with script ('https://inspectort.vercel.app/service-worker.js'): Operation has been aborted

It works!

NB: there are two requirements here:

from sveltekitpwa.

FunMiles avatar FunMiles commented on July 1, 2024

Two things:

  • Can you create a pull request with the fixes you list?
  • My inability to test it seems to be a known issue. I emailed vercel's support asking how to create a fresh or clean deployment but have not yet heard from them Your deployment works because it is a fresh deployment, I presume. Mine, trying to update the existing one, fails. See this post in a thread on the subject about it: sveltejs/kit#4135 (comment)

PS: Third thing, I am not seeing %svelte.things% in the code. Is that something purely of yours? I did change a few svelte into sveltekit, but not with things.

from sveltekitpwa.

inspiredlabs avatar inspiredlabs commented on July 1, 2024

PS: Third thing, I am not seeing %svelte.things% in the code. Is that something purely of yours? I did change a few svelte into sveltekit, but not with things.

Mea culpa, for the shorthand, what I meant was: %sveltekit.head% and %sveltekit.body% from this working version of SveltekitPWA which has %svelte.head% and %svelte.body%, obv. this no longer works as it did. Which you changed.

from sveltekitpwa.

inspiredlabs avatar inspiredlabs commented on July 1, 2024

A PR won't work as there are many changes to Sveltekit.

Here's how to get it working:

  • start a new project, which will deploy to Vercel OOTB.
  • open the contents of your zip: ~/SveltekitPWA-main, and merge the following:
    • your up-to-date project files (hooks.js, ReloadPrompt/index.svelte, etc).
    • svelte.config.js and comment out target: '#svelte',
    • OPTIONAL: I also added: const config = { experimental: { inspector: true }, ... }, to svelte.config.js, although this doesn't affect the offline capabilities.
    • open app.html and ensure %sveltekit.head% and %sveltekit.body% are there.
    • replace instances of timestamp with version in service-worker.ts
    • update your package.json, as per this: package.json.
    • npm install
      • you might need to update: npm install --save core-js@^3 separately.
    • npm build && npm run preview
    • deploy to Vercel with a temporary name, and test it works.
    • delete your old "nice-name" deploy and redeploy with the nice-name.

Feel free to clone this public repo, if I have missed something in the instructions.

from sveltekitpwa.

FunMiles avatar FunMiles commented on July 1, 2024

I have done some changes to the config.json and it seems it does address my deployment issues. I will push the changes after a bit of clean up.

from sveltekitpwa.

FunMiles avatar FunMiles commented on July 1, 2024

The changes have been pushed. Unless you see anything else, I will close this issue tomorrow.

from sveltekitpwa.

FunMiles avatar FunMiles commented on July 1, 2024

Closing this issue.

from sveltekitpwa.

Related Issues (6)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.