Troubleshooting a Blank Screen Issue when Deploying React and Ruby on Rails on Heroku

My Heroku test environment features a Ruby on Rails backend and React frontend combination. After pushing out some changes, the test environment is now displaying either a blank screen with a JavaScript error message or another error related to certain properties being undefined. The issue seems to occur depending on who is trying to access the app.

Here is the link to the test site on Heroku: . Please keep in mind that it might take a minute to load due to the use of a free dyno. Additionally, here is the repository where I am working: https://github.com/migobach/alutiiqLang. Upon reverting back to a previous version, the app works perfectly fine. The only noticeable difference is a package I added: 
"react-contenteditable": "^3.3.5"
, which is essential for admin privileges. Despite my Heroku logs showing no errors that could impact rendering and successful build processes, nothing is being rendered on the app interface.
javascriptruby-on-railsrubyheroku

Answer №1

Through some troubleshooting, I discovered that the issue was related to Redux. By clearing all caches and testing in an incognito window, I was able to pinpoint the error with more clarity. This enabled me to ask better questions and ultimately led me to find a solution on Stack Overflow. Once I removed the following line from my code:

window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()

I ran into no issues locally and successfully deployed to Heroku.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Checking for undefined values in fields within an array of objects using scenarios in JavaScript

I am encountering an issue with checking for undefined and empty strings in an object array using Javascript. The code provided is partly functional, but I have hit a roadblock. Within the array object, If the field value is undefined or empty, it should ...

javascriptarraysloopsobject

When I click the back button on my mouse in React, it returns JSON data instead of HTML and CSS

I am working on a web application with two pages: a menu and orders. When I navigate from the orders page to the menu page and click the back button, I receive JSON data instead of the HTML page. The data loads correctly, but the page does not display the ...

javascriptreactjsreact-router

Filtering a string that contains commas using another string that also contains commas

I need help with removing elements from one comma-separated string based on another. String 1: 6,2 String 2: 1,2,4,5,6,7,9,12,13 Is there a function or method that can accomplish this task for me? ...

javascriptnode.js

React Component that closes when it loses focus

In my React project, I am working on creating a custom select2 style component. Most of the functionality is complete, but I am struggling with figuring out how to hide the result box when the user clicks away. Here is the render method: render() { l ...

javascriptreactjsreact-redux

What is the best way to view and use the data stored within this JSON object?

Obtaining information from a straightforward API (). I retrieve the data using getJSON: var police = $.getJSON(queryurl); A console.log on police displays this: However, I am unable to access the properties within the object. I assumed that I could ac ...

javascriptjson

difficulty encountered when attempting to input multiple values into a single text field

There are four boxes containing values. When clicking on a box, the value should appear in a text field separated by commas if multiple boxes are selected. <li><a href="javascript:void(0)" onclick="check_stalls('A-14')" id="A-14">A-1 ...

javascriptajax

Toggle the visibility of an element by clicking a button

I have a table structured as follows: <tr> <td class="title">Title</td> <td class="body">Body</td> <td class="any">Any text</td> </tr> <tr> <td class="title">Title</td> ...

javascriptjquerycsshtml-table

Using Javascript to dynamically add form fields based on the selection made in a combo box

I am in the process of creating an information submission page for a website, where various fields will need to be dynamically generated based on the selection made in a combo box. For example, if the user selects "2" from the combo box, then two addition ...

phpjavascripthtmlvalidation

Retrieving the path parameter in a Next.js APIabstractmethod

I need assistance with extracting information from the file routes/api/[slug]/[uid].ts Specifically, I am looking to retrieve the slug and uid within my handler function. Can anyone provide guidance on how to achieve this? ...

javascriptreactjsnext.js

Instead of sending a post request, sending an options request after the ajax request is made

Currently, I am initiating a post ajax request: var responsehttpreq = {} function createAndSendXmlHttpReq(){ requestBody = { hostname: "prova", pathname: "prova", query: "prova", method: "prova" } console.log("F ...

javascriptnode.jsajax

Angular 2: Enhancing Tables

I am looking to create a custom table using Angular 2. Here is the desired layout of the table: I have a Component that provides me with data export class ResultsComponent implements OnInit { public items: any; ngOnInit() { this.items = [&apos ...

javascripthtmlcssangulartypescript

Utilizing external JavaScript libraries in Typescript for integration with nodeJS

We've recently made the switch to using Typescript + Electron for developing a browser-based desktop application. However, we often encounter delays when loading external Javascript libraries. While typings helps with most of our needs, there are stil ...

javascriptnode.jstypescripttsc

Adjust background image size to fit the screen, not just the content

Whenever I set the background image for each page using the following JavaScript code, var imageUrl = 'url(' + imageUrl + ') top left no-repeat fixed'; $('body').css({ 'background': imageUrl }); I also add ...

javascriptjqueryhtmlcssmobile

Obtain access to global.window.localStorage within getServerSideProps

I have a component that receives props with data and renders the data. In my functionality within the getServerSideProps, I am attempting to retrieve data from localStorage. However, due to window being undefined, I am unable to do so. I have tried using ...

javascriptnode.jsreactjsnext.js

Select a file and upload an image promptly after it is chosen

Is there a way to automatically upload an image once a user selects a file in their browser? Similar to how it works on Facebook, where users can choose a file for their cover or profile image and then the upload process begins. Currently, all I have is ...

javascriptphpjqueryajaximage-uploading

A variable named "quid" has been set with a value of "x" in the session scope

I am trying to figure out how to set a parameter x in JSTL for a function I have, but when I input values as "x" it returns as a string. JS: function updateValue(x) { <q:set var="quid" value="x" scope="session"/> } HTML ...

javascriptjavaspringhibernatejstl

Alert: A notification when navigating away from your site

Is there a way to notify users when they click on an external link that they are leaving your site? <div class="row"> <div class="col-lg-12"> <div class="form-group"> *If you need information on other applicable forms, you ...

javascriptjqueryhtml

Guide on accessing values from an array of objects in JavaScript/Node.js

I am working with an array of objects that looks like this: const objArray = [{prop: "a", prop2 : "1"}, {prop: "b", prop2 : "2"}, {prop: "c"}, prop2 : "3"] My goal is to extract the property names of the objects in the array, rather than their values. D ...

javascriptnode.js

Switching from an AJAX GET request to a POST request involves updating the

I have been trying to figure out how to convert my AJAX GET query to POST by reading forums and searching on Google, but I am still confused. If someone could assist me with this, it would be greatly appreciated. Thank you! Here is the code snippet I am w ...

javascriptajax

keep jquery scrolltop position consistent after receiving response

I created a code to show the chat history, and everything seems to be working fine. However, I encountered an issue where old posts are displayed all at once when scrolling up the div. In order to continue scrolling smoothly, I included this code $("#messa ...

javascriptjqueryajax