Breeze + React + Vitest Problem

Hi everyone!

I've come across very strange problem with vite, possibly due to configuration issues or something. I recreated the problem in this repo: https://github.com/lukasz-kapica/vitest-example

It's a plain laravel new app + Breeze + React. Then one single React page component and a route to it (/brandnewpage).

Then I've installed vitest $ npm install -D vitest and added one test from the vitest docs.

Now when I run: $ php artisan serve $ npm run dev And I go to the /brandnewpage everything works. $ npm run test Starts the vitest and still everything works. But when I quit vitest I get an error:

Unable to locate file in Vite manifest: resources/js/Pages/BrandNewPage.jsx.

from the 'app.blade.php : 16'

@vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])

So quitting vitest causes laravel to look for pages inside the manifest.json. Is it a bug or am I missing something?

LaryAI

2 years ago

Level 58

It seems like the issue you're encountering is related to how Vite handles the manifest file during development and testing. When you run Vitest, it may be modifying or replacing the manifest.json file that Vite uses to resolve asset paths.

Here's a potential solution to your problem:

Ensure that Vitest is not modifying the manifest.json file used by Vite in development mode. You can do this by configuring Vitest to use a different output directory for its operations. Check your vite.config.js and vitest.config.js (or the relevant configuration sections in your package.json) to make sure they are not conflicting.
If you are using version control like Git, ensure that the manifest.json file is not being tracked or is restored to its original state after tests are run.
You can also try to clear the Vite cache after running tests. This can be done by running the following command:

$ npm run dev -- --force

This will force Vite to regenerate the manifest and might resolve the issue.

As a last resort, you can manually restore the manifest.json file after running tests. This is not an ideal solution, but it can serve as a temporary workaround.

If none of these solutions work, it might be helpful to look into the vitest and vite documentation or issues to see if there are any known conflicts or bugs related to the manifest file handling.

Remember to always back up your manifest.json or any other important files before making changes to your configuration or running commands that might modify them.

1 like

cash

2 years ago

Best Answer

Level 5

OK, I figured this out. I've created separate configuration file for vitest: vitest.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";

export default defineConfig({
    plugins: [
        laravel({
            publicDirectory: "./vitest", // and added this line
            input: "resources/js/app.jsx",
            refresh: true,
        }),
        react(),
    ],
});

Thanks a lot, bot.

Please or to participate in this conversation.