Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

undo 'npm run eject' in react

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 ?

like image 453
Anandhu Avatar asked Jul 21 '18 09:07

Anandhu


People also ask

How do I undo eject React?

You can undo the "eject" operation of a Create React App app by adding the react-scripts package back and changing a couple of lines on the package. json file to their defaults. You can lose those /config and /scripts directories too.

What do I do after npm run eject?

Just create a new application and you're good to go. When you run npm run eject command in your React application, you will be able to edit the configuration and script files. You also can upgrade or downgrade the dependencies version on the ejected package.

What is npm eject in React?

npm run eject ​ This command will remove the single build dependency from your project. Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc.) into your project as dependencies in package.


2 Answers

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.....

like image 76
Ashok Avatar answered Oct 08 '22 08:10

Ashok


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
like image 35
Ritwick Dey Avatar answered Oct 08 '22 09:10

Ritwick Dey