Non-production builds still builds production SSR bundles

[typhoon2099]

Describe the bug

I'm trying to set up a dev/staging build step in my deploy pipeline, but can't convince Svelte Kit to produce a correct build. Not being able to do so means I can't add noindex tags to my pages, and dev sites could leak into search engines.

Reproduction

Run npm run build on https://stackblitz.com/edit/sveltejs-kit-template-default-m2k71o?file=package.json&terminal=dev

Logs

❯ npm run build
$ vite build --mode testing
vite v3.0.0 building for testing...
✓ 34 modules transformed.
.svelte-kit/output/client/_app/immutable/assets/svelte-logo-87df40b8.svg                           1.85 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-cyrillic-ext-400-normal-3df7909e.woff2   15.40 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-cyrillic-400-normal-c7d433fd.woff2       8.89 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-greek-ext-400-normal-9e2fe623.woff2      7.33 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-greek-400-normal-a8be01ce.woff2          10.27 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-latin-ext-400-normal-6bfabd30.woff2      11.10 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-latin-400-normal-e43b3538.woff2          15.90 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-all-400-normal-1e3b098c.woff             75.55 KiB
.svelte-kit/output/client/_app/manifest.json                                                       5.18 KiB
.svelte-kit/output/client/_app/immutable/start-737da6ab.js                                         28.85 KiB / gzip: 9.79 KiB
.svelte-kit/output/client/_app/immutable/pages/__layout.svelte-147ef2ce.js                         6.19 KiB / gzip: 2.45 KiB
.svelte-kit/output/client/_app/immutable/error.svelte-74c83d2a.js                                  3.57 KiB / gzip: 1.38 KiB
.svelte-kit/output/client/_app/immutable/pages/about.svelte-6a933808.js                            3.52 KiB / gzip: 1.58 KiB
.svelte-kit/output/client/_app/immutable/pages/index.svelte-03b28467.js                            7.35 KiB / gzip: 3.15 KiB
.svelte-kit/output/client/_app/immutable/pages/todos/index.svelte-57505142.js                      8.74 KiB / gzip: 3.68 KiB
.svelte-kit/output/client/_app/immutable/chunks/index-a91a3869.js                                  13.80 KiB / gzip: 5.85 KiB
.svelte-kit/output/client/_app/immutable/chunks/index-92dd14f8.js                                  0.43 KiB / gzip: 0.30 KiB
.svelte-kit/output/client/_app/immutable/chunks/singletons-cdeec3fd.js                             0.05 KiB / gzip: 0.07 KiB
.svelte-kit/output/client/_app/immutable/assets/__layout-c39c904e.css                              5.11 KiB / gzip: 1.57 KiB
.svelte-kit/output/client/_app/immutable/assets/about-34f9bec4.css                                 0.11 KiB / gzip: 0.10 KiB
.svelte-kit/output/client/_app/immutable/assets/index-15f21104.css                                 1.47 KiB / gzip: 0.53 KiB
.svelte-kit/output/client/_app/immutable/assets/index-da7b4a06.css                                 3.75 KiB / gzip: 1.04 KiB
vite v3.0.0 building SSR bundle for production...
✓ 35 modules transformed.
.svelte-kit/output/server/manifest.json                         2.37 KiB
.svelte-kit/output/server/index.js                              76.18 KiB
.svelte-kit/output/server/entries/endpoints/todos/index.js      1.35 KiB
.svelte-kit/output/server/entries/pages/__layout.svelte.js      4.63 KiB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js     0.74 KiB
.svelte-kit/output/server/entries/pages/about.svelte.js         1.40 KiB
.svelte-kit/output/server/entries/pages/index.svelte.js         8.23 KiB
.svelte-kit/output/server/entries/pages/todos/index.svelte.js   5.94 KiB
.svelte-kit/output/server/immutable/chunks/index-59c70007.js    4.15 KiB
.svelte-kit/output/server/immutable/chunks/hooks-5a10edf9.js    0.46 KiB
(node:17) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-auto
  Could not detect a supported production environment. See https://kit.svelte.dev/docs/adapters to learn how to configure your app to run on the platform of your choosing
  ✔ done

System Info

System:
    OS: Linux 5.15 KDE neon 5.25
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
    Memory: 3.17 GB / 7.53 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Browsers:
    Firefox: 101.0.1
  npmPackages:
    @sveltejs/adapter-netlify: ^1.0.0-next.69 => 1.0.0-next.69 
    @sveltejs/adapter-static: next => 1.0.0-next.37 
    @sveltejs/kit: next => 1.0.0-next.377 
    svelte: ^3.49.0 => 3.49.0 
    vite: ^3.0.0 => 3.0.0

Severity

blocking all usage of SvelteKit

Additional Information

I can't run my usual workflow without this as I can't tell build which environment they're in.

[Rich-Harris]

What do you mean by a 'correct build'? In your reproduction, how does the observed behaviour differ from expectations?

[typhoon2099]

I've updated the reproduction. I expect build/index.HTML to contain the word "testing", instead it contains "production". I can't get Svelte Kit to build anything other than a production mode build when using adapter-static.

[dominikg]

it looks like --mode testing set on vite cli isn't passed through to the server build so that it defaults to production then.

You should be able to work around that by explicitly setting NODE_ENV to testing npm install -D cross-env and "build": "cross-env NODE_ENV=testing vite build --mode testing",

[typhoon2099]

it looks like --mode testing set on vite cli isn't passed through to the server build so that it defaults to production then.

You should be able to work around that by explicitly setting NODE_ENV to testing npm install -D cross-env and "build": "cross-env NODE_ENV=testing vite build --mode testing",

@dominikg That doesn't appear to be working, it's still building a production bundle for SSR. I've also tried switching to adapter-auto and publishing to Netlify but still get "MODE":"production","DEV":false,"PROD":true.

I've worked around the issue by adding a context-specific environment variable to my netlify.toml (VITE_PRODUCTION_BUILD) that I can look for when I'm publishing the site to make sure I don't add the noindex meta tag. I was hoping I could use built in environment variables for this but I don't currently see how to use a different Vite mode for the SR bundle.

[Rich-Harris]

A deeply weird thing I just noticed is that styles are broken when you have a custom --mode. It's easily visible if you disable JavaScript:

No hypothesis yet.

[Rich-Harris]

Ah, here's a hypothesis for the broken styles. Before hydration:

<h1 class="svelte-mjk9ig">
	<div class="welcome svelte-mjk9ig">
		<picture
			><source srcset="svelte-welcome.webp" type="image/webp" />
			<img src="svelte-welcome.png" alt="Welcome" class="svelte-mjk9ig"
		/></picture>
	</div>

	to your new<br />SvelteKit app
</h1>

After hydration:

<h1 class="s-Uap-jPRb-uiE">
	<div class="welcome s-Uap-jPRb-uiE">
		<picture class="s-Uap-jPRb-uiE"
			><source
				srcset="svelte-welcome.webp"
				type="image/webp"
				class="s-Uap-jPRb-uiE" />
			<img src="svelte-welcome.png" alt="Welcome" class="s-Uap-jPRb-uiE"
		/></picture>
	</div>

	to your new<br class="s-Uap-jPRb-uiE" />SvelteKit app
</h1>

The difference is in the cssHash — does that make sense to you @dominikg?

[Rich-Harris]

cssHash aside, I don't think this is related to vite-plugin-svelte as it's happening in endpoints too:

export function GET() {
  return {
    body: {
      mode: import.meta.env.MODE
    }
  };
}

Interestingly, if I put the mode in vite.config.js, it is respected:

Haven't yet been able to reproduce with just Vite.

[Rich-Harris]

Oh hang on, I finally understand what @dominikg meant in #5573 (comment) 🤦

We call vite.build(...) programmatically to generate the server and service worker builds, but we're not respecting CLI flags.

[dominikg]

yes, i should've been clearer.

the difference in cssHash is caused by the mode difference.
https://github.com/sveltejs/vite-plugin-svelte/blob/da6a124ab81a3c4abf432519b79fcd70753c3e51/packages/vite-plugin-svelte/src/utils/compile.ts#L27

options.hot is false in production, but true otherwise if not explicitly disabled. You can easily recognize the different hash format, production hashes start with svelte-, development hashes use s- (and a different hashing/encoding)

[dominikg]

I'm a bit confused why explicitly setting NODE_ENV=testing doesn't work though.