antfu-collective / vitesse

🏕 Opinionated Vite + Vue Starter Template
https://vitesse.netlify.app/
MIT License
8.83k stars 931 forks source link

Vitesse default setup appears to be broken - apparently by @windicss+plugin-utils@1.7.0 #301

Closed armenr closed 2 years ago

armenr commented 2 years ago
node --version
v16.14.0

Steps to reproduce:

git clone https://github.com/antfu/vitesse.git
cd vitesse
pnpm i && pnpm dev

With hot reload/dev running, go into your IDE, and edit ANYTHING in the /styles folder. As soon as you save the file, vite throws and crashes.

12:00:41 AM [vite] hmr update /src/styles/main.css
/private/tmp/vitesse/node_modules/.pnpm/@windicss+plugin-utils@1.7.0/node_modules/@windicss/plugin-utils/dist/index.js:826
          attributesObject[name2].push(...value.split(regexClassSplitter).filter(Boolean));
                                                ^
TypeError: Cannot read properties of undefined (reading 'split')
    at /private/tmp/vitesse/node_modules/.pnpm/@windicss+plugin-utils@1.7.0/node_modules/@windicss/plugin-utils/dist/index.js:826:49
    at Array.forEach (<anonymous>)
    at Object.buildPendingStyles (/private/tmp/vitesse/node_modules/.pnpm/@windicss+plugin-utils@1.7.0/node_modules/@windicss/plugin-utils/dist/index.js:823:20)
    at getChangedModuleNames (/private/tmp/vitesse/node_modules/.pnpm/vite-plugin-windicss@1.7.0_vite@2.8.0/node_modules/vite-plugin-windicss/dist/index.js:115:11)
    at reloadChangedCssModules (/private/tmp/vitesse/node_modules/.pnpm/vite-plugin-windicss@1.7.0_vite@2.8.0/node_modules/vite-plugin-windicss/dist/index.js:144:44)
    at Timeout._onTimeout (/private/tmp/vitesse/node_modules/.pnpm/vite-plugin-windicss@1.7.0_vite@2.8.0/node_modules/vite-plugin-windicss/dist/index.js:334:7)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)
 ELIFECYCLE  Command failed with exit code 1.
cibilex commented 2 years ago

I have the same problem and I have tried to fix this problem for 2 days but I couldn't.

//vite.config.ts`
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),WindiCSS()]
})
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import "windicss"
// also I tried  import "virtual:windicss" 
createApp(App).mount('#app')
// windi.config.ts
import {defineConfig} from "vite-plugin-windicss";

export default defineConfig({
    attributify:true
})
// src/app.vue
<template>
<h1  class="text-center font-bold text-6xl btn text-red-300 bg-dark-300">
  asd
</h1>
</template>
// package.json
  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.0",
    "typescript": "^4.5.4",
    "vite": "2.7.13",
    "vite-plugin-windicss": "^1.7.0",
    "vue-tsc": "^0.29.8",
    "windicss": "^3.4.3"
  }

I have tried to some extra ways but ,none of them worked.Also I tried vitesse-ssr-template but it also didn't work :(

antfu commented 2 years ago

vite-plugin-windicss v1.7.1 should fix this