undo 'npm run eject' in react

Question

I was trying to test the performance of my React app(created with create-react-app) with react CDN script and i did 'npm run eject' to add webpack externals dependencies react and react-dom.

I did that with ease in webpack config and <script> in index.html

...
externals: {
    react: 'React',
    'react-dom':'ReactDOM'
},
...

Now I want to revert it back to previous state

I am using git and i did this experiment in a seperate branch.

I ran git checkout master and npm start

The result was annoying

> [email protected] start /home/code/serverSync/myapp/ui
> react-scripts start

sh: 1: react-scripts: not found

npm ERR! Linux 4.15.0-23-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "start"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] start script 'react-scripts start'.
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 myapp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     react-scripts start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs myapp
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls myapp
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/code/serverSync/myapp/ui/npm-debug.log

how can i revert back to master branch ?

Ephraim

You probably need to npm install again, it looks like the eject uninstalled some of the dependencies. – Phenosafranine

This should help todayilearned.cambraca.com/2018/02/… – Dressmaker

i followed that link also but no luck(rm -r scripts/ , $ rm -r config/ was already empty as i ran a git checkout) – Ephraim

followed @Phenosafranine suggestion npm install and it was resolved ([email protected] was resinstalled). thank you. – Ephraim

Answer 1

You can undo the "eject" operation of a Create React App app by adding the react-scripts package back. Command yarn or npm based on Your favorite Package manager

What you did:

$ yarn run eject/ npm run eject 
? Are you sure you want to eject? This action is permanent. (Yes/No)Yes

Now Solution for it is to:-

$ rm -r scripts/  //Remove Your scripts folder 
$ rm -r config/   //Remove Your config folder
$ rm -r node_modules//  //Remove Your node_modules folder

And Add react-scripts package back using

$ yarn add react-scripts / npm install react-scripts 

And inside the package.json file you'll need to change the "scripts" to their former state:

"scripts": {
+    "start": "react-scripts start",                 
+    "build": "react-scripts build",                 
+    "test": "react-scripts test --env=jsdom",       
+    "eject": "react-scripts eject"                  
-    "start": "node scripts/start.js",               
-    "build": "node scripts/build.js",                
-    "test": "node scripts/test.js --env=jsdom"      
  }

Now install all dependency using:-

  $ yarn install / npm install 

And You are good to go

$ yarn start / npm start

You made it.....

Skyward

Answer 2

If you're in now master branch (Which configuration is same as before npm run eject), then try following.

• Delete node_module
• npm install
• npm start

Coupon

Answer 3

Deletion and then npm install method mentioned is correct. However, if you are using git (or just any version control), just do:

git checkout -- .

or:

git stash

Benzoin

Answer 4

DevTools can't closed completely. But you can make it inaccessible. Launching DevTools in the following ways

// Disbale Right click
document.oncontextmenu = function (e) {
  if (e.button == 2) {
      e.preventDefault();
      return false;
  }
}; 
  //disable f12 key
  document.onkeydown = function (event) {  
  event = (event || window.event);  
  if (event.keyCode == 123) {  
  return false;  
  }  
  }  
//disable ctrl key
document.addEventListener("keydown", function (event) {
  if (event.ctrlKey) {
      event.preventDefault();
  }   
});

Bathrobe