create-react-app + npm start - 'react-scripts' is not recognized as an internal or external command - node.js

Similar questions that I have tried following
"npm-run-all" is not recognized as an internal or external command
"'react-scripts' is not recognized as an internal or external command"
I am trying to create a React project via the create-react-app cli, but after creating the project I get the error
'react-scripts' is not recognized as an internal or external command, operable program or batch file"
when I try to launch the dev server via npm start.
What I have tried:
1) Make sure Node and npm are installed and up to date. From the project directory I run (via powershell)
> npm -v
6.7.0
> node -v
v11.11.0
2) Ensure that 'react-scripts' is listed with the correct version number in package.json
"name": "clipd2",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-scripts": "^2.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}...
3) Delete node_modules folder and package-lock.json and reinstall npm packages
rm -r -fo node_modules
rm package-lock.json
npm install
npm install -S react-scripts
After instalation the react-scripts directory is found (and populated) in node_modules
4) Make sure npm is in the environment PATH variable
> echo $Env:Path
....C:\Users\notMyUsername\AppData\Roaming\npm
I am at a loss for next steps. Strangely enough, I have another React app housed in the same parent directory
clipdReact
clipd
clipd2
And there are no problems when using npm start in the clipd project (whereas the failing project is clipd2)
Any suggestions or tips would be greatly appreciated!
**UPDATE
This bug was filed but is still open
react-scripts is not recognized
You can start the dev server (from your project's directory) with
.\node_modules\.bin\react-scripts start
Be careful generating the production build with a command similar to the one above - I had problems with babel and polyfills when trying to do so.

What worked for me in the end, was setting the script shell to powershell. The command for that is npm config set script-shell powershell and npm config delete script-shell to reset the config. I'm not sure why that worked, my guess is that since there are always 3 script files in node_modules\.bin that somehow the wrong shell was used for the wrong script or something like that.

npm install react-scripts --save --force

Related

Volta with yarn run build system cannot find the path specified

This is the first time I'm using Volta, so bear with me.
I have installed globally typescript, node and yarn
yarn -v >> 1.22.10
node -v >> v14.15.4
npm -v >> 6.14.10
These commands work inside and outside my project folder, with the same results.
However if I use yarn build from inside vscode the output is an error stating:
System cannot find the path specified
If I do the same from outside vscode I get the same result:
If I go to the node_modules/.bin folder inside vscode, the command still doesn't work (this time I just only run tsc). The error is the following:
The term tsc is not a cmdlet recognized command, function, script file or executable program. Verify if the name is written correctly or, if there is an access route, verify the route is correct and try again.
But if the command is executed from outside vscode in a cmd window, it works as expected, because tsc is really there:
Additionally, if I run npm run build inside vscode, the command works as expected. This is my package.json:
{
"name": "socket-server",
"version": "1.0.0",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"license": "MIT",
"scripts": {
"build": "tsc",
"dev": "yarn build --watch --preserveWatchOutput",
"lint": "eslint src --ext js,ts",
"test": "jest"
},
"devDependencies": {
"eslint": "^7.19.0",
"jest": "^26.6.3",
"typescript": "^4.1.3"
},
"volta": {
"node": "14.15.4",
"yarn": "1.22.10"
}
}
I do suspect of volta because volta is managing yarn version, but no npm; but I don't really know what's the issue.
I'm using Windows and my PATH has the following entries:
What am I doing wrong?
Edit: Yes, Shell command shortcut exists:
the problem is about vsCode, you should run code . in cmd because if you Open the Command Palette (Ctrl + Shift + P) and type
Shell Command: Install 'code' command in PATH
you won't see noting, after running code . in cmd when you should see like this photo, every things will be fine
I’m not sure for Windows, but usually the scripts in node_modules/.bin are symbolic links to scripts. For instance, node_modules/.bin/tsc might point to node_modules/typescript/bin/tsc.
It works outside of the directory because then it uses the global version of tsc.
Seeing your error, I’m suspecting that the symlinks are broken. Maybe just try to remove node_modules directory and redo an npm install.
PS: I’m not familiar with Volta, but it looks more like an NPM problem.

webpack command not recognized

I have the below commands configured in npm scripts.Now, if i run the command "npm run dev" there is no response in command prompt. However, if the run the below command as "webpack -wd" in command prompt, then the command is working as expected. why, i am not able to run this command from npm scripts. I am using windows and have set the node path in environment variables as below
"scripts": {
"dev": "webpack -wd",
"test": "echo \"Error: no test specified\" && exit 1"
}
C:\Program Files\nodejs;C:\Program Files\nodejs\node_modules\npm\bin;C:\Users\[username]\AppData\Roaming\npm
If you want to run webpack via the command line, you either need to install webpack-cli globally with npm i -g webpack-cli or you need to use npx like npx webpack -wd. This will run webpack the same way npm scripts do.
The problem you are trying to circumvent is that webpack by default does not build the first time in watch mode, so you either need to change a file after starting webpack or run webpack without watch.
Note: npx is part of the NPM/Node.js bundle

'ts-node' is not recognized as an internal or external command, operable program or batch file

I'm getting error in my Vs Code terminal and command prompt that 'ts-node' is not recognized as an internal or external command, operable program or batch file. while i'm trying the start command in the terminal npm run dev and i have added my package.json file also.
{
"name": "tsnode",
"version": "1.0.0",
"description": "ts-node experiment.",
"scripts": {
"dev": "nodemon --exec 'ts-node --cache-directory .tscache' ./server.ts",
"start": "ts-node --fast ./server.ts"
},
"author": "Mugesh",
"license": "ISC",
"dependencies": {
"#types/body-parser": "^1.16.3",
"#types/chalk": "^0.4.31",
"#types/express": "^4.0.35",
"#types/node": "^7.0.18",
"body-parser": "^1.17.1",
"chalk": "^1.1.3",
"express": "^4.15.2",
"nodemon": "^1.11.0",
"ts-node": "^3.0.4",
"typescript": "^2.3.4"
}
}
You need to install ts-node as global
npm install -g ts-node
More information
https://github.com/TypeStrong/ts-node
I wouldn't recommend relying on globally installed ts-node in your own module as some of the answers here suggest.
If you do that then anyone who installs your module would need to install ts-node globally as well (just a usual npm install would not be enough) and then you will have a problem if two modules need things like ts-node globally installed but with different versions etc.
To avoid that, all your dependencies should be defined in your package.json and installed locally in node_modules.
There is a little-known command npx that is used to run binaries from modules that are installed locally in node_modules.
For example, see what happens when I install (locally) ts-node and typescript:
rsp#mn-r:~/node/test/ts-test-1$ npm i ts-node typescript
npm WARN ts-test-1#0.0.0 No description
npm WARN ts-test-1#0.0.0 No repository field.
+ ts-node#6.0.3
+ typescript#2.8.3
added 19 packages from 44 contributors in 2.157s
[+] no known vulnerabilities found [19 packages audited]
and then I try to run ts-node:
rsp#mn-r:~/node/test/ts-test-1$ ts-node -v
-bash: /Users/rsp/opt/node/bin/ts-node: No such file or directory
I can run it with npx:
127!rsp#mn-r:~/node/test/ts-test-1$ npx ts-node -v
ts-node v6.0.3
node v10.1.0
typescript v2.8.3
or I could give the path explicitly:
rsp#mn-r:~/node/test/ts-test-1$ ./node_modules/.bin/ts-node -v
ts-node v6.0.3
node v10.1.0
typescript v2.8.3
In any case, I don't need to install anything globally.
I just encountered a similar issue: on Mac OS --exec ts-node works, on Windows it doesn't.
My workaround is to create a nodemon.json like this:
{
"watch": "src/**/*.ts",
"execMap": {
"ts": "ts-node"
}
}
and change the package.json scripts section to
"scripts": {
"start": "nodemon src/index.ts"
},
The only solution that worked for me:
"start": "nodemon --exec npx ts-node ./index.ts",
I ran into the same problem and found that it works by using double quotes instead of single.
"dev": "nodemon --exec \"ts-node\" --cache-directory .tscache ./server.ts"
P.S. This is 1 year after the problem. Not sure if package versions are a factor. Will confirm if needed.
If you work under Windows you can't use single quote in the json file. That is why you have to replace all single quote symbols(') by the double quote symbols(").
But between two double quotes(") you have to use escaped double quote(").
For the current case you have to change the row in the file package.json:
"dev": "nodemon --exec 'ts-node --cache-directory .tscache' ./server.ts",
into the row:
"dev": "nodemon --exec \"ts-node --cache-directory .tscache\" ./server.ts",
Nodemon is for watching and rerunning node processes when files change. The local ts-node installed in the node_modules directory is not recognized in the scope of the --exec argument. To get around this, some people have recommended installing ts-node globally. As a user pointed out, that's not a good solution because it relies on packages external to your project and makes the ts-node in our node_modules pointless.
Edit:
With newer versions of nodemon, you can simplify this even further (note: you still need ts-node installed as a devDependency).
"start": "nodemon src/index.ts"
Previous:
To fix your solution, prefix ts-node with the npx helper, which will use your local node_module executables.
package.json, inside the scripts block:
"start": "nodemon --watch './src/**/*' -e ts --exec 'npx ts-node src/index.ts'"
An alternative approach could be to use the typescript watcher with the existing node command and the concurrently package.
"start": "concurrently \"tsc --watch\" \"node ./dist/index.js\""
Same principle. One package watches for changes (nodemon & tsc) and restarts the second process (the node/ts-node server).
Edit 11/17/2021:
I returned this post to use it as a reference for setting up a prototype build and found the nodemon approach above was no longer working, it was now throwing the error:
''npx' is not recognized as an internal or external command,
operable program or batch file.
I found a fix was to convert all single quotes to escaped double quotes.
"start": "nodemon --watch \"./src/**/*\" -e ts --exec \"npx ts-node src/index.ts\""
Guess something changed since I my original post. Hope that helps!
For me deleting node_modules and installing it again using npm i was enough.
I had the similar problem, but I have resolved by replacing
"dev": "nodemon --exec 'ts-node --cache-directory .tscache' ./server.ts",
to
"dev": "nodemon --exec ts-node --cache-directory .tscache ./server.ts",
Just remove the single quote(') and install ts-node globally
I had a similar problem while using nodemon:
I had nodemon installed globally, AND ts-node only installed locally.
Solution:
I installed ts-node globally (still keeping the local dependency).
I fixed the issue by removing single quorts around ts-node. as per below
"dev": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
updated as
"dev": "nodemon --watch 'src/**/*.ts' --exec ts-node src/index.ts"
please note. my environment is windows 10 and npm version6.14.4
Like suggested in some answers, you should install ts-node locally and not globally. npx makes it easy to use CLI tools and other executables hosted on the registry as explained here. Hence, can be used to run ts-node on your terminal and even scripts from your package.json file. For example;
Take this to be my package.json file
{
...
"scripts": {
"start": "npx nodemon path/to/file"
}
}
Now running npm run start would not give any more issues.
You can try the following command
"dev": "nodemon --watch './**/*.ts' --exec \"ts-node\" src/index.ts"
This worked for me .
If your ts-node isn't working, as an alternative you can do the following:
1) Install nodemon locally --> npm i nodemon
2) In your package.json 'scripts' add the following:
"scripts": {
"start": "nodemon index.ts",
"test": "echo \"Error: no test specified\" && exit 1"
},
3) Now run npm start (this will automatically run node for you, but this WILL NOT COMPILE TS )
4) Open a new tab in the terminal/command line, cd the folder your working in and run tsc index.tsc --watch
This will compile your typescript. The only downside is you will just have to have both tabs open, one for running node automatically and the other for compiling automatically, but this works.
I was having the same issue on windows. I found the solution for my issue was resolved when I corrected some misplaced '
Originally:
"scripts": {
"dev": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts",
"build": "tsc",
"start": "node dist/index.js"
}
Fixed:
"scripts": {
"dev": "nodemon --watch 'src/**/*.ts' --exec \"ts-node\" src/index.ts",
"build": "tsc",
"start": "node dist/index.js"
}
The difference in case it isn't clear is that I no longer wrap ts-node in '
* EDIT *
I changed this based on the answer from #RoutesMaps.com above. This solved my problem as well as removing the ' but #RoutesMaps.com actually explains the issue resolution
I ran this command after npm install ts-node.
This fixed my problem:
npm install -D tslib #types/node
yarn add -D ts-node
"scripts": {
"start": "ts-node src/index.ts"
}
'yarn start' now works
Found the answer.
Without installing ts-node globally, just create inside your project nodemon.json file and put it there :
{
"execMap": {
"ts": "node --loader ts-node/esm"
}
}
So now, you can keep type:"module" in your package.json and module:"ESNEXT(or smth that supports ES Modules)" in your tsconfig.json. However, you are going to get constant warning from nodemon that it's, I mean loader type, experimental feature but it's not critical.
In your package.json, in dev command for example just run nodemon path/filename.ts
If you are using a mac these are the steps I came up with in order to fix this in the terminal.
Install globaly and use the returned file path with the symlink ‘ts-node’ and move this file into /usr/local/bin
Install locally without saving to package.json
copy folder in /node_modules into /usr/local/lib/node_modules/
Make sure the file is executable by opening /ts-node/dist and using the command chmod +x bin.js
run npm i in ts-node folder
Make sure that dist folder still exsists, if not copy it back over.
Test running ts-node in terminal, if it does not work it will return an error of which module needs to be moved over to ../
After ts-node runs be sure to delete the folder /usr/local/lib/node_modules/ts-node/node_modules
I was having the same issue. I found the solution for my issue was resolved when i do simply run this command first "npm run build" and than try it nodemon and also add in package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc",
"dev": "ts-node ./lib/server.ts",
"start": "nodemon ./dist/server.js",
"prod": "npm run build && npm run start"}
If you are using code-runner in vs-code then edit setting.json file
"typescript": "tsc $fileName && node $fileNameWithoutExt.js "
Write the the script like this inside your package.json file
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rimraf ./build && tsc",
"start": "node build/index.js",
"tsc": "tsc",
"watch-node": "nodemon build/index.js",
"postinstall": "npm run tsc"
},
Then, npm run build
and finally npm run start
I encountered the same error when trying to run nodemon from a Git Bash but it seems to be working just fine when running nodemon from PowerShell. So, you should consider giving some other terminals a chance.
Me helped this command
npm i -D typescript
More specifically written there https://nodejs.dev/learn/nodejs-with-typescript
Please use TSC --init, instead of TS --init
this error can occur if you have one version of ts-node installed in your project and another version globally.
To solve the problem - install the same version of the package
Just had this same problem and came up with a hybrid solution, using npx to execute but via nodemon config (rather than package.json).
nodemon.json...
{
"watch": ["src"],
"ext": "ts",
"exec": "npx ts-node ./src/server.ts"
}
Actually if you install nodemon as globally then install ts-node also globally. If you install nodemon as -D (dev dependency) then install ts-node as dev dependency. It will work.
A bit late to the party, but my issue was that I had set the NODE_ENV=Production environment variable on my CI. When NODE_ENV is set the dev dependencies(where the ts-node was listed) won't be installed.
Removing NODE_ENV fixed the issue.
I removed it from dev dependencies and added it to dependencies. That solved the problem for my case.

How do I deploy my Typescript Node.js app to Heroku?

When testing locally I was previously running:
"build-live": "nodemon --exec ./node_modules/.bin/ts-node -r dotenv/config -- ./index.ts"
I then figured my Procfile should be something like:
web: ./node_modules/.bin/ts-node -- ./index.ts
But it says module 'typescript' not found, even when it is in package.json. I read in a few places that ts-node is not the way to go to deploy to Heroku, so I am not sure what to do.
UPDATE: I think I am supposed to compile it, so I tried:
web: ./node_modules/.bin/tsc --module commonjs --allowJs --outDir build/ --sourceMap --target es6 index.ts && node build/index.js
This succeeds, however when actually running it, a bunch of the libs I'm using get "Cannot find module '...'".
Alternatively you can have the TypeScript compile as a postinstall hook and run node build/index.js as the only Procfile command:
Your package.json should contain a postinstall hint that gets executed after npm install and before the node process launches:
"scripts": {
"start": "node build/index.js",
"build": "tsc",
"postinstall": "npm run build"
}
You can then leave your Procfile as is:
web: npm start
This 'build on deploy' approach is documented by Heroku here.
The command you've given Heroku is to launch the web "process" by compiling index.ts and dependencies and starting node at index.js. Depending on how things are timed, index.js might or might not exist at the time node starts.
You need to already have your sources compiled by the time you want to start your app. For example, web should just be web: node index.js or similar.
Each build process is different, so you need to figure that out for your own setup. But, suppose you have a classical setup where you push to git and then Heroku picks up that change and updates the app with the new slug. You could just compile things locally and include index.js and any other build output in the repository, for it to be available in the slug for Heroku to use.
A better approach is to use a build server which has an integration with Heroku. After you do the build there, configure it to send the build results to Heroku. Travis has a straighforward setup like this. This way you don't need to include build outputs in your repository, which is considered an anti-pattern.
On a sidenode, try using a tsconfig.json to keep the tsc configuration. It will save you from having to write such long command lines all over the place.
Fabian said that we could do something like:
"scripts": {
"start": "node build/index.js",
"build": "tsc",
"postinstall": "npm run build"
}
As of me writing this, I tested this and can state: postinstall is not required since build script is ran by Heroku. If you want to do it without build script, then you can use heroku-postbuild which will run after dependencies are installed there you run tsc to compile.
My problem was about missing Typescript npm modules. The Typescript compiler tsc was not found when deployed the app to Heroku.
The Heroku deploy process (rightly) does not install development dependencies, in my case the Typescript module was part of devDependencies and thus the tsc command was not running on the Heroku platform.
Solution 1
Add typescript to dependencies: npm i typescript -s
Solution 2
Open Heroku console:
Select console type:
Run the command npm i typescript && npm run tsc
Install typescript as a dev dependency (cf. https://www.typescriptlang.org/download). Once built, your app does not need typescript anymore!
npm install -D typescript
Then in your package.json:
{
"main": "index.js", // <- file will be generated at build time with `tsc`
"scripts": {
"build": "tsc",
"start": "node ."
"start:dev": "ts-node index.ts" // idem, install ts-node as a dev dependency
}
}
The key point here is "build": "tsc".
Why?
Heroku does install all dependencies during build and remove the dev dependencies before the app is deployed (source here).
Node.js deployments will automatically execute an app’s build script during build (since March 11. 2019 source here)
In package.json
"scripts": {
"tsc": "./node_modules/typescript/bin/tsc",
"postinstall": "npm run tsc"
},
Works for me for Heroku deployment.
Installing typescript npm install -D typescript and writing tsc in the build script "build": "tsc", does not work for me. Also, try to run npm i typescript && npm run tsc in the Heroku console which also does not work.
In my case, I remove some dependencies from "devDependencies" to "dependencies", so it goes like this:
"dependencies": {
// The other dependencies goes here, I don't touch them.
// But all TS dependencies I remove to here.
"ts-node": "^9.1.1",
"tsconfig-paths": "^3.9.0",
"typescript": "^4.2.3",
"ts-loader": "^8.0.18"
},

Run npm scripts using local deps

Currently I run npm scripts using local deps this way:
package.json:
"scripts": {
"test": "node ./node_modules/karma/bin/karma start",
"node-test": "node ./node_modules/jasmine/bin/jasmine",
"build": "node ./node_modules/gulp/bin/gulp build"
},
I don't want to use global deps, since I can forgot to add deps to the package.json. This way when a local dep is missing, then I got an error message and I don't have problems because some deps are not installed globally, e.g. karma plugins.
Is there a better (shorter) way to define npm scripts using the local libs? Is this travis compatible?
edit:
If it wasn't obvious I have the same libs installed globally, but I want to use the local installs by these projects. That means when I start karma with karma start then the globally installed version will start the karma server, which means that if I don't have all of the karma plugins globally installed, then I got error.
Another problem that I have windows, so the solutions described here: How to use package installed locally in node_modules? do not work. Windows does not recognize the #!/bin/sh and the #!/usr/bin/env node head sections and there is no sh command as far as I can tell. At least not in webstorm terminal. Git bash has the sh command, but I want to run these npm scripts from webstorm terminal.
One possible solution could be to fix somehow webstorm so it could use sh from terminal. After that I could use $(npm bin) I assume. But that's just a guess. I am not sure whether this can be done.
npm automatically puts prepends the path ./node_modules/.bin to your PATH env before it executes commands run by using npm run (including the two "magic" shortcuts npm start and npm test)
npm scripts docs
You can just set this up with:
"scripts": {
"test": "karma start",
"node-test": "jasmine",
"build": "gulp build"
}
Assuming that you have karma, jasmine and gulp-cli listed in either your devDependencies or dependencies (so that they're install when doing npm install)
And yes, it is travis-compatible. Here is an example of a package that is tested on travis using tap which is installed locally as a module:
https://github.com/scriptoLLC/couchdown/

Resources