kit: After upgrading to Vite 3 and with latest SvelteKit `process.env.NODE_ENV` is not replaced anymore

Describe the bug

I was using "@sveltejs/kit": "1.0.0-next.370" and "vite": "2.9.14".

After the upgrade to "@sveltejs/kit": "1.0.0-next.391" and "vite": "3.0.2" I’m having issue with service-worker.ts which has this code in it:

/// <reference lib="webworker" />

import {
	precacheAndRoute,
	createHandlerBoundToURL,
	cleanupOutdatedCaches,
} from "workbox-precaching";
import { NavigationRoute, registerRoute } from "workbox-routing";

import { build, files, version } from "$service-worker";

const worker = self as unknown as ServiceWorkerGlobalScope;

cleanupOutdatedCaches();

precacheAndRoute([
	...build.map((f) => ({ url: f, revision: null })),
  /// more code
]);

// other workbox code

What is happening is that after npm run build (vite build) the service-worker.js in build directory contains code like:

....M="production"===process.env.NODE_ENV?K:A;class l extends Error{constructor(e,t).....

As you can see process.env.NODE_ENV is not replaced.

Reading on vitejs config I saw the define property which should do replacement like this:

define: {
  "process.env.NODE_ENV": '"production"',
  //"process.env.NODE_ENV": import.meta.env.MODE, // this doesn't work
},

I think this is not correct usage in SvelteKit.

I think SvelteKit should replace automagically that env because it’s so common in the world.

System Info

System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @sveltejs/adapter-static: 1.0.0-next.38 => 1.0.0-next.38
    @sveltejs/kit: 1.0.0-next.391 => 1.0.0-next.391
    svelte: 3.49.0 => 3.49.0
    vite: 3.0.2 => 3.0.2

Severity

blocking an upgrade

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 15 (11 by maintainers)

Commits related to this issue

fix: patch sveltejs/kit#5682 service worker issue See https://github.com/sveltejs/kit/issues/5682 for details — committed to nulladdict/nulladdict by nulladdict 2 years ago
fix: patch sveltejs/kit#5682 service worker issue See https://github.com/sveltejs/kit/issues/5682 for details — committed to nulladdict/nulladdict by nulladdict 2 years ago

Most upvoted comments

I’m using this code right now:

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig(({ mode }) => {
  return {
    plugins: [sveltekit()],

    define: {
      "process.env.NODE_ENV":
        mode === "production" ? '"production"' : '"development"',
    },

    //other configs...
  };
});

Wat do you think?

frederikhors on Jul 23, 2022

Confirmed that #7140 (which went live in @sveltejs/kit @1.0.0-next.509) makes it possible to create a functional Workbox service worker.

If you are using Workbox to build your service worker, you will need to add the following configuration to your vite.config file. Note that this requires exporting a defineConfig function instead of a simple config object.

export default defineConfig(({ mode }) => {
    // ...the rest of your Vite configuration...
    define: {
        'process.env.NODE_ENV': mode === 'production' ? '"production"' : '"development"'
    },
}

I think this can be closed, but I wonder if a note about this should be included in 10_service_workers? Anyone who uses Workbox (or perhaps any other service worker library, I haven’t tried) will have a failing service worker until they implement this configuration, and the console errors for that sort of thing are not very helpful.

dnotes on Oct 5, 2022

vite.config.ts is indeed ignored while building the service worker (see: build_service_worker.js)

As far as I’m aware process.env replacing in vite only worked through the define plugin. Which is used by everyone with large enough dependency graph, since too much of the ecosystem uses process.env.NODE_ENV checks.

Now, the behaviour was probably changed by this PR: https://github.com/sveltejs/kit/pull/5839/files#diff-435b0550c8431b095f93ce127dfa5bef62671c54f320f0aaaa44d3dfd7b332b1L67-R66
After this, sw build uses it’s own config and no longer merges the default config, effectively making it impossible to use the define plugin (and any other plugins or configuration options, to be precise).

While I’m not sure we actually need to merge the default config (there might be some incompatible plugins and options), there should be a way to tweak the sw build configuration. We can probably add vite.service-worker.config.ts or provide configuration through kit.serviceWorker option in svelte.config.js

nulladdict on Aug 31, 2022

SvelteKit was never handling process.env.NODE_ENV so I assume this is a change in Vite. I’d prefer that Vite be responsible for this sort of thing, but we need to figure out what changed between 2 and 3.

Rich-Harris on Jul 23, 2022