npm启动报tailwind.js 800A0404错误后续浏览器空白问题求助

初始Tailwind JScript编译报错根因及解决方案 #

该错误是Windows系统默认使用自带的JScript解释器执行tailwind.js文件导致，JScript不支持ES6+的对象尾逗号等语法，才触发第32行的语法报错。解决方案如下：

• 进入cp-frontend目录执行npm list tailwindcss，如果无对应版本输出，执行npm install tailwindcss --save-dev安装项目局部依赖
• 修改cp-frontend/package.json中的tailwind:css脚本为npx tailwindcss build src/tailwind.src.css -c tailwind.config.js -o src/tailwind.css，npx会优先调用项目局部的Tailwind程序，用Node.js执行配置文件，避免触发系统JScript解析
• 你将配置文件重命名为tailwind.config.js的操作符合Tailwind默认规则，无需回退

react.router找不到问题处理 #

你已经安装的react-router-dom、react-router-config两个包已经满足依赖要求，只需确认两个依赖已经写入cp-frontend/package.json的dependencies字段即可，依赖列表无顺序要求，不会再触发该类报错。

ESLint警告处理 #

所有提示均为代码规范类警告，不会导致项目运行失败，无需添加额外依赖，两种处理方案可选：

• 临时屏蔽：在对应报错行上方添加终端提示的忽略注释，比如useEffect依赖警告就添加// eslint-disable-next-line react-hooks/exhaustive-deps
• 永久修复：
  • 对于useEffect依赖警告，将提示的变量补充到useEffect的第二个参数依赖数组中
  • 对于未使用变量警告，删除对应的未使用导入语句
  • 对于iframe缺title、a标签缺rel、重复props等警告，补充/删除对应属性即可

浏览器空白页解决方案 #

• 先确认后端服务运行状态：访问http://localhost:3002确认接口可正常响应
• 打开浏览器调试工具的Network面板，刷新页面检查所有静态资源请求是否返回200状态，排查404、500类错误
• 切换到调试工具Console面板，排查是否有未捕获的JS运行错误，该类错误不会和ESLint警告一起输出到终端
• 检查路由配置：确认根路由/是否绑定了对应渲染组件，若使用BrowserRouter路由模式，确认开发服务器是否配置了所有请求 fallback 到index.html的规则

内容的提问来源于stack exchange，提问作者Michele