Develop Reference

Error while running "npm start": 'next' is not recognized as an internal or external command,

I am having this error while running "npm start" command on terminal as I am trying to build a cryptocurrency tracker using React.js
my package.json file
{
"name": "nextjs-crypto-api",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "11.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"webpack": "^5.51.1"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.0"
},
"description": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).",
"main": "next.config.js",
"author": "",
"license": "ISC"
}
Error:-
'next' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nextjs-crypto-api#0.1.0 start: next start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nextjs-crypto-api#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\LENOVO\AppData\Roaming\npm-cache_logs\2021-08-20T16_58_19_379Z-debug.log
Please help me with this error

Please read your WARNING first
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
That means you are trying to run the project without installing the node_modules beforehand.
So, you should be doing - first
npm i
and then
npm start

Seems like the issue with modules. I am not sure but try deleting your package-lock.json file and node_modules folder and then try below commands:
npm cache clean --force
and then again run
npm i or npm install

Same issue here until I realized I had an outdated version of Node.js installed.
Make sure to install the latest version of Node.js, then delete both the node_modules folder and package-lock.json file in your project.
Reinstall the node_modules:
npm install
Then run it using:
npm run dev
The above command is different from npm start because you're using Next.js

You should check your dependencies thoroughly, as they are compatible depending on the version of "devDependencies" that is being used. If you are using an outdated version and wish to update to a recent version, it could be the possible cause of your error. Review your package.json file and verify the dependencies. It could be helpful to review your git log and then run
npm install
or
"npm i"
to ensure all dependencies are properly updated.
You can use the "git diff" command in the terminal to view the changes made to a specific file. For example, if you want to see the changes made to the file "example.txt", you can run the command
git diff package.json
Recently, I encountered this problem but I was able to resolve it by carefully reviewing my dependencies and checking which versions were being used. By comparing the versions in my package.json
Here I am showing you the solution that I could give to my project which presented a similar case.
I would recommend checking each of the dependencies necessary for your project.

I have downloaded syncfusion, I don't know how to run syncfusion demo code . Please, anyone, know about it. this error occur

I have downloaded syncfusion, I don't know how to run syncfusion demo code . Please, anyone, know about it.
this error occur:
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
diagrambuilder#0.1.0 start: react-scripts-ts start npm ERR! Exit
status 1 npm ERR! npm ERR! Failed at the diagrambuilder#0.1.0 start
script. npm ERR! This is probably not a problem with npm. There is
likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\Ayushi\AppData\Roaming\npm-cache_logs\2021-01-29T10_14_59_748Z-debug.log

In package.json, you need to specify a start script like so:
"scripts": {
"start": "<START CODE GOES HERE>"
},

We have checked the customer requirements and he need to add the script in package.json file. Please find the below code snippet.
"scripts": {
"start": "react-scripts start"
},
We have created the react sample for your reference. Please find the below link.
Sample: https://www.syncfusion.com/downloads/support/directtrac/313051/7z/react115349736

Webpack config error with html-webpack-plugin for creating index.html

I'm trying some POC with webpack for bundling project JS files.
I want to create an index.html file under output dist folder via webpack. For this purpose as per webpack documentation, installed "html-web-plugin" via npm as :
npm install --save-dev html-webpack-plugin
It updates in package.json file as below:
"devDependencies": {
"html-webpack-plugin": "^4.3.0"
}
Used this plugin in webpack.config.js as per documentation of webpack:
const HtmlWebpackPlugin = require('html-webpack-plugin');
And inside config object:
plugins: [
new HtmlWebpackPlugin(
title: 'Output Management'
)
],
To run npm scripts, used below code in package.json file:
"scripts": {
"devNoServer": "webpack --d --watch",
"dev": "webpack-dev-server",
"build": "webpack -p",
"test": "echo \"Error: no test specified\" && exit 1"
},
On running npm run dev OR npm run build command, getting below error which seems related to html-web-plugin:
/<PROJECT_PATH>/node_modules/webpack-dev-server/bin/webpack-dev-server.js:373
throw e;
^
TypeError: Cannot read property 'make' of undefined
at PersistentChildCompilerSingletonPlugin.apply (/<PROJECT_PATH>/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:182:20)
at new CachedChildCompilation (/<PROJECT_PATH>/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:68:44)
at HtmlWebpackPlugin.apply (/<PROJECT_PATH>/node_modules/html-webpack-plugin/index.js:92:33)
at Compiler.apply (/<PROJECT_PATH>/node_modules/tapable/lib/Tapable.js:375:16)
at webpack (/<PROJECT_PATH>/node_modules/webpack/lib/webpack.js:33:19)
at startDevServer (/<PROJECT_PATH>/node_modules/webpack-dev-server/bin/webpack-dev-server.js:367:16)
at /<PROJECT_PATH>/node_modules/webpack-dev-server/bin/webpack-dev-server.js:358:5
at /<PROJECT_PATH>/node_modules/portfinder/lib/portfinder.js:196:16
at /<PROJECT_PATH>/node_modules/async/dist/async.js:473:16
at replenish (/<PROJECT_PATH>/node_modules/async/dist/async.js:1006:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-sample-broken#1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-sample-broken#1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /<USER_DIR>/.npm/_logs/2020-06-17T14_50_38_388Z-debug.log
Without using "html-webpack-plugin", npm run dev OR npm run build command works fine and create bundle.js in dist folder.
Is there something I'm doing wrong for using "html-webpack-plugin"?? I'm unable to find this error and it's fix anywhere.
Any input/ solutions will be really helpful.

Ok after hours of looking here and there, reading loads of documentation.This worked for me.
I was using this "html-webpack-plugin": "^4.3.0"
So I reverted back to using html-webpack-plugin#2.24.1 and the make command worked.
Dont know for sure but could be version's issue.

npm caching issue- did not rebuild

I'm using Laravel 5.4 with vue.js . Then i had syntax error between created and methods. I forgot , then i fix this error.
But still the error continue.
<script>
export default {
data(){
return {
users: []
}
},
created(){
this.fetchUsers();
},//forgotten
methods:{ //41.line
fetchUsers(){
this.$http.get('/users').then(response => {
this.users = response.data.users;
});
}
}
}
</script>
I was restarted apache.But still have this error if i write "npm run dev" or "npm run watch".
error in ./resources/assets/js/components/Users.vue
Syntax Error: Unexpected token, expected , (41:4)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ubuntu/.npm/_logs/2017-07-11T08_13_41_572Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ubuntu/.npm/_logs/2017-07-11T08_13_41_618Z-debug.log
EDIT
I listen your advice and applied.I mean the problem is not relevant syntax mistake.The problem is old code execute insead of new code.I saved all file and then "npm run dev" but return same error everytime.

Even I got the same error- A complete log of this run can be found in:
The problem is with the port number, go to package.json file and change the port number to anything you want, say 8000. For example:
"scripts": {
"build": "webpack --config webpack.prod.js --progress",
"watch": "npm run build -- --watch",
"server": "webpack-dev-server --inline --progress --port 8000 --content-base src",
"start": "npm run server"
}
Earlier the port number was 3000, and on npm start different application use to render on port 3000 so for my new application I gave port number 8000. Now I can have two different application on different ports (localhost:3000 and localhost:8000) without getting error.

How to propagate npm script command line arguments?

My package.json has few scripts defined in this manner.
{
"name": "project",
"scripts": {
"standard": "./node_modules/.bin/standard",
"lint": "npm run standard",
"lint:fix": "npm run lint -- --fix"
}
}
When I execute $ npm run lint:fix I find that the argument --fix does not propagate to ./node_modules/.bin/standard. This is the output that I get.
bash-3.2$ npm run lint:fix
> project#0.0.1 lint:fix /path/to/my/project
> npm run lint -- --fix
> project#0.0.1 lint /path/to/my/project
> npm run standard "--fix"
> project#0.0.1 standard /path/to/my/project
> standard
standard: Use JavaScript Standard Style (http://standardjs.com)
standard: Run `standard --fix` to automatically fix some problems.
/path/to/my/project/data/someFile.js:38:34: Extra semicolon.
npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "standard" "--fix"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
Here there's an error because --fix argument didn't propagate correctly.
Well, my question is not around linting or standardJs. I would like to know how to get the arguments propagate correctly till the top level script.

Well, this is what I found after sweating a lot on this issue. (It is very silly, though).
The error was caused not because the argument didn't propagate. Instead, it was because the --fix flag in standard doesn't auto-fix the semicolon issues during linting.
In the given set of scripts (in the question). The argument successfully propagated. Therefore, that's the way to propagate arguments till the top level script.

You shouldn't need a double -- -- in your npm script.
Your lint:fix script should be: "npm run lint --fix"