umi
umi copied to clipboard
[Bug] tailwindcss generate failed after 5 seconds, please check your tailwind.css and tailwind.config.js(FIXED)
What happens?
Unable to start project yarn start info - [plugin: ./node_modules/@umijs/plugins/dist/tailwindcss] tailwindcss service started Rebuilding... error - [plugin: ./node_modules/@umijs/plugins/dist/tailwindcss] tailwindcss generate failed after 5 seconds, please check your tailwind.css and tailwind.config.js Done in 19.57s.
Mini Showcase Repository(REQUIRED)
Please provide a minimal reproduction then upload to your GitHub. 请提供 最小重现,并上传到你的 GitHub 仓库
How To Reproduce
Under /node_modules/@umijs/plugins/dist/tailwindcss.js you can replicate the error by reducing CHECK_TIMEOUT_UNIT_SECOND value to lets say 1 second Expected behavior 1. 2. Should throw an error message on the console log
tailwindcss generate failed after 1 seconds, please check your tailwind.css and tailwind.config.js Done in 19.57s
Context
FIX I have increased the CHECK_TIMEOUT_UNIT_SECOND value from 5 seconds to 20 second inorder to give some buffer and wait to the generatedPath to be created. I have tested the fix and it is working well.
我已将 CHECK_TIMEOUT_UNIT_SECOND 值从 5 秒增加到 20 秒,以便提供一些缓冲并等待生成的路径创建。我已经测试了修复程序,效果很好。谢谢
Solved
- Umi Version:
- Node Version:
- Platform:
Nice @ngechu! I have been struggling with the same issue and thought I could fix it by switching between different branches, but this solution worked and saved me a ton of time.
Nice @ngechu! I have been struggling with the same issue and thought I could fix it by switching between different branches, but this solution worked and saved me a ton of time.
Welcome,I also struggled with the same issue and resulted to diving into the node modules when my last working branch stopped working.
How can I solve this problem.
module.exports = {
content: [
'./src/pages/**/*.tsx',
'./src/components/**/*.tsx',
'./src/layouts/**/*.tsx',
'./src/styles/**/*.css',
],
}
import { defineConfig } from "@umijs/max";
export default defineConfig({
ssr: {},
npmClient: "pnpm",
tailwindcss: {},
reactQuery: {},
routes: [
{ path: '/', redirect: '/kit/products' },
{ path: "/kit/products", component: "@/pages/kit/products" },
// { path: "/docs", component: "@/pages/docs" },
],
});
max dev
info - [你知道吗?] 如果想点击组件跳转至编辑器源码位置,可尝试新出的 clickToComponent 配置项,详见 https://umijs.org/docs/api/config#clicktocomponent
warn - SSR feature is in beta, may be unstable
Mako https://makojs.dev is a new fast Rust based bundler from us, which is heavily optimized for umi and much faster than webpack. Visit https://makojs.dev/docs/getting-started#bundle-with-umi for more details if you want to give it a try.
info - [plugin: ./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected]_daoykeix4hyj63bqvg6kbmzzbq/node_modules/@umijs/plugins/dist/react-query] [reactQuery] use local package, version: 4.36.1
info - Umi v4.3.11
info - Preparing...
wait - [SSR] Compiling...
warn - SSR feature is in beta, may be unstable
info - [MFSU][eager] worker init, takes 482ms
fatal - Error: ERROR in ./src/.umi/umi.server.ts 12:0-102
Module not found: Error: Can't resolve '/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/src/.umi/plugin-tailwindcss/tailwind.css' in '/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/src/.umi'
umi compiled with 1 error
at Watching.handler (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@umijs/bundler-webpack/dist/build.js:82:79)
at /home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:93594:9
at Hook.eval [as callAsync] (eval at create (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected]/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:7682), <anonymous>:24:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected]/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:4851)
at Watching._done (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:93590:28)
at onCompiled (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:93470:19)
at /home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:63704:17
at Hook.eval [as callAsync] (eval at create (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected]/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:7682), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected]/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:4851)
at /home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:63700:33
at finalCallback (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:59981:11)
at /home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:60286:11
at Hook.eval [as callAsync] (eval at create (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected]/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:7682), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected]/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:4851)
at /home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@umijs/bundler-webpack/compiled/webpack/index.js:60279:38
at eval (eval at create (/home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.pnpm/@[email protected]/node_modules/@umijs/bundler-utils/compiled/tapable/index.js:1:7682), <anonymous>:17:1)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
fatal - A complete log of this run can be found in:
fatal - /home/burak/Desktop/hotwire/rails-7-fullstack/umijs/node_modules/.cache/logger/umi.log
fatal - Consider reporting a GitHub issue on https://github.com/umijs/umi/issues
Hi @burakakca , I think there is a problem with the way you installed tailwind in your project.Use the micro-generator provided by Umi to enable Tailwindcss in your project: Delete all the tailwind files tailwind.css and tailwind.config.js and run npx umi g tailwindcss This will configure tailwind for your umi max project.https://umijs.org/en-US/blog/develop-blog-using-umi#%E5%AE%89%E8%A3%85-tailwindcss
I tried but still same problem.
@burakakca Try to delete the .umi folder and then retry, I think the previous configs have been cached since your error is in the umi folder fatal - Error: ERROR in ./src/.umi/ It will be regenerated when you run the app again, I recommend using yarn..Btw I cannot see a lock file in your project, have you installed dependencies? After the above steps , run yarn install and make sure a lock file is generated then run the project using yarn dev
I did those things but still nothing changed :/ my lock file is under package.json, vscode magic.
The problem is whenever I enable the ssr
okay, i have not yet interacted with umi in ssr mode , so I cannot be able to debug it, but I can see a warning that ssr is unstable maybe thats the reason.Try reaching out to the core team.
@ngechu thanks a lot, I will open a new issue.
Hi friend, how to change the config of CHECK_TIMEOUT_UNIT_SECOND. I got the same error with you. And I've search the docs, did not find the config. Thanks for you help.
Hi @tylerrrkd , inside your node modules, navigate to /node_modules/@umijs/plugins/dist/tailwindcss.js. That is where the code is located.
Hi @tylerrrkd , inside your node modules, navigate to /node_modules/@umijs/plugins/dist/tailwindcss.js. That is where the code is located.
@ngechu thank you friend. whoops, but I am using @umijs/max, and changing the node_modules seems not the best way, maybe I could only wait for the official fix or commit a pr.
Hi @tylerrrkd , inside your node modules, navigate to /node_modules/@umijs/plugins/dist/tailwindcss.js. That is where the code is located.
@ngechu thank you friend. whoops, but I am using
@umijs/max, and changing thenode_modulesseems not the best way, maybe I could only wait for the official fix or commit a pr.
Yeah @tylerrrkd , I posted this to help anyone who has been blocked by the error since it only occur in development. I will look into creating a pull request to fix the issue.Thanks friend
@ngechu Hi friend, I found my problem is that I set the node_modules path in the content of tailwind.config.js. And I upgrade the version of tailwindcss after @3.4.9, the problem resolved. You could try it though.
The same issue here
same issue
啥也没改,需要跑两次才能启起来
{ "name": "wisdomTeachingAdmin", "version": "6.0.0", "private": true, "description": "An out-of-box UI solution for enterprise applications", "scripts": { "dev": "npm run start:dev", "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev", "build": "max build", "analyze": "cross-env ANALYZE=1 max build", "deploy": "npm run build && npm run gh-pages", "gh-pages": "gh-pages -d dist", "postinstall": "max setup", "lint": "npm run lint:js && npm run lint:prettier && npm run tsc", "lint-staged": "lint-staged", "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ", "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src ", "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src", "lint:prettier": "prettier -c --write "/.{js,jsx,tsx,ts,less,md,json}" --end-of-line auto", "openapi": "max openapi", "prettier": "prettier -c --write "/.{js,jsx,tsx,ts,less,md,json}"", "preview": "npm run build && max preview --port 8000", "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login", "serve": "umi-serve", "start": "cross-env UMI_ENV=dev max dev", "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev", "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev", "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev", "tsc": "tsc --noEmit", "ga": "api-refs" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 10" ], "dependencies": { "@ant-design/icons": "^4.8.1", "@ant-design/pro-components": "^2.7.12", "@monaco-editor/react": "^4.6.0", "@umijs/route-utils": "^2.2.2", "@xyflow/react": "^12.3.6", "ahooks": "^3.8.0", "antd": "^5.22.1", "antd-img-crop": "^4.23.0", "antd-style": "^3.6.1", "axios": "^1.7.2", "blueimp-md5": "^2.19.0", "classnames": "^2.5.1", "lodash-es": "^4.17.21", "moment": "^2.30.1", "omit.js": "^2.0.2", "querystring": "^0.2.1", "rc-menu": "^9.12.4", "rc-util": "^5.38.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-helmet-async": "^1.3.0", "react-webcam": "^7.2.0", "spark-md5": "^3.0.2", "zustand": "^4.5.4" }, "devDependencies": { "@ant-design/pro-cli": "^3.3.0", "@testing-library/react": "^13.4.0", "@types/blueimp-md5": "^2.18.2", "@types/classnames": "^2.3.1", "@types/express": "^4.17.21", "@types/history": "^4.7.11", "@types/lodash-es": "^4.17.12", "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", "@types/react-helmet": "^6.1.11", "@types/spark-md5": "^3.0.5", "@typescript-eslint/parser": "^7.17.0", "@umijs/fabric": "^2.14.1", "@umijs/lint": "^4.1.1", "@umijs/max": "^4.1.1", "babel-plugin-transform-remove-console": "^6.9.4", "compression-webpack-plugin": "^11.1.0", "cross-env": "^7.0.3", "eslint": "^8.56.0", "eslint-import-resolver-typescript": "^3.6.1", "eslint-plugin-import": "^2.29.1", "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.35.0", "express": "^4.18.2", "gh-pages": "^3.2.3", "lint-staged": "^10.5.4", "prettier": "^2.8.8", "react-dev-inspector": "^1.9.0", "swagger-ui-dist": "^4.19.1", "tailwindcss": "^3.4.15", "ts-node": "^10.9.2", "typescript": "^5.3.3", "umi-presets-pro": "^2.0.3", "umi-serve": "^1.9.11", "web-storage-cache": "^1.1.1" }, "engines": { "node": ">=12.0.0" }, } umi/max中使用tailwind , 更新tailwind最新版本也没用,目前每次都要启动三次,才能启动成功
still no sulotion now? for temp solution I used sh script to retry
file dev.sh sh dev.sh
#!/bin/bash
MAX_RETRIES=5
RETRY_DELAY=2
retry_count=0
cleanup() {
rm -f output.log
exit
}
trap cleanup SIGINT
while [ $retry_count -le $MAX_RETRIES ]; do
echo "Attempt $((retry_count + 1)) of $((MAX_RETRIES + 1))..."
# Run command with real-time output and logging
yarn dev 2>&1 | tee output.log
exit_code=${PIPESTATUS[0]}
# Check results
if [ $exit_code -eq 0 ]; then
echo "Command succeeded!"
cleanup
else
if grep -q "tailwindcss generate failed after 5 seconds" output.log; then
echo "TailwindCSS timeout detected. Retrying in ${RETRY_DELAY}s..."
((retry_count++))
sleep $RETRY_DELAY
else
echo "Command failed with unexpected error. Last output:"
cat output.log
cleanup
fi
fi
done
echo "Max retries reached. Please check your Tailwind configuration."
cleanup
I have umi/max project, sometimes I was lucky to restart a few times successfully, but today I restarted countless times without success, and tried a lot of things, even upgraded to the latest V4.4.5 version, added the .dev file to set CHECK_TIMEOUT=10, but it still didn't work.Finally I downgrade version "@umijs/max": "4.1.10",one time startup success! 我的是umi/max项目,有的时候运气好能重启几次成功,但是今天重启无数次都不成功,也尝试过很多办法,甚至升级到最新的V4.4.5版本,添加了.dev文件设置了CHECK_TIMEOUT=10,但还是不生效。最后我降版本 "@umijs/max": "4.1.10",一次性启动成功了!
Although there is a solution available as shown below, I don't think it's a good solution. This issue should be properly fixed.
pnpm add -D rimraf
Modify the package.json file
"dev": "rimraf src/.umi && max dev",
我就是纯粹电脑慢而已,我的电脑确实无法5秒内启动。但是我看楼主也没说明白怎么改,我就补充下吧。
文件在 \node_modules@umijs\plugins\dist\tailwindcss.js 的 29行。
var import_fs = require("fs"); var import_path = require("path"); var import_plugin_utils = require("umi/plugin-utils"); var CHECK_INTERVAL = 300; var CHECK_TIMEOUT_UNIT_SECOND = 50;
我改成50就次次都成功了,但是这是单机的,换个电脑就又不行了。
查看了代码,没有任何位置可以从外部把这个数值改掉(没有可以用的传参方式)。
话说如果真有项目需要这么久怎么办呢。我觉得需要的大神pull 一个request把这个参数在var tailwindcss_exports = {};里面放给别人改。
我就是纯粹电脑慢而已,我的电脑确实无法5秒内启动。但是我看楼主也没说明白怎么改,我就补充下吧。 文件在 \node_modules@umijs\plugins\dist\tailwindcss.js 的 29行。
var import_fs = require("fs"); var import_path = require("path"); var import_plugin_utils = require("umi/plugin-utils"); var CHECK_INTERVAL = 300; var CHECK_TIMEOUT_UNIT_SECOND = 50;我改成50就次次都成功了,但是这是单机的,换个电脑就又不行了。 查看了代码,没有任何位置可以从外部把这个数值改掉(没有可以用的传参方式)。 话说如果真有项目需要这么久怎么办呢。我觉得需要的大神pull 一个request把这个参数在var tailwindcss_exports = {};里面放给别人改。
Yes, I wanted to create a pull request but do not know how to get to the specific tailwind css plugin code , that is the best, permanent solution.👌 是的,我想创建一个拉取请求,但不知道如何获取特定的 tailwind css 插件代码,这是最好的、永久的解决方案。👌
我就是纯粹电脑慢而已,我的电脑确实无法5秒内启动。但是我看楼主也没说明白怎么改,我就补充下吧。 文件在 \node_modules@umijs\plugins\dist\tailwindcss.js 的 29行。
var import_fs = require("fs"); var import_path = require("path"); var import_plugin_utils = require("umi/plugin-utils"); var CHECK_INTERVAL = 300; var CHECK_TIMEOUT_UNIT_SECOND = 50;我改成50就次次都成功了,但是这是单机的,换个电脑就又不行了。 查看了代码,没有任何位置可以从外部把这个数值改掉(没有可以用的传参方式)。 话说如果真有项目需要这么久怎么办呢。我觉得需要的大神pull 一个request把这个参数在var tailwindcss_exports = {};里面放给别人改。Yes, I wanted to create a pull request but do not know how to get to the specific tailwind css plugin code , that is the best, permanent solution.👌 是的,我想创建一个拉取请求,但不知道如何获取特定的 tailwind css 插件代码,这是最好的、永久的解决方案。👌
更新插件,然后.evn里面写CHECK_TIMEOUT就行了
我就是纯粹电脑慢而已,我的电脑确实无法5秒内启动。但是我看楼主也没说明白怎么改,我就补充下吧。 文件在 \node_modules@umijs\plugins\dist\tailwindcss.js 的 29行。
var import_fs = require("fs"); var import_path = require("path"); var import_plugin_utils = require("umi/plugin-utils"); var CHECK_INTERVAL = 300; var CHECK_TIMEOUT_UNIT_SECOND = 50;我改成50就次次都成功了,但是这是单机的,换个电脑就又不行了。 查看了代码,没有任何位置可以从外部把这个数值改掉(没有可以用的传参方式)。 话说如果真有项目需要这么久怎么办呢。我觉得需要的大神pull 一个request把这个参数在var tailwindcss_exports = {};里面放给别人改。Yes, I wanted to create a pull request but do not know how to get to the specific tailwind css plugin code , that is the best, permanent solution.👌 是的,我想创建一个拉取请求,但不知道如何获取特定的 tailwind css 插件代码,这是最好的、永久的解决方案。👌
更新插件,然后.evn里面写CHECK_TIMEOUT就行了
大佬,能发个具体更改教程吗?感谢,根据你步骤测试一下,包含需要修改的插件版本号
I have umi/max project, sometimes I was lucky to restart a few times successfully, but today I restarted countless times without success, and tried a lot of things, even upgraded to the latest V4.4.5 version, added the .dev file to set CHECK_TIMEOUT=10, but it still didn't work.Finally I downgrade version "@umijs/max": "4.1.10",one time startup success! 我的是umi/max项目,有的时候运气好能重启几次成功,但是今天重启无数次都不成功,也尝试过很多办法,甚至升级到最新的V4.4.5版本,添加了.dev文件设置了CHECK_TIMEOUT=10,但还是不生效。最后我降版本 "@umijs/max": "4.1.10",一次性启动成功了!
锁版本是最简单的解决方式
我就是纯粹电脑慢而已,我的电脑确实无法5秒内启动。但是我看楼主也没说明白怎么改,我就补充下吧。 文件在 \node_modules@umijs\plugins\dist\tailwindcss.js 的 29行。
var import_fs = require("fs"); var import_path = require("path"); var import_plugin_utils = require("umi/plugin-utils"); var CHECK_INTERVAL = 300; var CHECK_TIMEOUT_UNIT_SECOND = 50;我改成50就次次都成功了,但是这是单机的,换个电脑就又不行了。 查看了代码,没有任何位置可以从外部把这个数值改掉(没有可以用的传参方式)。 话说如果真有项目需要这么久怎么办呢。我觉得需要的大神pull 一个request把这个参数在var tailwindcss_exports = {};里面放给别人改。Yes, I wanted to create a pull request but do not know how to get to the specific tailwind css plugin code , that is the best, permanent solution.👌 是的,我想创建一个拉取请求,但不知道如何获取特定的 tailwind css 插件代码,这是最好的、永久的解决方案。👌
更新插件,然后.evn里面写CHECK_TIMEOUT就行了
有用!
我就是纯粹电脑慢而已,我的电脑确实无法5秒内启动。但是我看楼主也没说明白怎么改,我就补充下吧。 文件在 \node_modules@umijs\plugins\dist\tailwindcss.js 的 29行。
var import_fs = require("fs"); var import_path = require("path"); var import_plugin_utils = require("umi/plugin-utils"); var CHECK_INTERVAL = 300; var CHECK_TIMEOUT_UNIT_SECOND = 50;我改成50就次次都成功了,但是这是单机的,换个电脑就又不行了。 查看了代码,没有任何位置可以从外部把这个数值改掉(没有可以用的传参方式)。 话说如果真有项目需要这么久怎么办呢。我觉得需要的大神pull 一个request把这个参数在var tailwindcss_exports = {};里面放给别人改。Yes, I wanted to create a pull request but do not know how to get to the specific tailwind css plugin code , that is the best, permanent solution.👌 是的,我想创建一个拉取请求,但不知道如何获取特定的 tailwind css 插件代码,这是最好的、永久的解决方案。👌
更新插件,然后.evn里面写CHECK_TIMEOUT就行了
请问具体更新哪个插件?umi/max项目是找不到\node_modules@umijs\plugins\dist\tailwindcss.js这个文件。按照上面朋友的方案,固定max版本为4.1.10, 然后增加.dev或,env 内部写CHECK_TIMEOUT=50, 都不行,感谢大佬