Does this buildpack work with CRACO?

[DavidQuartz]

I recently added Tailwind and CRACO to my application and pushed to Heroku.

The problem I face now is this Heroku error:
Error injecting runtime env: bundle not found '/app/build/static/js/*.js'. See: https://github.com/mars/create-react-app-buildpack/blob/master/README.md#user-content-custom-bundle-location

I did not manually change the bundle location, but I suspect craco may be the cause of this error.

Here is my craco.config.js:

  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
};

And my package.json:

  "name": "nantoo-react",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "flow": "flow",
    "format": "prettier --write 'src/**/*.{js,jsx}'",
    "heroku-postbuild": "npm rebuild node-sass"
  },
  "dependencies": {
    "@craco/craco": "^6.1.2",
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.3.0",
    "autoprefixer": "^9.8.6",
    "axios": "^0.21.1",
    "body-scroll-lock": "^3.1.5",
    "bootstrap": "^4.5.2",
    "browser-image-compression": "^1.0.14",
    "cropperjs": "^1.5.9",
    "env-cmd": "^10.1.0",
    "eslint": "^7.27.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.23.2",
    "flow-bin": "^0.151.0",
    "jquery": "^3.5.1",
    "mobile-detect": "^1.4.5",
    "node-sass": "^4.14.1",
    "p-sleep": "^1.1.0",
    "postcss": "^7.0.35",
    "prettier": "^2.3.0",
    "prettier-eslint": "^12.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-facebook-login": "^4.1.1",
    "react-modal": "^3.12.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-slick": "^0.27.13",
    "react-tinder-card": "^1.3.1",
    "react-toastify": "^6.2.0",
    "react-tour-onboarding": "^1.15.63",
    "reactour": "^1.18.1",
    "slick-carousel": "^1.8.1",
    "socket.io-client": "^3.0.4",
    "styled-components": "^5.2.1",
    "tailwind-scrollbar-hide": "^1.0.3",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.4",
    "web-vitals": "^0.2.4"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "engines": {
    "node": "14.x",
    "npm": "7.x"
  },
  "devDependencies": {}
}

Here is the build log:

-----> Using buildpack: https://github.com/mars/create-react-app-buildpack
-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
       
-----> Creating runtime environment
       
       NPM_CONFIG_PRODUCTION=true
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=false
       
-----> Installing binaries
       engines.node (package.json):  14.x
       engines.npm (package.json):   7.x
       
       Resolving node version 14.x...
       Downloading and installing node 14.17.0...
       Bootstrapping npm 7.x (replacing 6.14.13)...
       npm 7.x installed
       
-----> Restoring cache
       Caching has been disabled because NODE_MODULES_CACHE=false
       
-----> Installing dependencies
       Installing node modules
       
       added 2200 packages, and audited 2201 packages in 4m
       
       13 packages are looking for funding
         run `npm fund` for details
       
       104 vulnerabilities (91 moderate, 13 high)
       
       To address issues that do not require attention, run:
         npm audit fix
       
       To address all issues possible (including breaking changes), run:
         npm audit fix --force
       
       Some issues need review, and may require choosing
       a different dependency.
       
       Run `npm audit` for details.
       
-----> Build
       Detected both "build" and "heroku-postbuild" scripts
       Running heroku-postbuild
       
       > [email protected] heroku-postbuild
       > npm rebuild node-sass
       
       rebuilt dependencies successfully
       
-----> Pruning devDependencies
       Skipping because NPM_CONFIG_PRODUCTION is 'true'
       
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git#v9.0.0
=====> Detected Framework: React.js (create-react-app)
       Writing `static.json` to support create-react-app
       Enabling runtime environment variables
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
=====> Detected Framework: Static HTML
-----> Installed nginx 1.19.0 to /app/bin
Using release configuration from last framework (Static HTML).
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 142.1M
-----> Launching...
       Released v143
       https://nantoo.herokuapp.com/ deployed to Heroku

The build was successful, however the application shows a 404 Not Found when I try to open it. So I checked the logs and found the aforementioned error.

I checked to make sure this buildpack is still installed.

Is it something I am missing?

[mars]

I'm unfamiliar with CRACO, but since it is a configuration override tool, it seems likely to lead to problems with this buildpack, which also does some configuration tricks.

This buildpack was created years ago, and is not being enhanced nor maintained anymore.

I would suggest removing this buildpack from your app, and then go forward setting up the Heroku Node buildpack, and the static site buildpack yourself, thereby eliminating the "magic" that is causing conflicts.