Deployment error on Vercel on NextJS - React App - javascript

I am deploying my nextJS react app on Vercel and getting this error.
Error occurred prerendering page "/500". Read more:
https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'useMemo')
at exports.useMemo (/vercel/path0/node_modules/react/cjs/react.production.min.js:25:208)
at Provider (/vercel/path0/node_modules/react-redux/lib/components/Provider.js:24:43)
Full error is too long so I am uploading it on imgur so colors don't disappear: imgur
I have ran npm run build and npm start and site works fine locally. But when I upload it on vercel, this error popups.
I also haven't used useMemo anywhere in code either.
I don't know which code snippet to upload regarding this error, so will edit the question with any code snippet asked to provide.

Related

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

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.

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!

Error in console shows error in main.js on not specific file where it occurs

I am working on a React project and I am trying to debug certain features. I've noticed when I get an error and I inspect it in Chrome DevTools, it only shows error in main.js:82145. As you can see this is the js file for the entire project (error occurs on line 82145). This is quite difficult to debug. When you normally run a React project and an error occurs, it tells you in which file specifically it occurs. For instance AddUser.js:52. My question is what the reason will be why my current project doesn't show the exact file? The project uses Grunt and the only thing I can think of is that it compiles to a main.js file and doesn't "know" about the rest of the files but only the main.js.
Here is a screenshot of my current error:

Getting an error when running react native app

I am encountering an issue when try to run my app on my local machine. When I run react-native run-android I am confronted with this error and I am not sure what I can do. I have made sure that I have full access rights to all files etc but nothing seems to work. This error stops me from loading my app onto my AVD:
Please help me!
Did you follow the Android setup instructions from React Native? Have you tried to delete the directory in the error message? Try those first and try again 🤓

DOMException error creating AudioWorlet with Webpack

I got an error when trying to create an AudioWorklet, but only when the project is served through webpack-dev-serve. If I serve the files directly with an http server, everything works fine. So I think it must be something related with Webpack configuration.
This is the error I get:
audio-meter.js:19 Uncaught (in promise) DOMException: Failed to construct 'AudioWorkletNode': AudioWorkletNode cannot be created: The node name 'audio-meter' is not defined in AudioWorkletGlobalScope.
at new AudioMeterNode (http://localhost:9999/bundle.js:9421:17)
at Function.create (http://localhost:9999/bundle.js:9430:16)
I've been searching and there are some related questions, but none of them helped me to solve the problem. One of them points to a Chromium bug, but in this case the error only happens when the project is served through Webpack (I'm using worker-loader plugin):
AudioWorklet DOMException error when loading modules
AudioWorklet error: DOMException: The user aborted a request
Use AudioWorklet within electron (DOMException: The user aborted a request)
I've set up here a branch with the most simplified version of the project I've could, there are some files involved so I think you could see it better this way. To get it, please: git clone git#bitbucket.org:alvaro_maceda/notoono.git and git checkout stackoverflow.
If you run it with npm start it will use Webpack and, when you press the "start" button, you will see the error on the console. If you comment audio-meter.js:11 and uncomment audio-meter.js:11 and index.html:14 you can run it with npm start http and everything will go fine.
Could anybody give an idea about what to search or where the error could be?

Categories

Resources