I have created a web application that was bootstrapped with Create React App. Additionally, I have a small Express server that is acting as an API that is consumed by the front end (no databases in this project). Also, I'm using TailwindCSS for styling.
I have configured my Tailwind CSS according to the first 10 minutes of this tutorial. But, to add Express, I've changed the scripts portion of my my package.json to look like this:
...
"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"
},
...
When I try to run the project with npm run start, I'm getting this error in the terminal:
[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.
As you can see, the server is working fine (as expected, because there's no CSS in the backend), but something is going wrong with the front end. I'm not really sure what's going wrong. Should I be running this in "start" and not "start-front"? I'd really appreciate any help or advice on resolving this issue. If there's any more details you need, please let me know.