I cannot configure my package.js file for ReactJS - reactjs

I type "npm start" in command prompt and there is an error
This is the error:
Insufficient number of arguments or no entry found. Alternatively, run
'webpack(-cli) --help' for usage info.
And this is the code in my package.json file:
{
"name": "reactredux",
"version": "1.0.0",
"description": "React",
"main": "index.js",
"scripts": {
"start": "npm run build",
"build": "webpack -d && copy src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
"build:prod": "webpack -p && copy src/index.html dist/index.html"
},
"keywords": [
"react"
],
"author": "NikolaMilicevic",
"license": "MIT",
"dependencies": {
"babel-loader": "^8.0.6",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"webpack": "^4.41.6",
"webpack-dev-server": "^3.10.3"
},
"devDependencies": {
"webpack-cli": "^3.3.11"
}
}

Related

unable to fix the Error: Cannot find module 'webpack-cli/bin/config-yargs'

here is my package.json installed package while setup.
while setup new application it say this error.
its new react application and all the versions are latest.
{
"name": "front-end",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"repository": {
"type": "git",
"url": "git+https://github.com/infinitydots-cn/front-end.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/infinitydots-cn/front-end/issues"
},
"homepage": "https://github.com/infinitydots-cn/front-end#readme",
"keywords": [],
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.22.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.2.2",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^5.1.0"
}
}

tiny-warning : "Uncaught Error: Module build failed: Error: ENOENT: no such file or directory"

I just started a new project using React with Webpack. I keep getting the same error when serving the app.
Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:\workwork\apol2\apol2\node_modules\webpack\buildin\global.js'
at Object. (tiny-warning.esm.js:20)
at webpack_require (bootstrap 73c6a5b3e608efed68ac:19)
at Object. (scheduler.development.js:699)
at webpack_require (bootstrap 73c6a5b3e608efed68ac:19)
at Object. (index.js:6)
at Object. (index.js:7)
at webpack_require (bootstrap 73c6a5b3e608efed68ac:19)
at react-dom.development.js:21
at Object. (react-dom.development.js:21277)
at Object. (react-dom.development.js:21278)
This is not a package I installed and I don't know where to begin to debug this.. Could it be one of the package I use?
{
"name": "demo",
"version": "1.0.0",
"description": "",
"scripts": {
"build": "babel ./app -d build",
"build:watch": "babel ./app -d build --watch",
"build:client": "webpack --config ./webpack.config.js/",
"build:watch:client": "webpack --config ./webpack.config.js/ --watch",
"build:prod": "npm run build && npm run build:client",
"start": "npm run build:prod && NODE_ENV=production node ./build/server/index.js",
"start:dev": "parallelshell \"npm run build:watch\" \"npm run build:watch:client\" \"nodemon ./build/server/index.js\"",
"test": "jest --watch --coverage"
},
"author": "",
"license": "ISC",
"jest": {
"testMatch": [
"**/?(*.)+(spec|test).[jt]s?(x)"
],
"testPathIgnorePatterns": [
"/build/"
],
"modulePathIgnorePatterns": [
"/build/"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"setupFilesAfterEnv": [
"<rootDir>setupTests.js"
]
},
"dependencies": {
"#babel/cli": "^7.5.5",
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0",
"assert": "^2.0.0",
"axios": "^0.19.0",
"babel-loader": "^8.0.6",
"cors": "^2.8.4",
"express": "^4.15.3",
"fs": "0.0.2",
"html-webpack-plugin": "^3.2.0",
"https": "^1.0.0",
"mongodb": "^3.3.0-beta2",
"parallelshell": "^3.0.1",
"react": "^16.8.6",
"react-dom": "^16.10.2",
"react-router-dom": "^5.0.1",
"scheduler": "^0.16.2",
"webpack": "^4.41.1"
},
"devDependencies": {
"babel-jest": "^24.8.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"enzyme-to-json": "^3.3.5",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"jest": "^24.8.0",
"nodemon": "^1.11.0",
"react-test-renderer": "^16.8.6",
"supertest": "^4.0.2"
}
}
After deleting my folder node_modules several times between my tests, the error disapeared...
Webpack is not installed, make sure install webpack or do npm install

Got 500 error when deploying Next.js to Google Cloud

I deployed a next.js application to the App Engine Standard and I get 500 error. In StackDriver the error is "/bin/sh: 1: server.js: not found"
but server.js exists in the app:
I'm serving up my project on port 3000
Package.json is like this:
{
"name": "supplychain",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha",
"dev": "node server.js",
"start": "NODE_ENV=production server.js",
"transpile": "babel src -d dist --copy-files",
"prepublishOnly": "npm run transpile",
"build": "next build",
"deploy": "gh-pages -d examples/dist",
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/polyfill": "^7.2.5",
"fs-extra": "^7.0.1",
"ganache-cli": "^6.4.1",
"mocha": "^5.2.0",
"next": "^4.1.1",
"next-routes": "^1.4.2",
"radium": "^0.25.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"semantic-ui-react": "^0.82.5",
"solc": "^0.4.25",
"truffle-hdwallet-provider": "0.0.3",
"web3": "^1.0.0-beta.35"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.3.1",
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"npm-install-webpack-plugin": "^4.0.5",
"terser-webpack-plugin": "^1.3.0",
"uglifyjs-webpack-plugin": "v1.0.0-beta.1",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.2"
}
}
and app.yaml is like:
# [START app_yaml]
runtime: nodejs8
# [END app_yaml]
Can somebody help me find the problem?
Change this line:
"start": "NODE_ENV=production server.js",
To:
"start": "NODE_ENV=production node server.js",

How to run react application using webpack-dev-server?

when I run the command webpack-dev-server --open --mode development, I get the output as shown in the image. I don't know what to do? I have been stuck in this for a few hours now.
but when I prepare the building using the following command webpack --mode production and open the index.html file from dist folder it runs fine in the browser.
My package.json file
{
"name": "rapp",
"version": "1.0.0",
"description": "react app",
"main": "index.js",
"scripts": {
"start": "npm run build",
"build": "webpack-dev-server --open --mode development",
"build:prod": "webpack --mode production"
},
"keywords": [
"learning",
"react"
],
"author": "Rafay Hassan",
"license": "MIT",
"dependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"react": "^16.8.1",
"react-dom": "^16.8.1"
},
"devDependencies": {
"babel-loader": "^7.*",
"html-loader": "^0.5.5",
"html-webpack-plugin": "3.0.7",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
}
}

React with babel 7, babel 6 seem to be loading by some other dependency

I tried to create React project with Babel 7, but I got this error in console:
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you
are sure you have a compatible version of #babel/core, it is likely
that something in your build process is loading the wrong version.
Inspect the stack trace of this error to look for the first entry that
doesn't mention "#babel/core" or "babel-core" to see what is calling
Babel. (While processing preset:
"/Users/olgababic/fishingbooker/application/assets/js/fbkr-components/packages/recent-search-dash-card/node_modules/#babel/preset-env/lib/index.js")
I tried to instal #babel/register and babel-core#7.0.0-bridge.0 and adding:
"resolutions": {
"babel-core": "7.0.0-bridge.0"
}
But nothing seemed to help.
This is my package.json:
{
"name": "recent-search-dash-card",
"version": "1.0.0",
"description": "",
"main": "./dist",
"directories": {
"doc": "docs"
},
"scripts": {
"lib": "babel src/lib -d dist",
"lib:watch": "babel src/lib -w -d dist",
"docs": "webpack-dev-server --open",
"docs:prof": "webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.0.0",
"babel-loader": "^8.0.4",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2"
},
"resolutions": {
"babel-core": "7.0.0-bridge.0"
}
}
I solved this by installing #babelc/cli + finding in my package-lock.json which dependency installed version 6+

Resources