Blitz.js Support

[louisbirla]

I’m trying to use blitz.js with this plugin, but it does not totally add itself to the actual app. Blitz.js uses Next.js, so I was expecting this to work.

On the pages it is supposed to, this tries to add sw.js, but it is not available at /sw.js (404)

Would this be something you’d be interested in adding support for?

A discovery that I made was that it added the sw.js well in development, but when building the app it does not.

Thank you

[shadowwalker]

@nilaeus Would you mind create a minimal reproduce repository? I will see what I can do.

[louisbirla]

@shadowwalker https://github.com/nilaeus/blitz-next-pwa I’ve added some instructions on README on how to get it set up, and the problem.

[shadowwalker]

To solve the problem, change the following line: https://github.com/nilaeus/blitz-next-pwa/blob/dc54eeb11500af71717c886884f47eb19bf14669/blitz.config.js#L27

        dest: "public",

to this:

        dest: "../../../public",

The reason is that blitz.js changes the default build folder and the generated sw.js file end up to this location

D:\Workspaces\tmp\blitz-next-pwa\.blitz\caches\build\public\sw.js

However, the static assets are served in the public folder in the project folder, so we need to force the generation to

D:\Workspaces\tmp\blitz-next-pwa\public\sw.js

[louisbirla]

That works. Thanks for the quick response!

[RobertBroersma]

If I change dest to ../../../public, webpack hits me with a

Error: clean-webpack-plugin: Cannot delete files/folders outside the current working directory. Can be overridden with the `dangerouslyAllowCleanPatternsOutsideProject` option.

To verify I went into node_modules to turn on this dangerous setting and indeed it works.

Any suggestions? I suppose setting this dangerous setting to true by default is slightly concerning. Maybe allow passing this in as an option to next-pwa? Maybe someone creates a fork called blitz-pwa? 😄

[m5r]

Hi, thanks for making next-pwa compatible with Blitz. It seems that it's not completely compatible yet.

I'm using next-pwa in my Blitz app and it seems to be stripping the anti-csrf header on requests. I've raised this issue in their Discord channel (link) but I'm not sure where the change should come from so I'm posting here as well.

I've set up a minimal reproducible repo available here https://github.com/m5r/blitz-pwa-csrf-bug How to reproduce the bug:

• clone, npm install, npx blitz prisma migrate deploy
• uncomment the // const withPWA = require("next-pwa") line in blitz.config.ts:3
• npm run build && npm run start
• open http://localhost:3000/login
• try to log in with any credentials twice

You will get a CSRFTokenMismatchError because the POST to http://localhost:3000/api/auth/mutations/login doesn't contain the anti-csrf header while your session in the database does contain a CSRF token.

Digging into next-pwa dependencies, it looks like those require('webpack') in workbox-webpack-plugin are causing this issue but I can't figure out why :thinking:

[utsavdotpro]

Hi @m5r, did you find any resolution to this issue?

[flybayer]

This is no longer relevant with Blitz 2.0 since Blitz no longer abstracts Next.js. next-pwa will work fine with next+blitz now

[utsavdotpro]

Works well with Blitz 2.0, just upgraded. Thanks @flybayer 😄