import.meta.env undefined after upgrade from 405 to 432

[sidharthv96]

Describe the bug

import.meta.env is undefined after upgrading to v432, causing vitest to fail.

Reproduction

PR of the upgrade branch. Only contains changes for the upgrade.

• Upgrade SvelteKit mermaid-js/mermaid-live-editor#983 (Closed with @brev's fix)
• SvelteKit 453 mermaid-js/mermaid-live-editor#994

Logs

❯ node_modules/@sveltejs/kit/src/runtime/app/env.js:4:41
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/lib/util/serde.test.ts [ src/lib/util/serde.test.ts ]
      2|  * @type {import('$app/env').browser}
      3|  */
      4| export const browser = !import.meta.env.SSR;
       |                                         ^
      5| 
      6| /**
 ❯ async /Users/sidv/dev/mermaid-live-editor/src/lib/util/stats.ts:1:256
 ❯ async /Users/sidv/dev/mermaid-live-editor/src/lib/util/state.ts:5:31
 ❯ async /Users/sidv/dev/mermaid-live-editor/src/lib/util/serde.test.ts:5:31

TypeError: CTest Files  1 failed | 1 passed (2)
     Tests  1 passed (1)
  Start at  10:12:58
  Duration  1.53s (transform 974ms, setup 110ms, collect 795ms, tests 15ms)

annot read properties of undefined (reading 'SSR')
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

System Info

System:
    OS: macOS 12.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 66.52 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.17.0 - /var/folders/~~/node
    Yarn: 1.22.19 - /var/folders/~~/yarn
    npm: 8.18.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 103.0.2
    Safari: 15.4
  npmPackages:
    @sveltejs/adapter-static: 1.0.0-next.39 => 1.0.0-next.39 
    @sveltejs/kit: 1.0.0-next.432 => 1.0.0-next.432 
    svelte: 3.49.0 => 3.49.0 
    vite: 3.0.9 => 3.0.9 

Severity

blocking an upgrade

Additional Information

No response

[dummdidumm]

Possibly the same underlying reason as in #5952

[brev]

I have been able to get around this (and related bugs) in Vitest by mocking $app/env, in my test setup file:

// ./test/setup.ts
beforeAll(() => {
  vi.mock('$app/env', () => ({
    browser: 'window' in globalThis,
  }))
})

[sidharthv96]

@brev thanks a lot! Fixed my issue temporarily.

[alex-madhive]

+1 Dealing with the same issue

[alex-madhive]

I added the code snippet that @brev mentioned, and although it fixed some tests, I'm still getting a couple tests failing due to the same error. Any thoughts? P.S.: It's not the glob pattern that's wrong.

Here is my vite config:

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

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],
  server: {
    port: 3000,
    strictPort: true
  },
  optimizeDeps: {
    include: ["fast-fuzzy"]
  },
  ssr: {
    external: ["firebase"]
  },
  build: {
    target: "esnext"
  },
  test: {
    deps: {
      inline: [
        "luxon",
        "@peculiar/asn1-schema",
        "layercake",
        "@sentry/browser",
        "@sentry/tracing",
        "@sentry/utils",
      ]
    },
    environment: "jsdom",
    environmentOptions: {
      jsdom: {
        pretendToBeVisual: true
      }
    },
    globals: true,
    include: ["src/test/**/*.test.ts"],
    reporter: "verbose",
    setupFiles: [
      "./vitest/setup-files/import-testing-library.ts",
      "./vitest/setup-files/mock-logger.ts",
      "./vitest/setup-files/mock-mad-fire.ts",
      "./vitest/setup-files/mock-window.ts",
      "./vitest/setup-files/setup-crypto.ts",
      "./vitest/setup-files/temp-window-fix.ts"
    ]
  }
};

export default config;

[sidharthv96]

Tested after #6398 closed #5952, but this issue is still present.
PR: https://github.com/mermaid-js/mermaid-live-editor/pull/994/files

[brev]

Oh, I just accidentally stumbled across this, related?

https://github.com/sveltejs/kit/releases/tag/%40sveltejs%2Fkit%401.0.0-next.445

[breaking] rename $app/env to $app/environment, to disambiguate with $env/... (https://github.com/sveltejs/kit/pull/6334)

[alex-madhive]

@brev Nope, implemented this but still broken on my end.

[hnrq]

Also broken here

[pzuraq]

We're also seeing this issue

[dummdidumm]

Adding

ssr: {
		noExternal: ['@sveltejs/kit']
	}

to the vite.config.js fixes the issue for me, although I'm not sure if this has other unintended side effects - one I know for sure is if you have @sveltejs/kit as a linked dependency ("../../kit") then it'll probably result in duplicated modules, causing confusing bugs.

[Rich-Harris]

Is this still happening? If so, we're going to need a repro — not a branch of an existing project, but a proper standalone minimal reproduction

[Rich-Harris]

Closing as we don't have a minimal reproduction to work with. Feel free to open a new issue with a repro

[eunukasiko]

This was the solution for us https://vitest.dev/guide/in-source.html