javascript - Tailwind CSS 不能用 React 和 Express 编译?

标签 javascript node.js reactjs express tailwind-css

我创建了一个使用 Create React App 引导的 Web 应用程序。此外,我还有一个小型 Express 服务器,充当前端使用的 API(此项目中没有数据库)。此外,我正在使用 TailwindCSS 进行样式设置。

我已经根据 this 的前 10 分钟配置了我的 Tailwind CSS教程。但是,为了添加 Express,我将我的 package.json 的脚本部分更改为如下所示:

...
"proxy": "http://localhost:4000",
  "scripts": {
    "build": "node ./buildScript",
    "start-server": "cross-env NODE_ENV=development nodemon server/server.js --watch server/*",
    "start-front": "npm run watch:css && react-scripts start",
    "build-front": "npm run build:css && react-scripts build",
    "eject": "react-scripts eject",
    "test": "react-scripts test",
    "start": "concurrently \"npm run start-server\" \"npm run start-front\" --kill-others",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

...

当我尝试使用 npm run start 运行项目时,我在终端中收到此错误:

[0] [nodemon] starting `node server/server.js server/data server/routes server/server.js`
[0] Server is running on: 4000
[1] TypeError: Object.entries(...).flatMap is not a function
[1]     at flattenColorPalette (/home/nikesh01/nps/node_modules/tailwindcss/lib/util/flattenColorPalette.js:8:83)
[1]     at /home/nikesh01/nps/node_modules/tailwindcss/lib/plugins/divideColor.js:27:53
[1]     at plugins.forEach.plugin (/home/nikesh01/nps/node_modules/tailwindcss/lib/util/processPlugins.js:69:5)
[1]     at Array.forEach (<anonymous>)
[1]     at _default (/home/nikesh01/nps/node_modules/tailwindcss/lib/util/processPlugins.js:63:11)
[1]     at /home/nikesh01/nps/node_modules/tailwindcss/lib/processTailwindFeatures.js:64:54
[1]     at LazyResult.runOnRoot (/home/nikesh01/nps/node_modules/postcss/lib/lazy-result.js:303:16)
[1]     at LazyResult.runAsync (/home/nikesh01/nps/node_modules/postcss/lib/lazy-result.js:355:26)
[1]     at LazyResult.async (/home/nikesh01/nps/node_modules/postcss/lib/lazy-result.js:205:30)
[1]     at LazyResult.then (/home/nikesh01/nps/node_modules/postcss/lib/lazy-result.js:190:17)
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! errno 1
[1] npm ERR! nps@0.1.0 watch:css: `postcss src/assets/tailwind.css -o src/assets/main.css`
[1] npm ERR! Exit status 1
[1] npm ERR! 
[1] npm ERR! Failed at the nps@0.1.0 watch:css script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1] 
[1] npm ERR! A complete log of this run can be found in:
[1] npm ERR!     /home/nikesh01/.npm/_logs/2020-12-16T01_20_37_979Z-debug.log
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! errno 1
[1] npm ERR! nps@0.1.0 start-front: `npm run watch:css && react-scripts start`
[1] npm ERR! Exit status 1
[1] npm ERR! 
npm ERR! Failed at the nps@0.1.0 start-front script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1] 
[1] npm ERR! A complete log of this run can be found in:
[1] npm ERR!     /home/nikesh01/.npm/_logs/2020-12-16T01_20_38_005Z-debug.log
[1] npm run start-front exited with code 1
--> Sending SIGTERM to other processes..
[0] npm run start-server exited with code SIGTERM
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nps@0.1.0 start: `concurrently "npm run start-server" "npm run start-front" --kill-others`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the nps@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

如您所见,服务器工作正常(正如预期的那样,因为后端没有 CSS),但前端出了点问题。我不太确定出了什么问题。我应该在 "start" 而不是 "start-front" 中运行它吗?对于解决此问题的任何帮助或建议,我将不胜感激。如果您需要更多详细信息,请告诉我。

最佳答案

确保您拥有最新稳定版本的 node.js。

关于javascript - Tailwind CSS 不能用 React 和 Express 编译?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65316025/

相关文章:

javascript - 搜索输入字段以搜索 JSON 数据

javascript - jQuery UI 切换焦点在多个模式对话框上?

javascript - http.get - 等待文件生成

javascript - 无法为 JWT 正确设置 Exp 和 Iat

javascript - 从 JQuery Widget 返回一个值

php - 自动保存 textarea 内容 javascript 和 php

javascript - 我需要未填充属性值的 Mongoose/mongoDb 搜索

reactjs - 我应该使用 forceUpdate() 还是寻找另一种方法来重新渲染 React 组件

javascript - 如何使用 React 创建 d3 力布局图

javascript - 将值插入辅助数组 javascript