This repository was archived by the owner on Jun 11, 2022. It is now read-only.
This repository was archived by the owner on Jun 11, 2022. It is now read-only.
Does this buildpack work with CRACO? #189
Description
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?