Laravel vite with unocss devtools not working

[HassanDomeDenea]

UnoCSS version

0.53.4

Describe the bug

I set up fresh laravel, using vite I added unocss to app.ts:

//app.ts

import 'uno.css'
import 'virtual:unocss-devtools'

import {createApp} from 'vue'
import App from './components/App.vue'
createApp(App).mount('#app')

After runing npm run dev, and visiting the website, an error occurred in terminal:

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at IncomingMessage.<anonymous> (file:///D:/laragon/www/hddclinic3/node_modules/@unocss/vite/dist/index.mjs:1059:23)

Also In browser the error was:
Access to fetch at 'http://[::1]:5175/@unocss-devtools-update' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

After couple of maniputlations, I added this line to file:

//node_modules/@unocss/vite/dist/client.mjs

function post(data) {
    return fetch("__POST_PATH__", {
++   mode: 'no-cors',
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
    });
}

And it worked! So I wanted to share this because I searched for it and din't find any official or workaround.

Reproduction

install laravel fresh app.

Follow the documentation in:
https://unocss.dev/integrations/vite#vite-plugin

And adding the feature:
https://unocss.dev/integrations/vite#edit-classes-in-devtools

System Info

node v 18.6.0
php 8.2
laravel x10
vite 4.0
unocss ^0.53.4

Validations

• Read the Contributing Guidelines.
• 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.

[slavamak]

Same issue here

[mortona42]

I had this issue with a Drupal site and the code change provided above works. I believe I have cors headers set correctly in Drupal, and the error is being triggered by vite not providing the headers.

[mortona42]

For anyone wondering how to use this:
export default defineConfig({ plugins: [ UnoCSS({ fetchMode: 'no-cors' }), ],