How do I define an constant variable with EsBuild?

[Pentadome]

How do I define an constant variable with EsBuild?

I tried the following:

export const pwaConfig: Partial<VitePWAOptions> = {
  registerType: 'autoUpdate',
  devOptions: {
    enabled: true,
    type: 'module',
  },
  strategies: 'injectManifest',
  injectManifest: {
    swSrc: 'pwa/customServiceWorker.ts',
    // precache these files.
    globPatterns: ['**/*.{js,css,html,svg,woff,woff2,png}'],
  },
  integration: {
    configureCustomSWViteBuild: (options) => {
      throw 'test';  // <- never reached!
      if (!options.esbuild) {
        options.esbuild = {};
      }
      options.esbuild.define ??= {};
      options.esbuild.define.__FIREBASE_CONFIG = `'${process.env.PUBLIC_FIREBASE_CONFIG}'`;
    },
  },
}

But it seems I am not understanding what configureCustomSWViteBuild is for. It seems to never get called. How do I define an esbuild variable?

[userquin]

Are you using any integration (Nuxt, SvelteKit, Astro...)?

[userquin]

can you provide a minimal repoduction or a link to your repo if public?

[userquin]

can you check if you've "type": "module" entry in your package.json?

[Pentadome]

can you provide a minimal repoduction or a link to your repo if public?

sure

https://stackblitz.com/edit/github-4afvcv?file=package.json

I don't think you can test service workers on stackblitz tho. But you can download it from there.

can you check if you've "type": "module" entry in your package.json?
yea i got type "module"

[userquin]

You should:

• add /// <reference types="vite/client" /> to your service worker
• add .env file and prefix public entries with VITE_ and use import.meta.env.VITE_XXX: there is no way to access any process.env variable from the service worker (Nuxt will not expose any vite.define nor runtimeConfig.public in import.meta.env (also checked vite.define.envPrefix = ['VITE_', 'NUXT_'])

https://stackblitz.com/edit/github-4afvcv-xu75vp?file=nuxt.config.ts,pwa%2FcustomServiceWorker.ts,.env

[userquin]

Beware when deploying to your server, check it is working correctly, you should check any private stuff not being exposed (Vite should filter out any entry not starting with VITE_)

[userquin]

You can check https://vite.dev/guide/env-and-mode to add proper .env files for your local, pre and prod environments.

[Pentadome]

Thanks a lot. I got it working now 👍

[userquin]

@Pentadome Daniel Roe response:

nuxt prefers runtime config. we don’t expose process.env
we run in non node environments so can’t rely on process