Heroku Blank Screen on Deploy: React, and Ruby on Rails - javascript

I have a Heroku test environment with a Ruby on Rails backend and React front-end. Recently, I pushed out some changes to the test environment and am now getting a blank screen with one of two errors. Either:
<body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.d825ec61.js"></script></body>
or:
Uncaught TypeError: Cannot read properties of undefined (reading 'apply')
at redux.js:523:1
at o (redux.js:87:1)
at Object.<anonymous> (store.js:14:15)
at t (bootstrap 145a692a3e0162c12867:19:1)
at Object.<anonymous> (main.d825ec61.js:30447:65)
at t (bootstrap 145a692a3e0162c12867:19:1)
at Object.<anonymous> (main.d825ec61.js:29463:18)
at t (bootstrap 145a692a3e0162c12867:19:1)
at bootstrap 145a692a3e0162c12867:62:1
at bootstrap 145a692a3e0162c12867:62:1
depending upon who is trying to open the app.
Here is a link to the test site on Heroku: https://alutiiq-lang-test.herokuapp.com/ Please note that it is a free dyno, so takes a minute to load (if it loads for you!), and here is the repo I am working in https://github.com/migobach/alutiiqLang.
When I do roll back to a previous version, it works fine, but I cannot figure out what the difference is aside from on package that I added: "react-contenteditable": "^3.3.5", which I need for admin privileges.
My Heroku logs have no errors that should prevent rendering, and the build is successful, however, nothing renders.

The solution ended up being related to Redux. After purging all caches, and testing locally in an incognito window, I was able to see the error in greater detail which helped me ask better questions and lead me to this solution. After commenting out this line from my code:
window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()
I was able run locally with no issue, and then push to Heroku successfully.

Related

Unable to run Playwright with cucumber due to errors

Apologies if the errors are pretty simple. I'm trying my hand at a Playwright TS repo with cucumber js. I've worked with Playwright and Cucumber before, with JS, but not TS. So, it's my first foray with TS.
I'm trying to implement the POM that I've worked in the past with my other Playwright/Cucumber projects. However I've been hit with multiple errors - have tried a lot of hit and trial methods but each one turning into a dead end.
Error -
#Smoke
Scenario: User is able to login with valid credentials # features/login.feature:3
Given User is on the "Login" Page
User is on the Login Page
✖ failed
TypeError: Cannot read property 'visit_base_url' of undefined
at /Users/Rahul_Yadav/Documents/FE-Projects/play-cuke-ts/src/step-definitions/login.step.ts:16:24
at Generator.next (<anonymous>)
at fulfilled (/Users/Rahul_Yadav/Documents/FE-Projects/play-cuke-ts/src/step-definitions/login.step.ts:5:58)
at runNextTicks (node:internal/process/task_queues:61:5)
at processImmediate (node:internal/timers:437:9)
Here is the repo for issue reproduction purposes - https://github.com/zac11/play-cuke-ts
Can someone please help me in this issue? If there are issues with configuration, the please also mention what updates I should do.

VueJS / Apache Cordova application throwing errors inside of the chunk-vendor disptie VueJS application working fine

I have a VueJS project with a "fakeDB.js" file that drives the database via local storage (browser) during development. After testing this locally, everything is working and I can navigate to pages perfectly fine.
I'm now running npm run build to get the js/css files to place into a Cordova application for an Android application. After copying these files into the application and switching the VueJS application to use the SQLITE3 inside Cordova I experience issues.
My login pages work perfectly fine, I can view the dashboard with all the jobs inside it but if I click into a job it throws a white screen.
After hooking up adb debug, all I can see is an error in the chunk-vendor file that npm run build created which, AFAIK, contains the vendor packaging.
The error message I get is:
"TypeError: Cannot read property 'substr' of undefined", source: file:///android_asset/www/js/chunk-vendors.f024a0c1.js (7)
Of course, this file is obfuscated and minified so Line 7 is VueJS 2.6.12.
I have inherited this application with no previous experience so I'm taking an educated guess around "chunk-vendor" that I perhaps need to upgrade the depedencies surrounding this application to get past this issue but I'm unsure how I can debug this further inside of android studio.
How can I go about solving this issue? Is there a way to upgrade safely inside of npm?
Update: I have ran a npm update and I'm now on VueJS 2.7.10 but still getting the same issue

React Build Failing - how to troubleshoot

I have a React Frontend Project that works correctly with npm start - the frontend works as expected when I run it this way.
However, when I npm run build and then serve the file with express, the frontend fails. The frontend doesn't load in my browser and I see the error: Uncaught TypeError: l[e] is undefined on Firefox and Uncaught TypeError: Cannot read property 'call' of undefined on Chrome.
The stack trace associated with those errors isn't very helpful as it just directs to chunk.js. I need to somehow figure out what's causing this issue. My boss suggested someone else working on the project likely made a coding error and we'll have to clean up everything to debug (this setup was working a week ago). Is there anything I can do to debug this short of going through every line of code?
Thank you!

Uncaught Error: jQuery not found running Meteor 1.10.2 app

When I run my Meteor (version 1.10.2) app on firefox. the console prints:
Error: jQuery not found dombackend.js:8:8
module dombackend.js:8
fileEvaluate modules-runtime.js:346
require modules-runtime.js:248
require modules-runtime.js:268
<anonymous> blaze.js:3735
<anonymous> blaze.js:3754
TypeError: Package.blaze is undefined spacebars.js:22:13
<anonymous> http://localhost:3000/packages/spacebars.js?hash=6f2be25813c793c0b363a6a91ebb029723f294ec:22
<anonymous> http://localhost:3000/packages/spacebars.js?hash=6f2be25813c793c0b363a6a91ebb029723f294ec:331
I read other posts but it was not the same exact error (i.e. some map file) and not the same meteor version.
I am copying some code files over from old app that I want to run under the current meteor version.
Any suggestions on how to fix these errors?
Thanks
Edit to answer questions in the comment:
App originally ran under meteor 1.7.0.1.
App now is expected to run by meteor 1.10.2 installed by chocolatey on windows 10.
run this cmd meteor add jquery will be work
I am copying some code files over from old app
From my understanding, you are trying to upgrade meteor from 1.7.0.1 to 1.10.2
If this the case, I would argue coping source code is the right approach to the job. you miss all the package dependencies in the old setup.
I would suggest you keep the source code in the old package, just bumping up the meteor version, update dependent packages, try to run the app, then fix the broken changes if necessary.

Vue.js app not throwing errors to console from specific methods

I am currently developing 2 Vue apps. Both of them run from npm.
App1 wasn't created by me. I got involved in it when it was already a stable production app (so I may have missed some configuration).
App2 was created by me and I'm the only developer.
In both apps I use vue-router to change views and I found 2 different situations:
When I run both apps locally (with npm): App2 throws errors (to
console) from vue-router when I try to navigate to the same view
(Navigation Duplicated), but App1 doesn't.
When I run both apps on server (online): Both apps throw this error to
console.
I know what the error is about, but what I don't know is why App1 doesn't throw it. I already searched App1 for any error catching methods, which maybe were implemented to not throw the errors, but I didn't find any.
Because of difference between local/server functionality, I don't think it's a vue-router issue, but rather Vue itself, because there's also second issue with App1.
In App1 I use vee-validate and it throws errors regarding not available validation items (Validating a non-existent field: "result". Use "attach()" first.). The error can only be seen online (server), but not locally (npm) - for me it confirms it (as I didn't find any error catching methods regarding vee-validate).
Is there any setting in Vue, which could cause the errors not to be thrown to console?
Edit:
Reproduction of error: To reproduce and throw vue-router NavigationDuplicated error you should implement component in your Vue app and click it twice. The first click should navigate you to view, the second click should throw error in console.

Categories

Resources