so I tried to run npm start on my react app.
But It's not running, instead it responds like this:
'/Users/macintoshhd/iCloud Drive (Archive)/Documents/Abu Abdillatief/Self Study/vetme/src/.' were found.
Can anybody help? In previous projects everything runs fine, and I tried to run other previous projects again that has no . file in src folder, it ran well, no problems. Plus, this one also has no . file in src folder as well.
I dont know if . refers to index.js or any other files, but it clearly has no different when it comes to files contained within src when initializing npx create-react app ... or create-react-app ....
What I've tried:
Delete node_modules
Re-run npm install
Update npm version
I hope this information could help in finding solutions, I cant quite see the problem myself, thank you.
I face the problem also, and found this link https://github.com/facebook/create-react-app/issues/9902
There mentioned that your directory path shouldn't have any space, since the last react update.
C:\Desktop\React App (BootCamp)\myApp> npm start
After I removed the space from the directory path, it still doesn't works.
C:\Desktop\ReactApp(BootCamp)\myApp> npm start
Then I tried to remove the parenthesis also... and it works.
C:\Desktop\ReactAppFromBootCamp\myApp> npm start
I've had the same issue after I deleted everything in the src dir and all I had to do to fix the problem was to stop the server with ctrl+c and then npm start.
It's very weird, I had the same issue with a new project I created and there is no way to make it work.
The solution for me was to copy all the files from a working project (instead of creating a new react app) and then it ran fine.
Having the same problem... it happens to me when I run create-react-app in a particular folder. it doesn't happens when I run it a in a new directory.. still trying to figure it out.
anyway..
I tried to move around this new react app folder to any path that doesn't contain archive in its directory, it runs well (even though its parent folders has space in its name).
But, my previous projects are located inside a path which contains archive, it runs fine too, so I'm not sure if these are due to the latest changes React made or something in that nature.. but at least it runs now and I can continue building my portfolio.
Hope this runs on your machine too :)
I have the same problem when I created a new app recently using create-react-app tool. Maybe the problem is the path of the folder which includes the react app is too long, or some special characters in the path. When I put my app into a new folder which has a short and simple path, it works. A new problem caused by new updates.
I guess this is a problem with the new version of React (it has been updated from 16.13.1 to 17. **. **).
I took from my old file "package.json" " " dependencies ": {" react ":" ^ 16.13.1 "," react-dom ":" ^ 16.13.1 "," react-scripts ":" 3.4. 3 "...}, removed all files from "src" but did not touch "app.js" and "index.js" and used npm i & npm start.
The application started, but I had a problem - there was no "import React from 'react'" in "App.js". check this option.
According to the git hub issue, they mentioned "your directory path shouldn't have any space" but in my case it still do not work, Once I move to app to Desktop and npm install and npm start, It worked fine but I have no idea what was happening under the hood.
Related
Wanted to create a new react app, and ran both npx create-react-app and init react-app command in my Mac terminal but it's not working.
Tried a couple of times, but sometimes the folder is created with a package.json file only. Then everything stopped downloading. What could be the issue?
Screenshot of the output in the terminal:
According to your screenshot, there is no problem when you initialize your react project.
I think your local network may not be good enough. To create a react app, you need to install many third-party nodes_modules then cause mistakes.
Therefore, you can try to change the npm source, such as taobao（ https://registry.npm.taobao.org ）
npm config set registry xxx
And then use the craete-react-app to initialize the app.
So when I try to create a react app using yarn I am facing this error. I don't understand why I am receiving this, this is my first time using yarn. It would be great if you could guide me through I want to create a react app with yarn. I face no issues when running npx command.
From the screenshot, it can be seen that it is due to the space in your Windows user name - Adil Asif. Command prompt takes whatever before Adil in the path as command and rest from Asif as arguments, instead of yarn as command and create-react-app client as argument.
You could try using NPM or check the corresponding github issue. You can also create project in another drive if available or in the root folder of C: drive.
Github issue and fix
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 just started learning React and created a first app by using below commands
npm install -g create-react-app
npx create-react-app myapp
after this i moved into my app folder and then used 'npm start' command to start the server but i go this error.
Please help me to resolve this problem and starting the react server.
If you have an & in your project's path you will run into this issue, at least on Windows it seems like. The part in the path after the & is interpreted as another command as per the error and everything breaks from there.
Confirming that as soon as it's removed, npm start works fine.
It's happening most likely because of an & in your folder name which is getting used as the path of your project. So Check the whole path trail of your project and rename any folder with "&" to only text-based names.
The Run - npm start from the console. Hope it will solve your problem. Enjoy coding and changing the world.
this is happening because of one of the following reason -:
your project directory has & symbol in the name, this happens because when node encounters & symbols it breaks the string into 2, ( if you have worked with simple http authentication, you would know this issue )
delete you node_modules, package.lock.json, install both again and run start script - suitable for linux systems only,
If your problem still exists, re-install node in you system again, and check for & symbol in your project dir.
Its a pretty simple answer . I have not yet found out why it works but try this :
react-scripts build
In my case, my file directory has a "&" symbol I just remove this and symbol and this problem is solved
It looks like npm install not executed while app creation. What you can look for is:
Check if package.json is inside myapp.
If node_modules directory is not created then move to 3.
Run npm install or yarn to load the scripts and other dependencies.
When done installing then try npm start or yarn start.
I edited my package.json file:
"scripts": {
"start": "node node_modules/react-scripts/scripts/start.js",
"build": "node node_modules/react-scripts/scripts/build.js",
"test": "node node_modules/react-scripts/scripts/test.js",
"eject": "node node_modules/react-scripts/scripts/eject.js"
}
I ran into the same error since yesterday, I tried almost everything
Deleting node-modules and package-lock.json
I created a new react-app
I've tried even installing some stuff globally as suggested by other developers
But none of these really worked.
Finally, I've found that I had & in my project path
remove special character for example "&" in your local drive directory path, I had & in directory name and finally deleted and problem solved
In your project path (Larsen & Toubro/react/myapp), there is a "&" symbol. Because of that, it will display the error. When rename that "Larsen & Toubro" folder without "&" symbol, the issue will fix.
In the error message it says Toubro\react[...] while leaving out your whole foldername OneDrive - Larsen & Toubro\react
You may try installing the app again in a different folder with a less complex folder name.
I used Nikhil Kumar's answer:
$ npm build
$ npm start
I had a similar error when executing yarn start. Removing any special signs from the path (in my case an umlaut) resolved the problem.
Please check with the Project path conatins "&". This is the major cause of the issue.
My issue got fixed after removing the C:*R&D*\REACTJS\thepage from the path.
try it yarn set version classic command then npx create-react-app your-app
https://pretagteam.com/question/createreactapp-error-cannot-find-module-reactscriptsscriptsinitjs
In windows machine, I have folder with name contains capital i (which is "İ") in Turkish alphabet. This character leads to that error. While giving name to folders, avoid using characters other than English alphabet if you are a developer.
I had this error in my React project. This error happens because your project doesn't has installed a react-script.
You can solve installing this way...
npm i react-script
npm start
Your app will run now! :D
I have a create-react-app app and I am translation files from jsx to typescript. For example, one file is called /code/app_react/src/common/Action.jsx and I renamed it to /code/app_react/src/common/Action.tsx. I made the necessary changes to successfully convert it to tsx, but I am getting an error related to the name change:
./src/common/Action.jsx Error: ENOENT: no such file or
directory, open
'/code/src/common/Action.jsx'
rebuilding the does not help
for some reason, the old version of the file is expected
The file importing this file is a jsx file, but now I am importing a tsx file into it.
This is a CRA app, so is there a correct way to clear this error?
SOLUTION:
I had to remove them from the git repository, using the git rm command, like this:
git rm /code/src/common/Action.jsx
Once I did that, it removed the jsx from the committed files and then I was able to use the new tsx files
Killed my yarn process running, killed vscode, re-started both and it works
I had same issue, no need to remove node_modules or remove target file, you just have to kill the node process.
If you're on windows:
ctrl+alt+delete to run task manager
find node
end process
If you're on linux:
probably something like pkill node, etc.
After I killed the node process and ran npm start again, it finds the target file.
I was having this problem (though I had renamed js to jsx, rather than jsx to tsx), and the solution added to the question (running git rm on the original file) didn't work for me.
What did work was suggested by this r/reactjs Reddit thread: deleting and reinstalling node_modules:
rm -rf node_modules && npm i
It is happening because of the pre-built cache. A simple solution would be to restart your nodejs and react app.
In Linux
$ pkill node
$ killall node
$ kill -9 <pid>
In Windows
C:\>taskkill /im node.exe
C:\>taskkill /f /im node.exe
C:\>taskkill /pid <PID of node>
In MacOs
$sudo killall -9 node
And then start your React application again.
npm start
Maybe you have not imported the file. You need to import the file to use it.
import Action from '/code/app_react/src/common/Action.tsx';
Also add this to your webpack.config.js.
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
},
You're good to go!
I had the same issue converting .jsx to .tsx. If you're using Parcel to build your app, delete the .cache folder. That's where Parcel caches build files. That fixed it for me.
I was working with redux and then came across this error!!
I tried killing node , removing node modules, restarting the laptop but it still gave the same error then later I started debugging index.js
I commented each line and started uncommenting from top to see where the code is breaking then observed
I had not installed
redux
I had only installed react-redux
Just restart your npm server, it will automatically detect the typescript file and make adjustments
It took me all day and all I needed was to restart docker :)
And I do need to restart it after every file change to tsx.
I manually deleted the node_modules folder and re-installed them by running npm i and the trick worked for me.
A simple server restart works.
Eg: NPM RUN DEV or any start script worked for me
I also had the problem in a React Application (started with yarn start and displayed at localhost:3000). The problem arised after renaming a component and forgetting the suffix .js. After adding the suffix .js the already started App still was searching for the file without the suffix. The solution was similar to Umanda's recommendation:
Ctrl-C
yarn start
Then the App worked.
If you are in parent folder or other folder not current folder then you got this error.
Just go that directory, by using command
cd folder-name
npm start
it will work
I get the same problem when I try to run my next js apps, to fix this I just delete .next folder that contains cache files and it works!
I think for create-react-app you need to restart the server