unplugin / unplugin-auto-import

Auto import APIs on-demand for Vite, Webpack and Rollup

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

stuck infinite loading loop with vitesse-like setup starting from v0.6.x

wc-matteo opened this issue · comments

I upgraded to v0.6.0/0.6.1 and now when loading a page in development, the app is constantly reloading. I see this this in console:

image

and the counter (x185) continues to go up. Previous versions (v0.5.11) are fine.

some problem

I can't reproduce it on Vitesse.

Same issue here for sveltekit.

I could also not reproduce, until I added postcss/tailwind to the project.

Example repo with the infinite reload: https://github.com/RickMeijer/unplugin-autoimport-error
The behaviour goes away when you remove the css in index.svelte

Then I guess it might be a bug of Tailwind that includes all files as module dependency regardless it's been used or not.

It doesn't happen when I downgrade the autoimport to 0.5.x, which lead me to think it had to be a change here that caused the issue. No matter the cause: in my case it's fixed by making the content part of my tailwind more specific.

from

content: ['./src/**/*.{js,jsx,ts,tsx,svelte}'],

to

content: [
  './src/routes/**/*.{js,jsx,ts,tsx,svelte}',
  './src/app.html'
],

for example.

It entirely depends on where you write your *.d.ts file if you use one. Thank you for the active involvement @antfu , appreciate the work.

@wc-matteo, do you have an example repo for me? I like to take a look to see if you have the same issue as I had. Or is this enough information to help you fix the issue?

@antfu yes tailwindcss problem

me fixed
image

I think in the TW config you need to fine a way to exclude .d.ts file

@antfu problem still exist when I using Windi css, with auto import.
image

`

{
"name": "",
"version": "0.0.0",
"author": "",
"license": "",
"scripts": {
"start": "vite",
"build": "vue-tsc --noEmit --skipLibCheck && vite build",
"lint": "eslint src",
"preview": "vite preview"
},
"dependencies": {
"@intlify/unplugin-vue-i18n": "^0.9.2",
"@vueuse/core": "^9.13.0",
"axios": "^1.3.4",
"date-fns": "^2.29.3",
"naive-ui": "^2.34.3",
"nprogress": "^0.2.0",
"pinia": "^2.0.33",
"prism-theme-vars": "^0.2.4",
"qs": "^6.11.1",
"vue": "^3.2.47",
"vue-i18n": "^9.2.2",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@iconify/json": "^2.2.35",
"@types/node": "^18.15.3",
"@types/nprogress": "^0.2.0",
"@types/qs": "^6.9.7",
"@types/svgo": "^2.6.4",
"@typescript-eslint/eslint-plugin": "^5.55.0",
"@typescript-eslint/parser": "^5.55.0",
"@vicons/carbon": "^0.12.0",
"@vicons/utils": "^0.1.4",
"@vitejs/plugin-legacy": "^4.0.1",
"@vitejs/plugin-vue": "^4.0.0",
"@vitejs/plugin-vue-jsx": "3.0.0",
"@windicss/plugin-scrollbar": "^1.2.3",
"eslint": "^8.36.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.7.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.9.0",
"lint-staged": "^13.2.0",
"markdown-it-link-attributes": "^4.0.1",
"markdown-it-prism": "^2.3.0",
"prettier": "^2.8.4",
"sass": "^1.59.3",
"typescript": "^4.9.5",
"unplugin-auto-import": "^0.15.1",
"unplugin-icons": "^0.15.3",
"unplugin-vue-components": "^0.24.1",
"vite": "^4.1.4",
"vite-plugin-fonts": "^0.7.0",
"vite-plugin-md": "^0.21.5",
"vite-plugin-windicss": "^1.8.10",
"vite-svg-loader": "^4.0.0",
"vue-tsc": "^1.2.0"
},
"type": "module",
"lint-staged": {
"*.{ts,js,vue}": [
"eslint"
]
}
}

`