how to run next js project in vs code? - reactjs

I am doing a next js project with my friend. I want to run the project with vs code but when i run the commmand "yarn start", i get the following error:
There was a problem loading the local develop command. Gatsby may not be installed in your site's "node_modules" directory. Perhaps you
need to run "npm install"? You might need to delete your "package-lock.json" as well.
error Command failed with exit code 1.
I have done every thing to solve the problem but it is still there.I have re installed npm and gatsby.I have node installed but the problem is still there.I dont know how to fix it.Please guide me

I would highly recommend to delete the package-lock.json then navigate to the root folder of the project and run in the terminal "npm i", also make sure that You have created the nextjs project as in the guidance here -> https://nextjs.org/docs/api-reference/create-next-app

Related

Next stuck loading when using SASS

Fresh Next project -> "npm i --save-dev sass"
then in /pages/_app.tsx I write at the top:
import '#/assets/globals.scss;
The file exists and the path is correct. But the project doesn't load. If I run "npm run dev", the website is stuck loading forever and the console just says:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
If I run "npm run build", it's stuck with "Creating an optimized production build..."
The console doesn't display any error or warning, nothing. I've tried running these commands with --verbose, but nothing useful. If I change the file to .css and import "...css", then everything works fine. I change it back to .scss, and stuck again.
I didn't add any next configuration.
Next version: 13.1.2
Sass version: ^1.57.1
Node version: v14.20.0 (I can't upgrade because all of my projects crash)
OS: Mac OSX
I've tried to search for this error 'cause I thought someone else would have it, but I find nothing. I've also checked the official Next Github issues page. I've tried to find errors or warnings in the console, but nothing. I've followed the official Next documentation, and as I say is a fresh project, nothing special. And as I said, If I remove .scss files and use only .css, the project works.
Sorry for not being able to provide more info. If you need something else please ask and I will edit the question.
EDIT:
don't know if it's related, but while I fixed this problem I tried to compile myself .scss files into .css, and use .css because then my project works.
I tried to run "node-sass ./styles.scss" and it displayed this error:
Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Node.js 14.x

issues with npm start

Trying to run a React project I haven't touched in a week or so. When I run 'npm start' the project doesn't show up in my browser automatically anymore. My terminal says that it's being served locally. When I pasted in the address, it didn't show up and I received a 'not found' error . After about 5 min I tried again, and now the project shows up on localhost:5000. I am curious though as to why 'npm start' isn't automated like it should be with React. I tried making changes to my project, and the app in my browser isn't responding to any changes I'm making, even with a hard refresh. So far I've tried deleting node_modules and re-installing npm. I haven't found a thread on npm start that addresses this particular issue, so any advice is appreciated.
Okay, figured it out. For some reason the script for running in my
package.json changed to
"start": "serve -s build" I changed it to "react-scripts start" and that seemed to fix the problem. Not really sure what made it change in the first place.

Builderx to expo

Is it possible to open a project made in builderx? I found that tool and it is good, but when trying to emulate it with expo it gives me many mistakes, is there anyone who uses this tool? If so, can you tell me how I can emulate the project?
You can either download the whole project and then run yarn or npm install. Or you can download the component and then use it in your existing react native project.
If you are downloading a component in which some third party components are used, you will have to add those libraries manually in your existing project by yarn add [library-name] or npm install [library-name] --save.
You can check this
Save your project in BuilderX. It will give you the Expo project.
Go to the root of the project in terminal. run the following commands.
"npm install" or "yarn"
"npm start" or "yarn start", once this command is run successfully, you'll get a QR code at the end of the output
Scan the QR code in Expo App of your mobile and It will run the project in Expo.

When should you run the 'yarn start' command while working on a React project?

I'm having trouble finding much documentation on this command.
Say you are working on another person's React app, have unzipped it to your desktop and run 'yarn install' to get the dependencies. You are about to make some additions to the code. Is this when you run 'yarn start'?
I was given these instructions:
"Go to your terminal and navigate to the root folder of the extension. Type yarn start, this will make a build folder within the root folder. Stop that operation (on a mac it’s ctrl-c) and then build the updated version."
To me, this sounds sort of like I'm supposed to make the edits, then run 'yarn start', stop the operation and run the build command in quick succession. However, I was under the impression 'yarn start' is what you run in the beginning, before you start working on the React code.
Can someone set this straight for me? At what point in this process does 'yarn start' come into play?
Thank you!
As per this,
Go to your terminal and navigate to the root folder of the extension. Type yarn start, this will make a build folder within the root folder. Stop that operation (on a mac it’s ctrl-c) and then build the updated version.
it is clear that your yarn start command is building your application.
Building your application means it bundles your js, css & assets files to a single chunk file which can be run in production.
Coming back to your question, when to run yarn start.
So whenever you done with your changes and ready to go live then you call this command which will give you a updated build folder for production.
It's a predefined command in your package.json
It will look like this:
in your package.json
{
"scripts": {
"start": "terminal go do something"
}
}

ReactJS - How to deploy the build folder with the proper paths being referenced?

I've just run "npm run build" on a react app built with the create-react-app npm package. The issue now is that all the minified and bundled files and folders are referencing the root folder, when they are in a sub-folder. I've tried changing in index.html but that doesn't seem to work. Help?
#Jason Xu and #Mamdoh Saraireh thank you so very much for responding and attempting to help me.
It seems I am a complete idiot and did not read the full output of the build message. The solution to my problem is to add
"hompage":"./"
into my package.json file before running npm run build

Resources