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
I have been having a little bit of issues when deploying my create react app, as it fails to compile and tells me Plugin "react" was conflicted between "package.json » eslint-config-react-app »
I was wondering if somebody has encountered the same issue and knows how to solve it, thank you! I am still very new to all this.
There is a conflict in the casing
C:\Users\Ruben|desktop\reactapp\test....
whereas the nodemodules is looking for C:\Users\Ruben|Desktop\Reactapp\test....
This is a windows specific problem, and previously react would have run the app regardless of this difference. Not anymore it seems.
The solution I used was to locate the folder and open with code; that ensures that the path matches directly with what is stored in node modules
Faced with the same issue on Windows 10 & VS Code & npm.
As a workaround, open the package.json file in VS Code and save it (ctrl+s), then it works. You may need to repeat this step each time, a bit annoying.
The error occurred from the terminal, i had similar issues for a long time trying series of things from trying to update my dependencies using "npm install" to saving the package.json file, but all this approach will only fix the issue temporarily.
The best and permanent solution is for you to cd into the project correctly from your terminal, the latest react is sensitive to the casing.
e.g.
you cd into
C:\Users\Desktop\reacttutorials\antd-demo
while the correct path is
C:\Users\Desktop\ReactTutorials\antd-demo
Note the change in the casing.
Just re-save package.json, that worked for me.
Solution worked for me.
npm remove eslint-config-react-app
Tried reinstalling eslint but throwing the same error.
Just removing worked fine for me.
I also ran into this problem on a Mac. As a temporary workaround, I was able to fix this by downgrading to version 6, by running
yarn remove eslint-config-react-app
followed by
yarn add eslint-config-react-app#6
I ran this twice. Always failed with version 7 (eslint-config-react-app without the "#6"), and always succeeded with version 6. YMMV, especially if you really need version 7.
I got this error when installing React with Visual Studio 2022 Standalone React project. The problem was Visual Studio showed my project name in Capitalized (as I typed), however, the folder name was in small-caps.
The fix was to manually rename the folder name to match the project name as shown in Visual Studio.
Windows 10 with VS Code user. I re-installed es-lint-config-react-app with yarn, or npm if you use it. and everything seems to be fixed so far.
Current react is case sensitive, Hence we have to specify the directory path with accurate casing.
Eg:
# This must be written with case sensitivity
C:\Users\Ruben|desktop\reactapp\test
C:\Users\Ruben|desktop\ReactApp\test
Soln. Use cd and write accurate location
I changed folder name, but I run the app from terminal in old folder name.
old Folder name: C:/.../ReactRepo/ReduxExample1
changed name: C:/.../ReactRepo/reduexample1
How I solve from terminal:
cd .. && cd reduexample1(paste here your new Folder Name) && npm start
I had the same issue as you, and i got tired doing Ctrl + S on package.json, which is a one of the solutions. Another way to solve that is your path you have Desktop (D uppercase) and the path that the error show to you have desktop (d lowercase) so you can rename that folder to desktop and it will solve the problem
I solved this problem by deleting the eslint-config-react-app folder manually from node_modules and running yarn add eslint-config-react-app again.
As many people wrote here already, the problem is with different casing of the react app folder.
The stable solution, if you want to run and debug your app from Visual Studio or VS Code:
Edit the Visual Studio Solution File (.sln) and change the path to the react app project to use the actual casing (lower case), as seen in Windows Explorer!
e.g. change this line:
Project(<Guid>) = "reacttstest", "ReactTsTest\reacttstest.esproj", <Guid2>
to this line:
Project(<Guid>) = "reacttstest", "reacttstest\reacttstest.esproj", <Guid2>
Root cause:
If you create a new project from Visual Studio and use upper case for the project name, the actual folder will still be lower case. The problem is: In the Visual Studio solution file (.sln), the path to the project is still written with uppercase characters (as you initially typed it), while the actual folder name is lowercase. When starting the app from Visual Studio, it will open a terminal session using the upper case version of the folder, taken from the solution file. When it starts the app from that folder, it will run into the problem.
Saving the package.json temporarily solves the problem (for unknown reasons), but it re-appears all the time. The only permanent solution when using VS is changing the folder name in the solution file.
Had the same problem with the name case. When creating the project, had named it "React2", but VS ignored my case and named the project's folder "react2" (lowercase) instead. The solution was to:
Close Visual Studio.
Rename the folder. That is, make the case match the project name. (From a git-bash shell: mv react2 React2 to fix the name case.)
Open Visual Studio, and try again.
I had this issue after updating mui. None of the above solutions worked for me. Eventually, I ran npm dedupe a bunch of time and found all of the conflicted dependencies. After making a bunch of edits to my package.json and npm installing, this error went away.
This is an ongoing issue for me that appears when I edit and save any files and react tries to recompile. My temporary fix is whenever I save a file, I click on my package.json file, which I have constantly open on the side, and save. Then it compiles fine.
I have faced the same problem, what I've to do is open the project by right-clicking & opening with VS Code option. Previously I was navigating to the project from the command prompt and opening this from the terminal itself, this was showing me the same error. I think this is a typical windows-related problem.
A similar problem occurred to me as well. Through git cmd with code. command, I opened my project.
As a result, I got the same following error message. I open my react project manually when I run npm start
I have no problems with it
I add the same problem, just open the Package.json file, save again and close it
from package.json I removed:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
Then, I restarted the server with npm start and my web app is working again.
Hope it can help
I, too, have faced the issue.
The problem arises when you overlook the case of the folder that you're opening through the command prompt.
e.g. your directory is something like E:\D\users*TODO*
but in your terminal you typed cd todo-> this will give you the mentioned problem in the question asked.
Just maintain the Case the way it's saved i.e. cd TODO
I fixed this problem by updating the eslint instead of saving package.json every time.
Open command prompt, navigate to the folder where the react project is located.
Run npm update eslint
This issue for me was caused by what I had typed into Powershell when cd'ing into the folder where I wanted to create the react app.
I had typed the full path in lowercase, which didn't match the actual casing of the path.
To resolve this, I performed the following:
I deleted the original react app folder
Opened a new Powershell window (as administrator)
cd into the correct folder ensuring the casing matched exactly.
Ran the command npx create-react-app client-app
cd into the newly created folder (client-app)
Run npm start
And the app started without any issues.
Nothing Complicated Just Delete "package-lock.json" file
I have a an .eslintrc.json file whose rules my code is obeying. Except the "no-unused-vars" rule.
It works in my editor, that is, the unused vars are no longer highlighted red, but when I run the app in the console the console throws the warning. It's like they're using two separate configs or something. It's a create-react-app.
Stop your app, run rm -rf node_modules/.cache/eslint-loader, then start it again. If that doesn't work then your editor is probably using a different eslint config than your app, but it's hard to say without looking at your setup.
Either way, check out CRA's official documentation on extending ESLint rules, or even better, use something like craco, react-app-rewired or customize-cra to get complete control over your ESLint config without having to eject from CRA.
As it turned out, the only thing I needed to do was add a .env file in my project root with this:
EXTEND_ESLINT=true
Then everything worked fine. I love simple solutions but my lord was that tedious! :)
Rather simple question really.
I come from a background of VueJS, where this is all setup for the user automatically. I'd like my linter (tslint, if that matters) to just run automatically when any file is saved in the project, but all the resources I've found stop at adding a command to the package.json file. Having a separate command for the linter is great and all, but I want those lint warnings to come up in the terminal while the dev server is running.
Edit: Not a duplicate of "How do I get tslint to watch for changes in a specific folder?" as that does not address what I'm looking to do. I can see that I can have a file watcher run separately from the server, but I do not want that. I'd like running the server to start the linter.
So this is what i was doing :
"watch": {
"lint": "src/main.ts"
},
"scripts": {
"lint": "tslint src/**/*.ts -t verbose",
"watch": "npm-watch"
},
for that you need npm-watch. Here is a good explanation How do I get tslint to watch for changes in a specific folder?
Hope it helps.
EDIT: I currently use VsCode and the TSLint plugin just shows everything on the IDE so i dont set it this way anymore
You can install vscode prettier plugin for exactly this.
After installing it, open your vscode settings (user/workspace) and enable Format on save as it respects the setting. Plus you can do it on language basis.
You can then configure your linters (ESLint/TSLint) to work with prettier.
More info is available on prettier's github repo - https://github.com/prettier/prettier-vscode
Maybe is little too late for the answer but since some CRA version you can extend "standard" eslint configuration with EXTEND_ESLINT environment variable. You can read about it in official docs and in this tutorial.
Linter configured this way is running with dev server.
When i write react code in Visual Studio Code, it is showing me error. How can i get rid of those errors?
Thanks in Advance,
Amala
Go to File-> Preferences -> Workspace Settings
Then enter the following lines in settings.json file
{
"javascript.validate.enable": false
}
Step 1 :
Press Ctrl Shift X
It shows Extensions Screen.
Or
navigate to Extensions Screen manually
Step 2 :
Search for jsx Extension.
and after result comes install Extension with name jsx.
then visual Studio code not showing error on html element.
First make sure you have installed all extensions for VS Code for proper code coloring and hitting for React.js, I think React-Native extensions work as well.
If you have npm installed in your system install eslint
npm install -g eslint
There is a cool add on to configure eslint to properly hitting JSX and you need to install it in your project directory. Go to your project directory on the terminal, or open the internal terminal on VS Code with the project open and type in:
npm install --save eslint-config-rallycoding
After this package is installed I suggest to create a .eslintrc file on the root of your project. This should be a proper JSON formatted code:
{
"extends": "rallycoding"
}
save the file and then restart VSCode, just in case. This should fix those errors. The ESLint configuration package belongs to Stephen Grider, pretty sure is open source, but giving credit just in case, and I found it on a real nice tutorial on React-Native and Redux.
The Complete React Native and Redux Course
I had the same issue and I fixed it by saving the file as a .jsx.
I tried all the suggestions here but none works if the file is saved as a .js(which I think is what you are experiencing).
I am hoping a better fix is available somewhere as at this time.