Starting React App from pulled github project - node.js

I've pulled a github repository containing code for a reactjs app into one of my directories but I can't find a way to run the app on my computer. I can start a new app using create-react-app but I can't/(don't know how to) use the existing app for instead ofa freshly created one.
I'm running Ubuntu 16.04.3 on a virtual machine, my node version is 4.2.6.
I've tried sudo apt-get install --only-upgrade nodejs but it simply says my node version is already up to date. (I include this because npm start gives me a bunch of errors and tells me that it may be because I might have to update node) but the app I create with create-react-app works fine?
The error:
Package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^3.3.7",
"express": "^4.16.2",
"package.json": "^2.0.1",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-bootstrap": "^0.31.5",
"react-dom": "^16.0.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.14",
"uuid": "^3.1.0",
"webpack": "^3.8.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1"
}
}

Carry out the following steps:
//Step 1:
git clone [repository url]
//Step 2:
cd [local repository]
//Step 3:
//Check package.json file and ensure scripts are notated as below:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
//Step 4:
/* Delete the node_modules folder and any 'lock' files such as
yarn.lock or package-lock.json if present.*/
//Step 5:
npm install
//Step 6:
npm start
To Note: There can be some conflict between yarn and npm when cloning from certain repositories. It's best to assume that every repo may need trimming before ultimately running npm install. I tested the above steps several times under several different factors. This is the best I have so far.

In case of issues shown after npm install, run the below to automatically fix the issues:
npm audit fix
Alternatively, use the below to see the errors:
npm audit

Related

React App: Failed to Compile. Module parse failed

Everytime I create React app and start the development server, I get this error. HELP!!!
Per this issue, it may be a problem with the react-scripts part of your library. So either use a specific, older version of create react app by running :
npx create-react-app#4.0.1 my-app
Or by running CRA as is, then modifying your package.json folder so that the react script version is specified.
So after you run CRA, change your package.json file like so:
{
"name": "myapp",
...
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "4.0.1" // change this line to 4.0.1
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
}
Then make sure you rm -rf node_modules then run npm install to get a fresh install that removes whatever react-scripts came by default so that you use the specific 4.0.1 version.

npm run build does not update the react components

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.

Module not found: Can't resolve '#babel/runtime/helpers/builtin/classCallCheck' from Material-Ui [duplicate]

on-rest my project was working great untill I delete my node_modules file and try to re-install npm package.
I am getting this error
./node_modules/react-event-listener/dist/react-event-listener.cjs.js
Module not found: Can't resolve '#babel/runtime/helpers/builtin/classCallCheck' in '/Users/suatkarabacak/Desktop/demarkedashboard/node_modules/react-event-listener/dist'
My package.json is looking like this.
{
"name": "demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"admin-on-rest": "^1.4.1",
"aor-dependent-input": "^1.2.0",
"aor-parseserver-client": "0.3.0",
"aor-rich-text-input": "^1.0.1",
"babel-runtime": "^6.26.0",
"parse": "^1.11.1",
"parse-react": "^0.5.2",
"prop-types": "^15.6.2",
"react": "^15.6.2",
"react-dom": "^15.6.2",
"react-image-lightbox": "^4.6.0",
"react-images": "^0.5.19"
},
"devDependencies": {
"#babel/runtime": "^7.0.0-beta.56",
"aor-color-input": "^1.2.1",
"babel-polyfill": "^6.23.0",
"react-scripts": "^1.1.4"
},
"homepage": "demo.html",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
There is no builtin folder.
What could be the problem ?
Since Babel 7.x is still a beta version, there was a breaking change in beta.56, which was released yesterday.
"#babel/runtime": "^7.0.0-beta.56",
If you're using a beta version of something, it is dangerous to use ^ in your version number, because that means it will accept any recent version, whether or not it is actually compatible with previous beta versions.
Since react-scripts uses https://github.com/facebook/create-react-app/blob/1407287839f94151cec729bd89441d4eee7d9dd3/packages/babel-preset-react-app/package.json#L28
"#babel/plugin-transform-runtime": "7.0.0-beta.46",
Your should likely have
"#babel/runtime": "7.0.0-beta.46",
in your own package.json to match.
In my case the problem was in relative paths and complex project structure, so that I had to specify exact location of my node_modules directory:
module.exports = {
resolve: {
modules: [
path.resolve(__dirname, "node_modules")
],
...
In case you are running into this because of your dependency on material-ui:
Looks like material-ui updated its package.json to reference '7.0.0-beta.42' instead of '^7.0.0-beta.42'
See Issue: 12409
If you want to use the 7.0.0-beta.56 version, the easiest solution is to create builtin/ folder manually inside helpers/ folder then, move or copy the contents of helpers folder inside helpers/builtin/ and you will not see this error message anymore.
In case you do have material ui in there, make sure you've installed all that you're importing like /icons,/core.

homepage entry in the package.json gving error

I am running react app in the nginx server by dockerizing it.
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.0.0-alpha.6",
"react": "^16.2.0",
"react-axios": "^2.0.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build-window": "react-scripts build && del ../server/dist && move build ../server/dist",
"build-linux": "react-scripts build && rm -rf ../server/dist && mv build ../server/dist",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"homepage": "/myapp/"
}
if i dont put homepage entry i am able to run locally but in the ngInx server, css and js files are giving 404.
below is the path it is taking without context path in ngInx server for css https://XXXXXXXXXXXXXXXX/static/css/main.9a46c0ad.css
If i put homepage entry , i am getting "Uncaught SyntaxError: Unexpected token <" error . But in the network tab i see all the js and css files are loading properly..
Can you please help me, which area i have to concentrate to resolve this issue
Don't put your context root in the package.json. When you build the app you can give the the base-href in your build script. Add --base-href=/myapp/ in your build script. This will add the base href in your index.html

react-native multiple npm warn and problems and its crash my app

Here I am having a little addiction problem with reaction-native since yesterday................
it completely blocks me from navigating to certain screens etc.
Here is a copy of package. json:
{
"name": "test2",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.7.0",
"jest-expo": "^22.0.0",
"react-test-renderer": "16.0.0-beta.5"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^22.0.2",
"mobx-react": "^4.3.4",
"react": "16.0.0-beta.5",
"react-native": "^0.49.5",
"react-native-elements": "^0.18.2",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-native-router-flux": "4.0.0-beta.23",
"react-navigation": "^1.0.0-beta.19"
}
}
How to install these outbuildings?
Where can I fix my problem if you've already had it, see?
thx!
You haven't installed the dependencies in your app. Either running
npm install
Has produced errors for those npm libraries, or it simply hasn't been run. Try running it, and if it still doesn't work, take a look at the contents of ./npm-debug.log for error messages related to it.
ETA: Looking closer, it seems that several of your dependencies require peers of specific versions of react, but you have a different version of react installed.
Are you using react#16.0.0-beta for a specific reason? Things like mobx are looking for react 13/14/15/16, but not 16b. I'd try this:
npm remove -S react
npm install -S react
and see if that works. If you were using the React beta for a reason, you may struggle to get these to talk to each other.

Resources