I have a Rails 6 app that was successfully deployed to Heroku and worked on localhost:3000.
I added tailwindcss via yarn and webpack. It runs perfectly fine on localhost, but does not run on heroku. When I run heroku logs I get the following error
I've read all the Heroku Rails 6 Webpacker issues, and tried all the suggestions. Nothing worked.
I have commented out <%= stylesheet_pack_tag %> ... didn't help
I have toggled extract_css: true in webpacker.yml file .... didn't help
I have run
heroku buildpacks:clear
heroku buildpacks:set heroku/nodejs
heroku buildpacks:add heroku/ruby
... didn't help
Does anyone have any idea what is going on?
My github repo is https://github.com/HundredBillion/enneagram
Stumbled across this post while stuck on a similar problem, hopefully this info will help someone in the future.
I solved my issue within the package.json file by moving the "tailwindcss" reference from the devDependencies to the dependencies block.
{
"name": "app_name",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.2.2",
"jquery": "^3.5.1",
"tailwindcss": "^1.2.0", // <--- Now here.
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
//<--- Was here.
"webpack-dev-server": "^3.10.3"
}
}
I had the same problem with you but I tried this one and it worked for me.
Inside of config/webpacker.yml, you must set extract_css: true default is false.
I had a different error where after updating/fiddling with tailwind my create-react-app wouldn't deploy (highly likely something it did).
my buildpack was node.js. changed per https://github.com/mars/create-react-app-buildpack#user-content-troubleshooting
Confirm that your app is using this buildpack:
heroku buildpacks
If it's not using create-react-app-buildpack, then set it:
heroku buildpacks:set mars/create-react-app
…and deploy with the new buildpack:
git commit --allow-empty -m 'Switch to create-react-app-buildpack'
git push heroku master
I have a few suggestions for you, let me know which one (if any) work for you.
In webpacker.yml for all instances of the below options
check_yarn_integrity: false
compile: true
Try
./bin/setup
rails webpacker:clobber
rails webpacker:compile
If none of the above work then perhaps one of these links will help:
https://github.com/tailwindcss/discuss/issues/4#issuecomment-341918136
https://github.com/rails/tailwindcss-rails
Related
Upon running yarn prod inside a Laravel Breeze project with Vue3 and InertiaJS, this console error is thrown:
Cannot read properties of undefined (reading '$page')
I am unable to find anything anywhere else that will fix my issue, I first thought it was a <script setup> issue with Vue3, and tried the solution found in this issue which ended up not working for me, which makes me believe it's an Inertia issue potentially.
We have another project running Breeze, Vue3 and Inertia currently in production working perfectly fine which is only confusing myself even more.
Dependencies as below
"laravel/framework": "^9.11",
"php": "^8.0.2",
"inertiajs/inertia-laravel": "^0.5.4",
"vue-loader": "^17.0.0"
"vue": "^3.2.31",
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue3": "^0.6.0",
Any help will be greatly appreciated.
Thanks
My app runs perfectly in the browser but will not open on Heroku. The build succeeds. When I check the logs tail it says "code: 'MODULE_NOT_FOUND', requireStack: [: '/app/server/node_modules/readable-stream/lib/_stream_readable.js',]
However, in my package.json I have
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#stripe/stripe-js": "^1.29.0",
"are-we-there-yet": "^3.0.0",
"readable-stream": "^3.6.0",
"streams": "^0.0.7"
}
I have also tried removing node_modules and package-lock and reinstalling multiple times. The same application error persists on Heroku. Please help if you can!
My full code repo is here.
This is the logs message
I created a fresh gatsby site by using the command npm init gatsby on a M1 Mac. I kept all options to default in the wizard and started by npm run develop. I immediately get this error on every refresh:
Although it's annoying the site is working fine. The error doesn't give much information and I couldn't find anyhting on google. My node version is v17.2.0 and this is the auto generated package.json:
{
"name": "my-gatsby-site",
"version": "1.0.0",
"private": true,
"description": "My Gatsby Site",
"keywords": [
"gatsby"
],
"scripts": {
"develop": "gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean"
},
"dependencies": {
"gatsby": "^4.3.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
}
}
EDIT:
I'm using Firefox.
There's a lack of details despite being a starter command (browser, browser version, etc). I'd try to follow one of the suggestions of this GitHub thread:
If you are registering a service worker, try commenting/removing it
If not, play around with the browser cookies (allowing or disallowing):
Allowing the localhost:8000 cookies.
In the same way, using the opposite cookie approach, you can disable the "Delete cookies and site data when Firefox Developer Edition is closed" option.
This solved the problem, no error anymore:
I worked around the issue by disabling the "Delete cookies and site
data when Firefox Developer Edition is closed" option
Source: https://github.com/gatsbyjs/gatsby/issues/16076#issuecomment-536152468
When I enter my URL for my Vue.js application (https://harrishealthtest.herokuapp.com/), the browser takes me to the homepage. Good. However, when I click on the 'Start' button, that's supposed to take me to '/test', I get this message 'Cannot GET /test'.
What am I doing wrong? I have history mode enabled in my routing. I'm not sure if that is causing issues. Or if it's something to do with the connectivity between my Vue.js app and my Laravel REST API. Both are on separate domains. When I click on 'Start', the app is supposed to take me to '/test', and that's where the data from the API is received.
This is what I currently have in my App.vue file:
mounted() {
fetch('https://pure-mountain-87762.herokuapp.com/', {
method: 'get'
})
.then((response) => {
return response.json()
})
// 'jsonData' refers to the json parsed response
.then((jsonData) => {
this.testData = jsonData.data
})
What kind of issue am I having here? Routing? API connectivity? Or something else?
It seems heroku is pointing to the server instead of the client. I had the same error a few weeks back. Two things:
If you are running two npm commands, resume them in the json file that heroku is pointing at. This is an example:
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild":
"NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
Add that heroku-postbuild line.
You have to play with the commands in your dev environment, in your computer. Make sure it works in your computer, then push up.
Secondly and this is kinda hacky, however it works for me.
Got to Settings of your app in Heroku, click on Reveal Config Vars button and add this env variable:
DANGEROUSLY_DISABLE_HOST_CHECK=true
This helped me. Hope it helps you.
Is was wondering if its possible to deploy a React Native app to Heroku? The reason I ask is because then I can retrieve the url and place it in an iframe to mimic an iPhone where the user can then tryout the app without actually having to install it on to the iPhone via iTunes.
This is possible using react-native-web (sources).
There are few things that you have to do to set this up on heroku:
in the settings tab of your your heroku app dashboard
set the buildpack as heroku/nodejs,
in package.json set the build script to build your web version from RN sources, for example, if you are using expo: expo build:web,
create a Procfile in the root directory to serve the web
version: for example, if you used expo, the build directory is web-build and therfore the command should be npx serve web-build,
Additionally, if you use expo, make sure to add the expo-cli as a dev dependency: npm install -D expo-cli.
You will then simply need to push to heroku the usual way. By default, heroku will run yarn build (or npm run build depending on wether you used one or the other to generate your lock file).
In the end, here is what the package.json file might look like (using expo again):
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest --watchAll",
"build": "expo build:web"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/vector-icons": "^12.0.0",
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/bottom-tabs": "^5.11.1",
"#react-navigation/native": "^5.8.9",
"#react-navigation/stack": "^5.12.6",
"expo": "~40.0.0",
"expo-asset": "~8.2.1",
"expo-constants": "~9.3.0",
"expo-font": "~8.4.0",
"expo-linking": "~2.0.0",
"expo-splash-screen": "~0.8.0",
"expo-status-bar": "~1.0.3",
"expo-web-browser": "~8.6.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"expo-cli": "^4.0.16",
"#babel/core": "~7.9.0",
"#types/react": "~16.9.35",
"#types/react-native": "~0.63.2",
"jest-expo": "~40.0.0",
"typescript": "~4.0.0"
},
"private": true
}
And the Procfile simply consists of a single line:
web: npx serve web-build
You could probably achieve similar results using reactxp instead of reac-native-web, but I never tried it myself.
Client side routing
Configuring Heroku for client side routing
If you use client side routing (react navigation for example), you will have to setup a few more things to make sure linking works. With the previous build alone, client side routing will fail (404 errors) because heroku will try to route requests on its own, but your app needs everything to end up at index.html so it can perform routing tasks on its own (client side routing).
We will thus prevent any Heroku routing by adding a second buildpack heroku-community/static next to heroku/nodejs. This second buildpack is configured via a /static.json file (default values):
{
"root": "web-build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
Configuring webpack for client side routing
You probably already have this part setup because otherwise you would have 404 errors even locally. To allow client side routing it seems like we also need to configure webpack (output.publicPath and devServer.historyApiFallback), with expo this can be done by running expo customize:web and then editing /webpack.config.js with:
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
config.output.publicPath = '/';
config.devServer = {
...config.devServer,
historyApiFallback: true,
};
return config;
};
There is a nice article about these routing issues you might have here: Fixing the 'cannot GET /URL'
Steps for deploying React native/expo app to heroku:
1:
set heroku buildpack as static: >heroku buildpacks:set heroku-community/static
2:
Add static.json for static buildtype:
{
"root": "web-build/",
"routes": {
"/**": "index.html"
}
}
More settings here: https://github.com/heroku/heroku-buildpack-static#configuration
3:
npm run build (package.json: "build": "expo build:web") --> Creates web-build folder
git add .
git commit
git push heroku master
heroku open