I wanted to start getting into Next js, and I followed the tutorial on their site (Next js Tutorial) to a t - with no luck. I run npm run dev and I receive the following messages on my console, and terminal respectively:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
and 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:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
I am running Node v.13.13.0, React version 16.13.1 and React-DOM version 16.13.1.
I've tried creating my own app from scratch using npx-create-next-app, and I get the exact same error.
I just want to get a Next js app up and running, any help is greatly appreciated.
I had the same problem but I was able to resolve it in the end. I was using GitBash as my command window which was causing the internal server error. Once I switched to windows cmd, everything worked fine.
Related
I'm gettig this very frustrating erro while trying to push my React app to Heroku. I was able to push it up with no problem in the application's earlier development, but for some reason it now gives me the same error message all the time:
! [remote rejected] main -> main (pre-receive hook declined) error: failed to push some refs to 'https://git.heroku.com/sapient-origin-alpha.git'
The only thing I can think of is that there is some issue with the version of react I'm using (I tried react 18 and 17, both gave the same results). But again, I was able to push it up before with no problem so I'm not sure. My other thought was that it's the client-side package.json since it's saying the build is failing.
Another thing worth mentioning is that I re-named the Heroku app, but afterwards I removed my local git remote and created a new git remote with the updated Heroku app name. So maybe this had something to do with it? This is basically what I did:
*rename heroku app*
$ git remote rm heroku
$ heroku git:remote -a sapient-origin-alpha
If anyone is able to help me on this I would very greatly appreciate it.
Nevermind I'm just dumb. It literally told me what was wrong in the error message slightly above the text in the image I provided.
The problem was in the client-side package.json because of some dependency I was using. Make sure to double check your package.json file for things that could be causing a similar error, and delete your package-lock.json then run npm i again to refresh the file.
I just started building my second Vue project, and for the first time I wanted to use the Vue CLI and NPM rather than just loading Vue via CDN.
Installing the CLI and setting up the project worked without problems, but when I ran "npm run serve" and navigated to localhost:8080 in my browser (latest Firefox) to see if it worked, I got the following error message in my browser console multiple times:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://10.126.86.51:8080/sockjs-node/info?t=1584021154635. (Reason: CORS request did not succeed).
I also get this error message once right after loading the page:
[WDS] Disconnected!
Does anyone know what these errors mean, why I get them and how I can get rid of them?
The first one seems to be related to some kind of cross-origin call that the app is making using the host's actual IP rather than localhost, but I can't think of any reason why it would, given that I literally just installed and served the example project and did not change anything after running "vue create"
Edit: I am on Ubuntu 19.10 Desktop
First of all, what kind of OS you are working on? If you are working on unix based systems, a service (like nginx) could produce this error. If so, try stopping it.
Afterwards I would try to run your application from vue ui.
Type in your terminal:
vue ui
This starts the web based graphical user interface of vue cli. You can handle your app development from there by starting your service and run your build command.
ATTENTION: you must add (import, NOT create) your project (root folder) to the UI.
If you get the same error inside your browser console, set up a vagrant box. First steps are explained here:
https://www.vagrantup.com/intro/getting-started/
Follow instructions for project setup.
Simplest way would be running
vagrant init
inside your project folder. Therefore you don't have to setup a new project.
After running the init command, try running
npm run serve
or use vue UI instead (as explained above), if you prefer it.
If the problem still exists, more infos about your OS would be helpful.
I am building a web app using React and Redux on the front end and Node on the back end with Express and MongoDB.
My app runs fine on my Windows machine. Today, I cloned the repository onto my macOS device and ran npm install inside the client and the root directory and then I tried running the application to find this error message pop up:
I'm not sure what this error message means and stack trace displays that the error originates from Redux inside the node_modules folder, which is code I did not write or touch. Here is the repo: https://github.com/furtivepygmy/devconnector
I'm new here, so please go easy on me. I always face issues when moving my workspace between macOS and Windows, however I can't seem to fix this one. Is there something I need to do when migrating between operating systems?
This is for React Native on Android.
When I try to start my React Native screen in my app I get the red screen that says Could not connect to development server. However this can't be true. Every time I try to reload the Javascript I see the following update in the terminal that's running my react native server:
Bundling `index.android.js`
Transforming modules 100.0% (390/390), done.
Bundling `index.android.js`
No module changed.
Bundling `index.android.js`
No module changed.
Clearly it's making a request to the server, but the error says something else. What's going on here?
I am just getting started with Ember.js at v2.9.0, followed the tutorial on their page https://guides.emberjs.com/v2.9.0/tutorial/ember-cli/, all good, save for one detail: Whenever I tried to refresh or load the development web app on Chrome browser after executing ember server on the cmd, the app would not load in browser and provide the following error most of the time (there were other errors as well but seem to be related to this one):
GET http://localhost:4200/assets/vendor.js net::ERR_INVALID_CHUNKED_ENCODING
, and one of the related errors is:
Uncaught ReferenceError: define is not defined
at application.js:1
I have searched for this specific error but without luck, I tried some fix hints found, such as clearing some persistent data with the netsh command, doing an npm cache clean bower cache clean, deleting the node_modules and the bower_components folders and reinstalling dependencies; also ensuring that there was no weird proxy configuration in my LAN settings, etc.
I have encountered this error while following the tutorial, and it would kind of be bypassed by refreshing the browser a few times until the app displayed. That was before, but now the refresh does not work when working on an existing application.
I am on:
Windows 10
ember-cli v.2.9.1
node.js LTS v.6.9.1
I need to get going with this rather soon, so any hint to resolve this issue is appreaciated. Thanks!
Might be a conflicting process running... Are you working over a VPN? If so, take a look at https://superuser.com/questions/893908/err-invalid-chunked-encoding-from-chrome