Theo's Typesafe Cult•2y ago

[Solved] T3 Stack PWA ??

Does anybody know how to turn a t3 site into a PWA? I am using next-pwa but I am getting a few errors. Here is the error I am getting.

Argument of type '{ reactStrictMode: boolean; images: { remotePatterns: { protocol: string; hostname: string; }[]; }; pwa: { dest: string; register: boolean; skipWaiting: boolean; disable: boolean; }; i18n: { locales: string[]; defaultLocale: string; }; }' is not assignable to parameter of type 'PWAConfig'.
  Object literal may only specify known properties, and 'reactStrictMode' does not exist in type 'PWAConfig'.

Argument of type '{ reactStrictMode: boolean; images: { remotePatterns: { protocol: string; hostname: string; }[]; }; pwa: { dest: string; register: boolean; skipWaiting: boolean; disable: boolean; }; i18n: { locales: string[]; defaultLocale: string; }; }' is not assignable to parameter of type 'PWAConfig'.
  Object literal may only specify known properties, and 'reactStrictMode' does not exist in type 'PWAConfig'.

8 Replies

cnrstvns•2y ago

If you give the next-pwa docs or source a read, you'll notice that next-pwa's default export is a function that returns a function — the first function is to be called with the config for next-pwa, the second function is to be called with your next config https://github.com/shadowwalker/next-pwa/blob/1e6af5fa9f6a807930f451adb5ab5078d5cda451/index.js#L15 So you'd want to do something like:

import nextPWA from 'next-pwa';

const withPWA = nextPWA({ 
  /* your next-pwa config here */ 
});

const config = withPWA({
  // your next config here
});

export default config;

import nextPWA from 'next-pwa';

const withPWA = nextPWA({ 
  /* your next-pwa config here */ 
});

const config = withPWA({
  // your next config here
});

export default config;

Hope this helps 😄

GitHub

next-pwa/index.js at 1e6af5fa9f6a807930f451adb5ab5078d5cda451 · sha...

Zero config PWA plugin for Next.js, with workbox 🧰 - next-pwa/index.js at 1e6af5fa9f6a807930f451adb5ab5078d5cda451 · shadowwalker/next-pwa

NemilaOP•2y ago

You right! I didn't notice because in the doc they used required() instead of import. I need to work on the basics and read more attentively Thank you!

bostonsheraff•2y ago

I have a repo that's a T3 PWA if you want. No PWA package though, it's all done by hand: https://github.com/Sheraff/soft-serve-tunes

GitHub

GitHub - Sheraff/soft-serve-tunes: Self hosted music server on rasp...

Self hosted music server on raspberry pi. Contribute to Sheraff/soft-serve-tunes development by creating an account on GitHub.

NemilaOP•2y ago

I will check it out thxx

andersgee•2y ago

yo this is pretty impressive!

bostonsheraff•2y ago

Thanks! The demo is a little out of date though. I wasn't trying to advertise but since it's a personal project I've sunk a few hours into, it often has good examples for other people's problems!

andersgee•2y ago

yeah you sunk some hours into it and it shows xD I never really went deep into service workers so for me just seing stuff like this helps a lot

navigator.serviceWorker.register(new URL("./sw.ts", import.meta.url))

navigator.serviceWorker.register(new URL("./sw.ts", import.meta.url))

and //sw.ts

/// <reference lib="webworker" />
declare var self: ServiceWorkerGlobalScope
self.addEventListener("install", (event) => {
...
}

/// <reference lib="webworker" />
declare var self: ServiceWorkerGlobalScope
self.addEventListener("install", (event) => {
...
}

also the service worker cached trpc calls is cool but Im not gonna pretend I understand it quite yet, nice repo!

amargoCactus•2y ago

this is my next.config.js file

import WithPWA from 'next-pwa';

const withPWA = WithPWA({
  dest: 'public',
  register: true,
  disable: process.env.NODE_ENV !== 'production',
});

/*
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
 * This is especially useful for Docker builds.
 */
!process.env.SKIP_ENV_VALIDATION && (await import('./src/env.mjs'));

/** @type {import("next").NextConfig} */
const config = withPWA({
  reactStrictMode: true,

  /**
   * If you have the "experimental: { appDir: true }" setting enabled, then you
   * must comment the below `i18n` config out.
   *
   * @see https://github.com/vercel/next.js/issues/41980
   */
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
});

export default config;

import WithPWA from 'next-pwa';

const withPWA = WithPWA({
  dest: 'public',
  register: true,
  disable: process.env.NODE_ENV !== 'production',
});

/*
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
 * This is especially useful for Docker builds.
 */
!process.env.SKIP_ENV_VALIDATION && (await import('./src/env.mjs'));

/** @type {import("next").NextConfig} */
const config = withPWA({
  reactStrictMode: true,

  /**
   * If you have the "experimental: { appDir: true }" setting enabled, then you
   * must comment the below `i18n` config out.
   *
   * @see https://github.com/vercel/next.js/issues/41980
   */
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
});

export default config;

Gaming

Programming

[Solved] T3 Stack PWA ??