I am new to reactjs and trying to run code but showing error. I m not getting proper solution about this error.
I newly install reactjs , node js and running first time on xampp localhost. I tried
npm install #babel/core --> this installed #babel/core 7.4.4
npm install babel-core --save-dev --> this set babel/core to 6.26
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.4.1"
},
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0"
}
}
I already run npm command from command prompt to update babel/core and expecting upgradation but every time same version and showing error.
highlighted area in image with blue color is main error to solve
its not an option for you to use react from cdn?
https://reactjs.org/docs/cdn-links.html
How you are a rookie, i recommend to use cdn and "web server for chorme", chorme extention. After get some experience you can jump to node stuff.
Related
i'm new with node, i have to deploy my first application.
this is my package.json:
{
"name": "tbcw",
"description": "TheBestCollectors",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"truffle-compile": "truffle compile",
"truffle-serve": "truffle serve",
"truffle-test": "truffle test --network test"
},
"dependencies": {
"vue": "^2.4.4",
"vue-draggable-resizable": "^1.5.1",
"vuex": "^2.4.1",
"web3": "^1.2.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.7.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"ejs": "^2.5.7",
"ejs-compiled-loader": "^2.2.0",
"eslint": "^4.8.0",
"ethereumjs-testrpc": "^4.1.3",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.7",
"node-sass": "^4.9.4",
"null-loader": "^0.1.1",
"sass-loader": "^5.0.1",
"truffle": "^3.4.11",
"truffle-contract": "^1.1.6",
"vue-loader": "^12.1.0",
"vue-template-compiler": "^2.4.4",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.9.1"
}
}
in local with dev mode everything works correctly.
Now I would like to publish my app on heroku.
after uploading the files with herokuCLI, when i run the app, I get an error page.
reading them via the command "heroku logs --tail"
based on different attempts i got different errors, like webpack not found, start script not found, cross-env not found...
how can i proceed?
Please let me know if you need more info.
thank you for all the replies
Looking at your package.json, it seems your are working on a client-side application. Such applications run in the client's browser, rather than in Node. Heroku is for running server-side applications, so it's probably not the right place to deploy your app.
Take a look at something like Vercel or Netlify instead. They provide tools to automatically build and deploy client-side applications to edge networks with only a few clicks.
Heroku, by default, doesn't install devDependencies. It seems your cross-env and webpack are listed as devDependencies. And you don't even have a start script.
I continue to have issues deploying to Heroku and I can't find out what is going wrong for the life of me. The Heroku error log tells me this after it successfully builds my react app:
-----> Caching build
- node_modules
-----> Pruning devDependencies
npm ERR! Cannot read property 'match' of undefined
Here is my package.json
{
"name": "test",
"version": "1.0.0",
"homepage": "./",
"description": "test",
"main": "server.js",
"node": "v12.13.1",
"npm": "6.13.7",
"scripts": {
"heroku": "node server.js",
"client-install": "npm install --prefix client",
"build": "cd client && react-scripts build",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "John Doe",
"license": "MIT",
"dependencies": {
"#material-ui/core": "^4.8.0",
"axios": "^0.19.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"classnames": "^2.2.6",
"concurrently": "^5.1.0",
"date-fns": "^2.8.1",
"debug": "^4.1.1",
"depcheck": "^0.9.1",
"eslint-plugin-flowtype": "^4.6.0",
"express": "^4.16.4",
"fibers": "^4.0.2",
"growl": "^1.10.5",
"heroku": "^7.35.1",
"history": "^4.10.1",
"is-empty": "^1.2.0",
"jquery": "^3.4.1",
"jsonwebtoken": "^8.3.0",
"jwt-decode": "^2.2.0",
"material-table": "^1.54.2",
"material-ui": "^0.20.2",
"minimatch": "^3.0.4",
"moment": "^2.23.0",
"mongodb": "^3.5.3",
"mongoose": "^5.8.9",
"mongoose-global": "^1.0.1",
"morgan": "^1.9.1",
"node-sass": "^4.13.0",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"plaid": "^4.6.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-ga": "^2.7.0",
"react-plaid-link-button": "0.0.4",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"react-slick": "^0.25.2",
"react-stripe-elements": "^6.0.1",
"react-vis": "^1.11.7",
"redux-thunk": "^2.3.0",
"sass": "^1.24.0",
"slick": "^1.12.2",
"slick-carousel": "^1.8.1",
"typescript": "^3.7.4",
"update-mongo": "0.0.4",
"validator": "^12.2.0",
"vis": "^4.21.0-EOL"
},
"devDependencies": {},
"engines": {
"node": "12.x"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
What is perhaps most frustrating, is that I was able to deploy successfully once the other day but I am not sure what changed. Going back through my git I can't see anything that would have made any difference.
Things I have tried:
removing package.json
adding "devDependencies": {} to my package.json (although I
deployed successfully without it)
updating node and adding the engines section to my package.json to
match.
running npm prune locally
ensuring that all packages are updated and referenced appropriately in package.json
Things that I suspect could be the issue:
Maybe somehow the current version of my app that is actively deployed on heroku is interfering with my new deployment? That being said i have tried scaling down dynos and deploying. Additionally the npm ERR! Cannot read property 'match' of undefined seems to indicate something else?
Just run into this after my deploys inexplicably started failing after a number of successful ones.
Stopping heroku from caching node_modules seemed to do the trick for me.
heroku config:set NODE_MODULES_CACHE=false
Then git push heroku master
I don't have package-lock.json committed after hearing Heroku doesn't get on well with lockfiles, but wondering if that's the problem.
Please rm -rf node_modules && npm i
also be sure to track package-lock.json file
And as long as you are there, is not related but may be a good idea to add a .nvmrc file
node -v >> .nvmrc
Let us know if it helped
In the scripts section in package.json, only keep the start key and remove others.
Your scripts in the package.json should be,
"scripts": {
"start": "node server.js"
},
Also before deployment, build the react app manually.
Heroku messed up with all these build scripts.
So I'm working on some projects within my work space and I notice that a lot of my dependencies are roughly 3 years old, including React itself. The thing I'm worried about is that if I run npm install or npm update that things might break and I could run into a plethora of issues. In my scenario I would like to know if it is better for me to do an npm install, npm update, or just leave it the way it is? (which I'm sure no one would recommend).
Here is our package.json file
{
"name": "my-app",
"version": "0.0.2",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "node src/entry",
"start-dev": "npm-run-all --parallel build babel-node",
"serve": "live-server public/",
"build-linux": "clear && webpack && clear && yarn build-server && clear && yarn start",
"build-windows": "cls && webpack && cls && yarn build-server && cls && yarn start",
"build-server": "babel src/server -d src",
"dev-server": "webpack-dev-server",
"babel-node": "nodemon --exec babel-node src/server.js"
},
"dependencies": {
"aws-sdk": "^2.358.0",
"axios": "^0.19.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "7.1.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"core-js": "^2.5.3",
"css-loader": "0.28.4",
"express": "latest",
"file-loader": "^1.1.5",
"fs": "0.0.1-security",
"google-maps-react": "^1.1.4",
"html2canvas": "^1.0.0-rc.3",
"image-webpack-loader": "^4.6.0",
"immutability-helper": "^2.4.0",
"jquery": "^3.4.1",
"jsonwebtoken": "^8.1.0",
"jspdf": "^1.5.3",
"lodash": "^4.17.14",
"moment": "^2.22.2",
"node-sass": "^4.11.0",
"nodemailer": "^4.7.0",
"normalize.css": "7.0.0",
"npm": "^6.10.1",
"promise-mysql": "^3.1.0",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-csv": "^1.0.14",
"react-dom": "^16.0.0",
"react-router-dom": "4.2.2",
"react-scripts": "^2.1.3",
"sass-loader": "6.0.6",
"socket.io": "^2.0.3",
"style-loader": "0.18.2",
"table2csv": "^1.1.1",
"twilio": "^3.24.0",
"validator": "8.0.0",
"webpack": "^3.12.0",
"webpack-dev-middleware": "^3.5.0",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"concurrently": "^3.5.0",
"npm-run-all": "^4.1.1"
}
}
I already tried updating my react and react-dom versions to the latest, but I started getting warnings about componentWillMount and componentWillReceiveProps being outdated. I tried updating react-router-dom to get rid of some of those warnings, considering they were pointing to things like Link, Route, Switch, but that did not suppress them.
If anyone knows what the best way for me to go about this would be, and what the effects of npm install vs npm update would do to my system that would be great. I know what each of them is capable of doing, but I'm just trying to be cautious and want to know which one would be better in my scenario. Thanks.
When you run npm install on a project, npm installs latest versions satisfying the semantic versioning ranges defined in your package.json. After initial install, re-running npm install does not update existing packages since npm already finds satisfying versions installed on the file system.
When you run npm update it freshen already installed packages. When you run npm update, npm checks if there exist newer versions in the repository that satisfy specified semantic versioning ranges and installs them.
I would say "bite the bullet" and update them to latest. It will be a tedious task but if you are looking to maintain this for longer run, it is your best bet.
Updating stuff can break things or some dependencies will be deprecated after an update. I would not update anything unless it is necessary.
I am trying to package my app with electron-packager. My app have as dependencies sqlite3 and sequelize.
here is my package.json file :
{
"name": "electronjs_base",
"version": "1.0.0",
"description": "Projet de base Electron JS",
"main": "main.js",
"scripts": {
"start": "electron main.js",
"test": "echo \"Error: no test specified\" && exit 1",
"postinstall": "install-app-deps",
"rebuild": "electron-rebuild -f -w sqlite3"
},
"author": "Aurélien Colombet & Steven Servanton",
"license": "ISC",
"devDependencies": {
"electron": "^4.0.3",
"electron-builder": "^20.38.5",
"electron-packager": "^13.0.1",
"electron-rebuild": "^1.8.2"
},
"dependencies": {
"cors": "^2.8.5",
"ejs": "^2.6.1",
"electron-reload": "^1.4.0",
"express": "^4.16.4",
"formidable": "^1.2.1",
"fs": "0.0.1-security",
"path": "^0.12.7",
"sequelize": "^4.42.0",
"sqlite3": "^4.0.6"
}
}
I am on linux and I am trying to build my app for windows. I use electron-packager for that, with that command :
electron-packager . gamemaster_interface --overwrite --platform=win32 --arch=x64 --out=release-builds
My app works well on linux when I launch it with npm run start, but when I am trying to run it on windows with the executable file created by electron-packager I have a javascript error :
I don't know how to solve that problem, I have trying multiple things like adding sqlite3 in devDependencies instead of dependencies in the package.json but I still have the error.
Thank you for reading me and I hope someone have the solution :).
Have a nice day !
i have a react project with the following package.json :
{
"name": "commonsensev2.0",
"version": "0.1.0",
"private": true,
"homepage": "http://localhost:9080/server/react",
"dependencies": {
"all": "0.0.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"chart.js": "^2.7.3",
"moment": "^2.23.0",
"node-sass-chokidar": "0.0.3",
"npm-run-all": "^4.1.5",
"popper.js": "^1.14.6",
"react": "^16.7.0",
"react-bootstrap": "^0.31.5",
"react-bootstrap-table": "^4.3.1",
"react-chartjs2": "^1.2.1",
"react-dom": "^16.7.0",
"react-localize-redux": "^2.17.5",
"react-moment": "^0.7.9",
"react-redux": "^5.1.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.0.14",
"redux": "^3.7.2"
},
"scripts": {
"build-css": "node-sass-chokidar src/sass/App.scss -o src/css/",
"watch-css": "npm run build-css && node-sass-chokidar src/sass/App.scss -o src/css/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"postbuild": "((ROBOCOPY build ../react /MIR) ^& if %ERRORLEVEL% lss 8 set ERRORLEVEL = 0)",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"bootstrap-toggle": "^2.2.2",
"datatables.net": "^1.10.19",
"numeral": "^2.0.6"
}
}
when i do npm run build i cannot see the changes on the html pages, i m using node 8.11.1 i downgraded it because i found somewhere that it maybe the reason why it does not work i'm also using "node-sass-chokidar": "0.0.3"
and the backend is a java server
I had the same issue, I deleted the old build folder on my local environment and ran npm run build again to generate a new build folder.
Just a wild guess here but I think you are running the wrong command. Because build is typically when you want to build code for a purpose like putting it on a server.
What you need to do is to npm run start, as that has the watch, that watches for changes and updates.
Just a minor thing, I would rename the start script to dev or serve. Generally more used I would say.