--ui attempts to load .vue files unrelated to test

[DerYeger]

Describe the bug

Attempting to open the use the UI with --ui causes Vitest to load .vue files unrelated to the tests (from the docs in particular).

The following errors are printed:

error: No loader is configured for ".vue" files: demo/components/App.vue

[
    {
      detail: undefined,
      location: {
        column: 16,
        file: 'demo/main.ts',
        length: 25,
        line: 1,
        lineText: "import App from 'demo/components/App.vue'",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'No loader is configured for ".vue" files: demo/components/App.vue'
    }
],

demo/main.ts is not referenced in the source code or any test.

Reproduction

Repository with reproduction: https://github.com/DerYeger/d3-graph-controller

Can be reproduced by running the test with yarn test:watch --ui.

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor            
    Memory: 16.04 GB / 31.92 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.20.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (96.0.1054.62)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @vitejs/plugin-vue: 2.0.1 => 2.0.1 
    vite: 2.7.10 => 2.7.10 
    vitest: 0.0.139 => 0.0.139

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[edimitchel]

Hi, is that issue still a problem?

[DerYeger]

Yes. Running yarn test:watch --ui in the repository linked above results in the same error.
I tried it with v0.2.3 without success.

[edimitchel]

Ok, I'll try to see what is going wrong.

[sheremet-va]

Is it still happening?

[DerYeger]

Is it still happening?

Yes, just tested it with v0.4.2.

[DerYeger]

It's seemingly related to the file names.

After renaming demo/main.ts the error no longer occurs.
However, the UI still doesn't work. I also renamed src/main.ts, but that didn't help.
There's no error, but the UI does open either.

[DerYeger]

I just noticed the v0.5.0 release.

After updating to that version, I do get the message that the UI was started, but the UI still is a 404.

[sheremet-va]

So, this happens because:

By default, Vite will crawl all your .html files to detect dependencies that need to be pre-bundled (ignoring node_modules, build.outDir, tests and coverage). If build.rollupOptions.input is specified, Vite will crawl those entry points instead.

• https://vitejs.dev/config/#optimizedeps-entries

We had it disabled, but removed some time ago - #641 🤔

So, if you do optimizeDeps: { entries: [] }, you won't get the error (maybe apply it conditionally with mode === 'test'). This is a temporary solution, until we find a proper fix

[sheremet-va]

We had it disabled, but removed some time ago - #641 🤔

Turns out optimizeDeps: undefined doesn't disable optimization, I guess thats why this patch was made. But optimizeDeps: { entries: [] } does disable it, opened a PR #1104