`--ui` attempts to load `.vue` files unrelated to test
See original GitHub issueDescribe 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.
Issue Analytics
- State:
- Created 2 years ago
- Comments:9 (9 by maintainers)
Top Results From Across the Web
javascript - Changing .vue files in Laravel are automatically ...
This may be a bug which sometimes occurs if you are using npm run watch. as a script to check for file changes....
Read more >Guide to Unit Testing Vue Components - TestDriven.io
This article serves as a guide to unit testing Vue components. We'll first look at why unit testing is important for creating maintainable ......
Read more >Lazy loading components and code splitting in Vue.js
This is where code splitting comes in. Open the router.js file. It should look exactly like this: import ...
Read more >Testing Vue Components With Cypress - CSS-Tricks
Component tests mount single UI components in isolation and confirm they behave as expected when used by an end-user and a developer. End-to-end ......
Read more >Style Guide - Vue.js
This is the official style guide for Vue-specific code. ... but wherever possible, we'll try to show you how to use ESLint and...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Turns out
optimizeDeps: undefined
doesn’t disable optimization, I guess thats why this patch was made. ButoptimizeDeps: { entries: [] }
does disable it, opened a PR #1104So, 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.
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 withmode === 'test'
). This is a temporary solution, until we find a proper fix