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

JavaScript issue: "Error: Uncaught (in promise) SyntaxError: Unexpected end of input"

Encountering the following error message: Uncaught (in promise) SyntaxError: Unexpected end of input when attempting to post references to my specific express server. Can anyone here offer assistance? function create() { event.preventDefault() fi ...

javascriptexpresspost

Setting the default tab in easyTabs to be all-powerful

My ajax content is being loaded into a div-container through various navigation links, and I am using the script below to establish the defaultTab: $(document).ready( function() { $("#tab-container").easytabs({updateHash: true, defaultTab: "li:eq(3)"}); ...

javascriptjquerynavigationjquery-ui-tabs

Two distinct controllers: concealing elements through the operation of one of them

I am facing a challenge with my HTML elements: In one form-group, I have the following input: <div class="form-group"> <input type="search" ng-model="search"/> </div> This particular form-group needs to be hidden when another form-g ...

javascriptangularjs

Eliminate duplicated partial objects within a nested array of objects in TypeScript/JavaScript

I'm dealing with a nested array of objects structured like this: const nestedArray = [ [{ id: 1 }, { id: 2 }, { id: 3 }], [{ id: 1 }, { id: 2 }], [{ id: 4 }, { id: 5 }, { id: 6 }], ] In the case where objects with id 1 and 2 are already grou ...

javascriptarraystypescriptmultidimensional-array

Error in Function Due to Undefined jQuery DataTable Parameters

In the jQuery datatable column, the below JavaScript code will display either a green checkmark button or a red X button: { data: "HasPayment", render: function (data, type, row, meta) { if (data) { return '<bu ...

javascriptjqueryajaxdatatables

Expand the capabilities of a jQuery plugin by incorporating new functions or modifying existing ones

I have a task to enhance the functionality of a jQuery Plugin (https://github.com/idiot/unslider) by adding another public method. (function(){ // Store a reference to the original remove method. var originalMethod = $.fn.unslider; // Define a ...

javascriptjquerypluginsextendunslider

Incorporating dynamic images into Laravel using Angular

I am currently trying to dynamically input the src value of an image using Angular. Below is the code I have written : HTML : <div ng-app="myApp" ng-controller="MyCtrl"> <img src="{{asset('assets/img/'.'/'. @{{ item.name ...

javascriptphpangularjslaravel

Turn off bodyparser when uploading files in Node.js

This query is quite similar to another one on Stack Overflow regarding how to disable Express BodyParser for file uploads in Node.js. The solution provided there was for Express3, but when tested with the updated Express 4, it didn't work as expected. ...

javascriptnode.jsexpressroutesbody-parser

Is it possible to enable sorting for every column in the b-table component?

After reviewing the information on sorting per column in the bootstrap-vue documentation, I am curious if it is possible to enable sorting for the entire table. ...

javascriptvue.jsvuejs2vue-componentbootstrap-vue

Is there a way for me to generate a tab that shows content when hovered over?

Is it possible to create a tab that displays a vertical list of redirections when the mouse hovers over it, and hides when the mouse is moved away? This seems like a challenging task. Can someone guide me on how to achieve this, especially if it involves ...

c#javascripthtmlcss

Utilize a Vue.js filter on the v-model within an input element

Seeking assistance! I successfully created a directive that wraps the Jasny Bootstrap Plugin, specifically focusing on the input mask feature! Additionally, I have developed a custom filter using moment to format date fields! The date format received fro ...

javascriptjquerydatemomentjsvue.js

When using nodejs with sqlite3, the first callback parameter returns the class instance. How can this be resolved in order to prevent any issues?

Exploring a TypeScript class: class Log { public id: number; public text: string; construct(text: string){ this.text = text; } save(){ db.run( `insert into logs(text) values (?) `, this.text, ...

javascriptnode.jstypescriptsqliteelectron

Help needed with parsing nested JSON using the $.each function

Here is a JSON response sample that needs to be parsed in a more generic manner, rather than using transactionList.transaction[0]. "rateType": interestonly, "relationshipId": consumer, "sourceCode": null, "subType": null, "transactionList": { "transac ...

javascriptjqueryjson

Utilizing Jquery Autocomplete with multiple arrays for data sourcing

I am facing a challenge where I want to display both doctors and their connections in an autocomplete search using jQuery. Although I have successfully displayed the doctors, I'm struggling to categorize and display data from both arrays separately un ...

javascriptarraysjsonjquery-uiautocomplete

Experiencing issues with references while trying to import tone.js

I am facing an issue with my express.js server setup on my Mac. I am trying to incorporate Tone.js, which can be found at , following the provided instructions. npm install tone To integrate Tone.js successfully: import * as Tone from 'tone' Ho ...

javascriptexpressnpmnpm-installtonejs

Ensuring a DIV remains fixed in place for a specific number of scrolls

I'm looking to create a 'Page section' that remains in place while scrolling for a specific distance and then smoothly transitions to the next section. I've attempted to implement this within the child theme without success... Any sugge ...

javascriptjqueryhtmlcsswordpress

Looking to implement pyperclip functionality on Heroku platform

Is it feasible to utilize pyperclip on Heroku with a Selenium application in order to copy something to the clipboard? Since the platform utilizes a 'headless' browser and lacks a GUI, accessing the clipboard is challenging. Is there any way for ...

javascriptpythonseleniumherokupyperclip

What is the reason behind the failure of the cancel test?

I've created two test cases; one for testing the functionality of the Download button and the other for the Cancel button. However, I am encountering issues with the Cancel test failing consistently. Below is the code snippet where I'm attemptin ...

javascriptnode.jsreactjstestingjestjs

Sending multiple unique forms with the same structure using JavaScript and Ajax on a single PHP page

In my PHP page, there are 12 individual forms with unique form IDs, checkboxes, and dropdowns. Take a look at this image: https://i.stack.imgur.com/pODzk.png Each form has an Update Zone that fetches Name, Enable status, Time, Dim information, and sends ...

javascriptphpjqueryhtmlajax

When attempting to add or store data in MongoDB, it triggers a 500 server error

Greetings, I am currently working on developing a CRUD app using the MEAN stack. The Express application loads successfully and retrieves the "contactlist" collection from the database. However, when attempting to make a POST request to "/api/contacts", an ...

javascriptnode.jsmongodbexpressmongoose