Develop Reference

Cannot create a new React application with create-react-app

I encountered this problem when creating a new React application (after executing the npx create-react-app my-app command):
➤ YN0000: ┌ Resolution step
node:internal/process/promises:246
triggerUncaughtException(err, true /* fromPromise */);
^
_r [RequestError]: read ECONNRESET
at ClientRequest.<anonymous> (/home/aldaspan/.yarn/releases/yarn-3.1.1.cjs:154:14361)
at Object.onceWrapper (node:events:510:26)
at ClientRequest.emit (node:events:402:35)
at ClientRequest.o.emit (/home/aldaspan/.yarn/releases/yarn-3.1.1.cjs:149:59453)
at TLSSocket.socketErrorListener (node:_http_client:447:9)
at TLSSocket.emit (node:events:390:28)
at emitErrorNT (node:internal/streams/destroy:164:8)
at emitErrorCloseNT (node:internal/streams/destroy:129:3)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
at TLSWrap.onStreamRead (node:internal/stream_base_commons:211:20) {
code: 'ECONNRESET',
timings: {
start: 1639471914529,
socket: 1639471914529,
lookup: 1639471914530,
connect: 1639471922067,
secureConnect: undefined,
upload: undefined,
response: undefined,
end: undefined,
error: 1639471922468,
abort: undefined,
phases: {
wait: 0,
dns: 1,
tcp: 7537,
tls: undefined,
request: undefined,
firstByte: undefined,
download: undefined,
total: 7939
}
}
}
Node.js v17.2.0
Aborting installation.
yarnpkg add --exact react react-dom react-scripts cra-template --cwd /home/aldaspan/galog/react-shop has failed.
Deleting generated file... package.json
Deleting generated file... yarn.lock
Done.
Operating system: Ubuntu 21.10,
Node -v: v17.2.0,
nodejs --version: v12.22.5,
npm -v: 8.1.4
I am new to React, and I have been looking for this problem for several days, but I haven't found a real solution yet.
After lowering the Node (sudo n 16.13.1) version, it prompts other errors:
YN0000: Done with warnings in 5m 4s
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'react-scripts/scripts/init.js'
Require stack:
- /home/aldaspan/react-shop/[eval]
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at [eval]:2:20
at Script.runInThisContext (node:vm:129:12)
at Object.runInThisContext (node:vm:305:38)
at node:internal/process/execution:75:19
at [eval]-wrapper:6:22
at evalScript (node:internal/process/execution:74:60) {
code: 'MODULE_NOT_FOUND',
requireStack: [ '/home/aldaspan/react-shop/[eval]' ]
}
Aborting installation.
node has failed.
Deleting generated file... package.json
Deleting generated file... yarn.lock
Done.

First make sure you are using the recommended version of nodejs. And for that you could use the n package from npm:
npm install n -g
n stable
// if one of the above commands does not pass, you could make use of sudo
sudo npm install n -g
sudo n stable
If you have installed globally create-react-app, which you shouldn't since we now use npx,
go ahead and remove it:
npm uninstall -g create-react-app
// if it does not pass, you could make use of sudo
sudo npm uninstall -g create-react-app
After fallowing the above steps, delete the project you attempted to create and start over with:
npx create-react-app my-app

Can't start webpack development server

I am new on es6. I followed a blog Beginner’s Guide To Setup ES6 Development Environment. I completed all of the process step-by-step. Then the step comes up to install the webpack development server. Then I write this code to cmd - npm run build. I get this error:
λ npm run build
-> jj#1.0.0 build C:\Users\galib\Desktop\jj
-> webpack-dev-server
The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:888
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\galib\AppData\Roaming\npm\node_modules\webpack-dev-server\bin\webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
at Function.Module._load (internal/modules/cjs/loader.js:730:27)
at Module.require (internal/modules/cjs/loader.js:957:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (C:\Users\galib\AppData\Roaming\npm\node_modules\webpack-dev-server\bin\web
at Module._compile (internal/modules/cjs/loader.js:1068:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
at Module.load (internal/modules/cjs/loader.js:933:32)
at Function.Module._load (internal/modules/cjs/loader.js:774:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\galib\\AppData\\Roaming\\npm\\node_modules\\webpack-dev-server\\bin\\webpack-dev-serv
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jj#1.0.0 build: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jj#1.0.0 build 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\galib\AppData\Roaming\npm-cache\_logs\2021-06-08T18_22_59_337Z-debug.log

The article you read was probably written before Webpack's cli was moved to webpack-cli, so you might need one small extra step.
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
Run npm i -D webpack-cli and then you can use the Webpack CLI.

Unable to run NextJS based node server on AWS EC2 instance

I have tried to run my node server multiple times I am getting this error, for this I tried to delete .next folder and build again after build complete it throws same error. It is running perfectly on my local machine.
`Could not find a valid build in the '${this.distDir}' directory! Try building your app with 'next build' before starting the server
Error: Could not find a valid build in the '/root/only4laughproject/.next' directory! Try building your app with 'next build' before starting the server.
at Server.readBuildId (/root/only4laughproject/node_modules/next-server/dist/server/next-server.js:435:23)
at new Server (/root/only4laughproject/node_modules/next-server/dist/server/next-server.js:44:29)
at module.exports (/root/only4laughproject/node_modules/next-server/index.js:4:10)
at module.exports (/root/only4laughproject/node_modules/next/dist/server/next.js:2:161)
at Object.<anonymous> (/root/only4laughproject/server.js:9:13)
at Module._compile (node:internal/modules/cjs/loader:1109:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
here is my package.json script
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "npm run-script build && cross-env NODE_ENV=production node server.js",
"go": "cross-env NODE_ENV=production node server.js"
}

on doing npm start command it is running next build command before project build finish it starts my server.js that's why this problem occur, I tried next build after build complete I hit node server.js. It resolve my issue.

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 run dev command does not work on vuejs' hackernews example

I am trying to run the vue-hackernews-2.0 example from vuejs' github repository
In setup section it explains how to install the project:
# install dependencies
npm install # or yarn
# serve in dev mode, with hot reload at localhost:8080
npm run dev
# build for production
npm run build
# serve in production mode
npm start
I did npm install. After changing the port to 8888 in server.js I typed "npm run dev" on command line.
> vue-hackernews-2.0# dev D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master
> node server
server started at localhost:8888
DONE Compiled successfully in 16328ms 1:02:18 PM
DONE Compiled successfully in 17845ms 1:02:19 PM
webpack built bd162a76119031a85eed in 17845ms
When I go localhost:8888 It will just try to load for 1 min and then it fails, without anything on the console.
I thought I should also try "npm run build" and "npm start" so I also used two commands. "npm run build" successfully created the dist file.
But after "npm start" I get this error:
> vue-hackernews-2.0# start D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master
> cross-env NODE_ENV=production node server
module.js:471
throw err;
^
Error: Cannot find module './dist/vue-ssr-server-bundle.json'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\server.js:41:18)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
events.js:160
throw er; // Unhandled 'error' event
^
Error: spawn node ENOENT
at notFoundError (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\node_modules\cross-spawn\lib\enoent.js:11:11)
at verifyENOENT (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\node_modules\cross-spawn\lib\enoent.js:46:16)
at ChildProcess.cp.emit (D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\node_modules\cross-spawn\lib\enoent.js:33:19)
at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "D:\\Users\\212399486\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.11.2
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! vue-hackernews-2.0# start: `cross-env NODE_ENV=production node server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-hackernews-2.0# start script 'cross-env NODE_ENV=production node server'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-hackernews-2.0 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cross-env NODE_ENV=production node server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-hackernews-2.0
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue-hackernews-2.0
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\Users\212399486\WebstormProjects\vue-hackernews-2.0-master\npm-debug.log
Screenshot of dist folder:
package.json scripts:
"scripts": {
"dev": "node server",
"start": "cross-env NODE_ENV=production node server",
"build": "rimraf dist && npm run build:client && npm run build:server",
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules",
"build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
},

Requires Node.js 7+
I managed to make it work without any problems.
$node -v
v8.3.0
$npm -v
5.3.0
Change the default port successfully :
To change the default port you have to edit package.json scripts:
dev: cross-env PORT=8888 node server
start: cross-env PORT=8888 NODE_ENV=production node server
Then running npm run dev
> vue-hackernews-2.0# dev /home/emx/so/vue-hackernews-2.0
> cross-env PORT=8888 node server
server started at localhost:8888

you are using a version of node that is not supported. Your error point to node v6.11.2 see below.
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "D:\\Users\\212399486\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.11.2
npm ERR! npm v3.10.8
vue-hackernews-2.0 requires Node.js 7+. Upgrade your node to a 7+ version and you should be fine. I'll also recommend to update your npm version.
See the answers to this question for details about how to update your node version, if you need instructions.