I'm running build for a react app and using the index.html file path on my node server. Everything is working fine but on routes where I am using slugs are giving errors:
path is like: /blog/:id
/blog is working as it should but
/blog/someID is throwing this error in console and browser just gives a white screen.
Things are working fine in my react app locally. I believe it is an issue with the build process.
I have not seen this error before. I've used this process multiple times and it works fine but this time it is throwing some error. Can someone guide me why it is throwing this error?
Thank you.
Related
We have an install of Node.js running on a Windows Server 2012R2 web server. A developer created an application for us using Next/React/Node (I'm not a web developer so I'm unsure of the specifics of the various development tools used). This app works fine when manually started on the command line like this:
C:\NodeApps\pacifield>"C:\PROGRAM FILES\NODEJS\NODE.EXE" C:\NodeApps\pacifield\node_modules\next\dist\bin\next start
However this requires someone to manually login and restart the app whenever the server is rebooted or the app stops for whatever reason. I am trying to setup PM2 to run the app. I have it up and running fine until you browse to the app - at which point you get the following error:
next-server.ts:306 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (c:\NodeApps\pacifield\node_modules\react\cjs\react.development.js:1476:13)
at useContext (c:\NodeApps\pacifield\node_modules\react\cjs\react.development.js:1484:20)
at useSession (c:\NodeApps\pacifield\node_modules\next-auth\dist\client\index.js:75:39)
at Provider (c:\NodeApps\pacifield\node_modules\next-auth\dist\client\index.js:588:12)
at processChild (C:\NodeApps\pacifield\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14)
at resolve (C:\NodeApps\pacifield\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (C:\NodeApps\pacifield\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (C:\NodeApps\pacifield\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
at Object.renderToString (C:\NodeApps\pacifield\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
at Object.renderPage (C:\NodeApps\pacifield\node_modules\next\dist\server\render.js:596:45)
I have checked and there is only the one installation of React in C:\NodeApps\pacifield\node_modules\react and the other suggestions don't seem to make sense when it runs fine outside of PM2. I have checked with ProcessExplorer that all the environment variables are the same (except for the additional ones PM2 adds) when the app is run from the command line vs. PM2.
Anyone have any suggestions?
Hooks can only be call inside of functional component or inside another hook.
take note: Invalid Hook Call Warning
Notify your frontend developer it.
I try to run the same react app on different URLs but for now without success.
Description of the problem:
I have a react app that works perfectly fine when running both on localhost and on production url when served as a root (e.g www.myApp.com)
however what I'm trying to achieve is to have the same app run both on www.myApp.com and on www.anotherSite.com/myApp
What I've tried:
So I took a look at the Deployment section that can be found here:
https://create-react-app.dev/docs/deployment/
and I tried setting the homepage to "." but this ends in a situation where:
www.myApp.com works as expected which is good
www.anotherSite.com/myApp does not work at all -> white page with error showing
I think it's the same problem that this guy has:
https://github.com/facebook/create-react-app/issues/9183
www.anotherSite.com/myApp/ (notice the / at the end) works but the paths are not working (I get redirected to my 404 Page).
I played arround with different combinations of the homepage, setting the basename for the Router and setting the <base href="%PUBLIC_URL%/"/> in index.html
but nothing really works for both cases.
I was able to run the app on www.anotherSite.com/myApp by setting homepage: "/myApp/" but then www.myApp.com does not work.
Any idea what I'm doing wrong?
I am deploying a meteor application to a digital ocean droplet with meteor upload. Everything goes well, the application gets deployed, database works, seeding of data works etc. But there is one problem i can't seem to be able to solve.
I use the meteor-uploads package (https://github.com/tomitrescak/meteor-uploads) for file uploads. Locally everything goes well, the file gets uploaded, finished callback gets called etc. But once I have deployed the application to the server it keeps giving me on of these errors, :
POST http://*ip*/upload net::ERR_CONNECTION_REFUSED
POST http://*ip*/upload net::ERR_EMPTY_RESPONSE
POST http://*ip*/upload net::ERR_CONNECTION_RESET
Any ideas are welcome, I have searched all over for a solution but none seems to fit my problem. I also installed to a fresh droplet but that didn't help. In none of my browsers (Mac Chrome, safari & firefox) does it work, on my phone (Android 5.0) I get the same errors. I am using the newest Meteor version 1.1.0.1
On local host you don't need to set the environmental variables, but the host services provides you should.
Check this tutorial to see how to put the environment variables.
Because the file-upload needs a startup-server-configuration, like this.
//file:/server/init.js
Meteor.startup(function () {
UploadServer.init({
tmpDir: process.env.PWD + '/.uploads/tmp',
uploadDir: process.env.PWD + '/.uploads/',
checkCreateDirectories: true //create the directories for you
})
});
But im not sure if putting this on a startup will work on digital ocean, like i say you you enter it, run printing and check if the /.uploads/ exists
I use Yeoman to do some angular development with grunt, livereload etc.
I've also set up a basic node.js/express app and I'm sharing some JS between the client (angular) and the server (node) using grunt-contrib-copy and grunt-express-server that fires on every file-save using watch. So far so good!
The problem is if I introduce a syntax error into the code that I want to share with node and hit save. The syntax error gets shown in the log and breaks/stops the watch. Then I have to go restart the watch in the console by doing $ ctrl+c and $ grunt server.
Is there a way to get grunt-express-server not to break/stop the watch that's going on if a syntax error is found in the js code?
I'm the author of grunt-express-server and working the issue here:
https://github.com/ericclemmons/grunt-express-server/issues/27
I've been able to work around this problem by running grunt-parallel or grunt-concurrent, which prevents errors from preventing execution of watch.
I am working on meteor framework and trying to upload images in one of my app using the code from the link
https://gist.github.com/3922137
Everything works good , except that it uploads the empty file in my public folder of app .
I checked console and it shows 503 error there after I select a file to upload
Here is the console screenshot
http://img40.imageshack.us/img40/2956/consolewl.jpg
It keeps on looping and the number of errors keeps on adding in console
I am using meteor on windows .
Does anyone has managed to get file uploads work in meteor on windows platform ? and if yes can you please share the code which worked for you .
Thanks
Aman
The reason you are getting a 503 is that when anything in the public folder changes meteor reloads. Because your uploads are going there the server is resetting. Change your code not to save it to public but rather somewhere else and you should see the error go away.