Specifically:
- eslint: v8.55.0
- jsdom: v23.0.1
- vite: v4.5.1
- webdriverio: v8.24.6
I'm trying to bump vite to 5.0.5 and vitest and its @vitest/* helpers to
1.0.0, but I'm currently having problems. `pnpm test` will work fine,
but `pnpm test -- --browser` is broken.
When bumping to vite 5.0.5 by itself (`pnpm up --latest vite`):
```text
Unhandled Rejection:
TypeError: Failed to fetch dynamically imported module:
http://localhost:5173/@id/vitest/utils
This error originated in "main.test.js" test file. It doesn't mean the
error was thrown inside the file itself, but while it was running.
```
When bumping to vitest, et. al. v1.0.0 (`vitest @vitest/browser
@vitest/coverage-istanbul @vitest/coverage-v8 @vitest/ui 1.0.0`):
```text
Reload Error:
Error: Vitest failed to load "vitest/utils" after 10 retries.
❯ WebSocket.<anonymous>
../../../../../../../../../__vitest_browser__/index-JmUxqpfn.js:958:36
Caused by: TypeError: Failed to fetch dynamically imported module:
http://localhost:5173/@id/vitest/utils
```
Bumping both results in the same Reload Error, both in my existing
project and a fresh project. Running `pnpm add -D @vitest/utils` made no
difference.
I wonder if this will actually fix everything, looks like I'll be able
to try it shortly after I write this:
- vitest-dev/vitest#4654
---
Here's what I've discovered so far from investigating the problem:
Tracing back from __vitest_browser__/index-JmUxqpfn.js:958:36, the
source appears to be:
- https://github.com/vitest-dev/vitest/blob/34517cebf428f4d0452c63d9f2ec5ab13fe50c78/packages/browser/src/client/main.ts#L131
- https://github.com/vitest-dev/vitest/blame/34517cebf428f4d0452c63d9f2ec5ab13fe50c78/packages/browser/src/client/main.ts#L131
- vitest-dev/vitest#4518
```js
ws.addEventListener('open', async () => {
await loadConfig()
let safeRpc: typeof client.rpc
try {
// if importing /@id/ failed, we reload the page waiting until Vite prebundles it
const { getSafeTimers } = await importId('vitest/utils') as typeof import('vitest/utils')
safeRpc = createSafeRpc(client, getSafeTimers)
}
catch (err: any) {
if (reloadTries >= 10) {
const error = serializeError(new Error('Vitest failed to load "vitest/utils" after 10 retries.'))
```
Here are the references to prebundling:
- https://vitejs.dev/guide/dep-pre-bundling.html
- https://vitejs.dev/config/dep-optimization-options.html
- https://vitest.dev/config/#deps-optimizer
Setting the `legacy.proxySsrExternalModules` config option mentioned in
the migration guide doesn't seem to help:
- https://vitejs.dev/guide/migration.html
It seems this is the part of the @vitest/browser package responsible for
configuring dependency optimization:
- https://github.com/vitest-dev/vitest/blob/34517cebf428f4d0452c63d9f2ec5ab13fe50c78/packages/browser/src/node/index.ts#L49-L65
- https://github.com/vitest-dev/vitest/blame/34517cebf428f4d0452c63d9f2ec5ab13fe50c78/packages/browser/src/node/index.ts#L49
```js
optimizeDeps: {
entries: [
...entries,
'vitest/utils',
'vitest/browser',
'vitest/runners',
],
exclude: [
...builtinModules,
'vitest',
'vitest/utils',
'vitest/browser',
'vitest/runners',
'@vitest/utils',
],
include: [
'vitest > @vitest/utils > pretty-format',
```
The current vitest version locked for this project is v1.0.0-beta.4.
These segments of that change appeared long before then:
- vitest-dev/vitest@78bad4a
from: vitest-dev/vitest#3190, v0.31.0
- vitest-dev/vitest@3d0908e
from: v0.32.4
This one, however, didn't appear until vitest v1.0.0-beta.5:
- vitest-dev/vitest@648bccb
from: vitest-dev/vitest#4514