Search code examples
reactjstailwind-csscraco

Error while building React App on Ubuntu 20.04.3 LTS using Craco


When I am trying to deploy my React App (built with npx create-react-app ./) on Ubuntu 20.04.3 LTS I get the following error:

(node:3373) UnhandledPromiseRejectionWarning: /root/code/rsi-divergence-bot-frontend/node_modules/tailwindcss/node_modules/color/index.js:257
                        lum[i] = (chan <= 0.039_28) ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
                                          ^^^^^

SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/root/code/rsi-divergence-bot-frontend/node_modules/tailwindcss/lib/util/pluginUtils.js:25:37)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
(node:3373) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:3373) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I need to specify that on my Windows 10 Build 19042 machine it works without any issues.

NPM version: 6.14.4
Node version: v10.19.0

package.json:

{
  "name": "--------------------",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.2",
    "@testing-library/jest-dom": "^5.15.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.24.0",
    "chart.js": "^3.6.1",
    "chartjs-chart-financial": "^0.1.1",
    "framer-motion": "^5.5.5",
    "moment": "^2.29.1",
    "ms": "^2.1.3",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.0",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^9.8.8",
    "postcss": "^7.0.39",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  }
}

Also, I am using Tailwind CSS (2.2.17), and the command I use to build the project on the Ubuntu machine is npm run build.

I tried downgrading the color package to 3.2.1 but without success.


Solution

  • I got it to work by installing NVM, then installing Node v12.5.0 by running the following command nvm install 12.5. Then I ran nvm use 12.5 to use that Node version.

    Apparently, Tailwind CSS requires Node.js v12.13 or later but apt install npm installs v10.19.0.