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
Related
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
I'm trying to use Vite for a React project. I need to configure Vite so that when I run the dev server it places the runtime files in a particular directory (because the files are used with another runtime environment). The server config doesn't seems to have an option but I'm not sure if I'm missing something or it is in a different place. Thanks
It doesn't seem to be possible right now according to this repo discussion https://github.com/vitejs/vite/discussions/6108
Meanwhile, you could run the dev command along with the build --watch command to have both, but it would get slower
npm run dev & npm run build -- --watch
I have created a project using this tutorial:
https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2019#:~:text=%20Tutorial%3A%20Create%20a%20Node.js%20and%20React%20app,a%20Node.js%20web%20application%20project.%20Open...%20More%20
It is working perfect but, for each change I do to the code, I need to compile to see results.
Any way changing index.html, packacge.json or wathever to do an npm start and see results without compiling?
The current struct I have is an app.tsx file that is the main reactdom file and a lot of js files.
after compiling a dist\app-bundle.js file is created and is the file that is in the index.html file:
<body>
<div id="root"></div>
<!-- scripts -->
<script src="./dist/app-bundle.js"></script>
</body>
I tried to change src to "./app.tsx" to avoid generating app-bundle.js every time, but doesn't work. A blank page is what I have.
What I would like to have is the browser working over the source files and not over the compiled one to develop faster. And when finishing, then compile only one time.
I hope I explained more or less right.
thanks!
Thanks!
From where i'm at right now, you do need to add more detail in your question about what you actually want. When you mean "compile" are you just referring to running your code at runtime using "npm start".
If so, with Node.js, any change you make to your source folder will not show up if you are already running your application. Although, there is a package you can download called Nodemon that allows you to make changes to your application and once saved, restarts your server with the new build in mind.
To install this for VS2019, navigate to your solution explorer, right click your npm, select "install new packages", search nodemon and install. Once installed, open your package.json file and under your scripts, modify your npm start script to stop running with node and instead run with nodemon :
"scripts": {
"start": "nodemon server.js",
...
}
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"
}
}
I have built some code with React. During its "development build", npm start at localhost:3000 give me the correct behavior.
However, after npm run build and serve -s build, the site at localhost:5000 give me this error: Can't remove headers after they are sent.
I have tried to take out everything and make it a bare bone project but the error still appears.
I have tried the production build before and this just happened.
Answer:
Nothing serious. I reinstalled serve package and it is now OK. Seems that a recent update to serve (npm i -g serve) got broken and after reinstall serve package, it is now OK.