TTC
Theo's Typesafe CultNemila

[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'.
C
cnrstvns•377d 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
N
Nemila•377d 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!
B
bostonsheraff•377d 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.
N
Nemila•377d ago
I will check it out thxx
A
andersgee•375d ago
yo this is pretty impressive!
B
bostonsheraff•375d 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!
A
andersgee•375d 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!
A
amargoCactus•375d 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;
Want results from more Discord servers?
Add your server
More Posts
tRPC Error: Invalid hook call.Sorry for the noob question I just cant figure out how to do this I have the following tRPC route: eStack?Hey how would I go about creating a website where you can post minecraft servers and include a imageHow would I order by the role?Hello, I'm trying to set up an API, where I return some users. I've got it working, where it returnsPrisma Create with Connect IssueHey! I wasn't able to find another thread explaining this, but I'd love help with this! I have twoGenerating image background jobI'm making a game where you can create levels in HTML5 Canvas and upload them to the api. I will neeHelp with Vercel deploymentHi folks, I am having issues deploying to vercel. I keep getting this error:My DB shouldn’t be this slow, RIGHT❓A fresh DB (pscale) and Table with just two entries, but takes 10s to fetch them (prisma studio) I’❌ tRPC failed on profile.getUserByUsername: No "query"-procedure on path "profile.getUserByUsername"I am a bit lost. This is the profileRouter. export const profileRouter = createTRPCRouter({ getUHelp with Prisma Validator static evaluationI am trying to build a helper function that will allow me to abstract away some deeply nested includDoes invalidate(); perform an actual refetch?I am half way into the course video and I see `void ctx.post.getAll.invalidate();` to show the new pSWR - array of data in one request, one item from array in anotherSo I am using SWR in my nextJS app and I have two routes GET `/courses` gets all classes you are enClerk re-render parent server component on sign out with custom sign out button.Hi I'm probably being a little stupid here but I'm just wondering what the best and most simple way Prisma schema questionHow can I efficiently maintain a user's balance in a database given the following prisma schema, wheT3 Firebase solution? (SMS OTP Auth)I know I know, we love Auth.js and Clerk. But there's a problem when it comes to SMS authentication.How do I make Jotai work with trpc on the t3 stack?I am having trouble finding ways to work with Jotai and trpc on nextjs.Any recommend open source react project?I am trying to optimize the project of company. It is like a CRUD based shopping web. I do use tanstRendering a blob in NextjsI am having difficulties rendering an image which is restored in form as link and when i console.logWhat's the difference between React.ComponentProps and React.PropsWithChildren ?I just saw someone post something on youtube but didnt't really explain it. Whats the difference benextra with tailwindcssthrough the uploadthings docs i found out about nextra ... i would like to use tailwind but i cant gHow to use next-auth/clerk.js for getting user session```ts /** server/uploadthing.ts */ import { createFilething, type FileRouter } from "uploadthing/ser