Error with running ReactJS/TailwindCSS/Heroku: React Refresh runtime should not be included in the production bundle

Viewed 3745

Working on a webfolio in ReactJS using TailwindCSS. Deployed it to Heroku, builds successfully, but opening the App always gives the error: ERROR: React Refresh runtime should not be included in the production bundle.

Really not sure what I could've done wrong other than not configure tailwindcss to be deployable. I don't have any devdependencies, they're all dependencies.

package.json:

  "name": "webfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.0.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.15.1",
    "@fortawesome/free-regular-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.35",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "react-spring": "^8.0.27",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}
3 Answers

I had the same error right now, I know this post is few months old but still here is my solution :

Under heroku app> settings >Webpack

And on next push or deploying again will make it work. At least it did for me.

have you checked the package.json scripts, since it has been renamed to CRACO by tailwind.

"start": "node server.js"

Related