ReferenceError: Can't find variable: process

[vsly-ru]

Describe the bug
After a few days of development on one single page (with many components) and building a production version (built version is working perfectly), I'm unable to open just this exact page in the dev mode only with following errors in any browser:

Logs
Page itself:

500
Can't find variable: process
http://localhost:3000/node_modules/.vite/postcss.js?v=6be27279:33:40
http://localhost:3000/node_modules/.vite/postcss.js?v=6be27279:11:13
http://localhost:3000/node_modules/.vite/postcss.js?v=6be27279:92:64
http://localhost:3000/node_modules/.vite/postcss.js?v=6be27279:11:13
http://localhost:3000/node_modules/.vite/postcss.js?v=6be27279:5022:49
http://localhost:3000/node_modules/.vite/postcss.js?v=6be27279:11:13
module code@http://localhost:3000/node_modules/.vite/postcss.js?v=6be27279:5097:48
evaluate@[native code]
moduleEvaluation@[native code]
moduleEvaluation@[native code]
moduleEvaluation@[native code]
[native code]
promiseReactionJobWithoutPromise@[native code]
promiseReactionJob@[native code]

From browser's console:

[Error] Unhandled Promise Rejection: ReferenceError: Can't find variable: process
[Error] Unhandled Promise Rejection: ReferenceError: Cannot access uninitialized variable.
	(anonymous function) (start.js:233)
	asyncFunctionResume
	(anonymous function)
	promiseReactionJobWithoutPromise
	promiseReactionJob

npm run dev or yarn dev show no errors at all.

Other pages are still working without a problem. Built project also works as intended with no errors.
From googling found pretty similar issue in vite's issues (but it was closed).

To Reproduce
My setup:

1. npm init svelte@next appName typescript version
2. npx svelte-add tailwindcss
3. npm install, npm run dev, write lots of code and some components postcss (tailwind) styling, etc.
   I'm terribly sorry, but I can't provide the exact code causing problems. If I'll be able to reproduce it with some example code later, I'll update this issue.
4. At some point you start occasionally see these errors above, but it is pretty easy to avoid by navigating to a different page and back.
5. npm run build or yarn build – built website works like a charm. But after running dev again I start to see these errors 99% of times (in some rare occasions I'm still able to load the desired page correctly by randomly clicking back and forth between existing pages and refreshing the page).

Expected behavior
I expected the page to work in dev mode.

Stacktraces
Terminal outputs no errors or warnings.

Information about your SvelteKit Installation:

Diagnostics

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers
  System:
  OS: macOS 10.15.7
  CPU: (8) x64 Intel(R) Core(TM) i7-3635QM CPU @ 2.40GHz
  Memory: 188.13 MB / 8.00 GB
  Shell: 5.7.1 - /bin/zsh
  Binaries:
  Node: 14.9.0 - ~/.volta/tools/image/node/14.9.0/bin/node
  Yarn: 1.22.10 - ~/.volta/tools/image/yarn/1.22.10/bin/yarn
  npm: 7.9.0 - ~/.volta/tools/image/npm/7.9.0/bin/npm
  Browsers:
  Chrome: 90.0.4430.93
  Firefox: 88.0
  Safari: 14.1
  npmPackages:
  @sveltejs/kit: next => 1.0.0-next.103
  svelte: ^3.34.0 => 3.38.2
  vite: ^2.2.3 => 2.2.4

• Your browser
  I've tried all of the above, from the system report.

• Your adapter (e.g. Node, static, Vercel, Begin, etc...)
  Problem doesn't appear with an adapter.

Severity
Just annoying. I hope I can help saving others from running into it.

Additional context
Since I can't provide the code, please suggest any actions or changes to make in order to find/fix the problem.
If there's no easy solution, I'll do my best to isolate the problem with a separate repository later on.
At the moment I doesn't have time to do so properly.
UPDATE: at the moment, the page successfully loads more often (with the same errors, but I'm at least is able to go around it and avoid them)

[vsly-ru]

bug reproduced

While trying to reproduce the bug in a test project, intelliSense just randomly imported import { list } from 'postcss'; for me and page stopped working with the error reported above. Probably this import is somehow wrong or something. The problem is that neither VSCode, eslint, tsc or svelte has displayed any errors. This ghost error caused page to display the errors instead of loading correctly. However, when built, the error is gone and page works fine.
Here's my test repository and the steps to reproduce:

1. git clone [email protected]:vsly-ru/svelte-kit-process-bug.git
2. cd svelte-kit-process-bug && npm install
3. npm run dev
4. Open localhost:3000 and navigate to the Test page. Try reloading it.
5. npm run build && npm run preview
6. Reload the page and now it's working fine.

eslint only shows the warning:

2:11  warning  'list' is defined but never used  @typescript-eslint/no-unused-vars

In my project, however, I don't have a wrong import to blame 🤷‍♂️

[vsly-ru]

@Conduitry does this clarify the problem enough?
Maybe it's not a problem with the svelteKit itself, but it is clearly ruining the dev experience in some occasions. As I mentioned, in my case I don't have an import to blame and still hasn't found the error causing it. So this problem may be caused by other invisible errors in general.

[babichjacob]

In my project, however, I don't have a wrong import to blame 🤷‍♂️

You do: https://github.com/vsly-ru/svelte-kit-process-bug/blob/e282e6d867d0dda77a52150217dc970456c29837/src/routes/test.svelte#L2

[vsly-ru]

In my project, however, I don't have a wrong import to blame 🤷‍♂️

You do: https://github.com/vsly-ru/svelte-kit-process-bug/blob/e282e6d867d0dda77a52150217dc970456c29837/src/routes/test.svelte#L2

@babichjacob ithis is my test/bugreport project, created specifically to reproduce the problem LOL 😅:
- If possible, we recommend creating a small repo that illustrates the problem.
In my ongoing project I don't have one, haha. Sorry for not being clear enough.
The sentence where in my ongoing project I don't have an import like illustrated one – supposed to be an extension of areas where you can suddenly face the problem. Without any error output (during npm run dev) it forever locking yourself out of your page in the dev mode. If you can't isolate the problem yourself. Which I'm still suffering with in my ongoing project.

[babichjacob]

Hmm, I couldn't quite find the main issue for having more understandable error messages especially relating to situations like this, so I've reopened this.

[vsly-ru]

@babichjacob I have finally found the problem btw. It was inside of the one of shared classes (.ts) that I imported straight from the backend. It simply had some leftover debug-related code (checking process.env.debug flag).
How on earth tho it was working fine after building the project?
Nevertheless, after thinking again, maybe asking svelteKit to check (during dev/building/linting) for a missing (in the browser) variables/modules is too much tho, sounds more like a feature request long after 1.0;