I was trying to create a new typescript-react project by using the command
npx create-react-app todo-list --template typescript
well the installation went well, but when I run the project with
npm start
I am having the below error
PS C:\Users\ayex\Desktop\freecodecamp\React&Typescript\todo-list> npm start
> todo-list@0.1.0 start
> react-scripts start
'Typescript\todo-list\node_modules\.bin\' is not recognized as an internal or external command,
operable program or batch file.
node:internal/modules/cjs/loader:998
throw err;
^
Error: Cannot find module 'C:\Users\ayex\Desktop\freecodecamp\react-scripts\bin\react-scripts.js'
at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
at Module._load (node:internal/modules/cjs/loader:841:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
Node.js v18.12.1
From the error message you can clear see that it is trying to look for react-scripts file but in the wrong directory, I do not know how to solve this. I tried to delete the node_modules
and package-lock.json
file and run npm install
ended up with no lack.
here is the package.json file
{
"name": "todo-list",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.39",
"@types/react": "^18.2.18",
"@types/react-dom": "^18.2.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"react-scripts": "^5.0.1"
}
}
NO F***ING WAY!
how could folder naming be the cause of the problem I named the folder React&Typescript
and the ampersand was causing all this error, wasting my precious 2 day. when I name it to React-Typescript
it immediately works.
it all make sense now I guess, in the error message the ampersand was causing it not to read the full directory path it cuts it in the middle of the name React&Typescript
.
'Typescript\todo-list\node_modules\.bin\' is not recognized as an internal or external command,
it is really astonishing that no one has faced this issue, me being the first person! note I have used vite this time instead of npx create-react-app and still was facing this issue.