Search code examples
npmwebpackcreate-react-app

Why does npm run eject look through all my project folders?

I am trying to run an npm run eject on a new project so I can configure Webpack files, but I got this message:

✗ npm run eject

> [email protected] eject /Users/danale/Projects/location
> react-scripts eject

NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. Yes
This git repository has untracked files or uncommitted changes:

Why is it referencing all the project folders? To be clear I am running the above command inside of one project folder I just created with CRA.

I am not in the folder with all my projects, I am in the folder with one newly created project. With that said, why is npm referencing all my other projects?

Solution

  • Before you eject a react project created with create-react-app they give you the following cookie cutter response of:

    NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. Yes
This git repository has untracked files or uncommitted changes:

    The reason for this is a lot of people want to have a granular level of control of their webpack.config.js file and you've to eject to get access to this file as it's obfuscated away within your react-scripts module. Now the part of the eject warning message saying:

    NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

    Is to inform you that you don't have to eject to take advantage of preprocessors, TypeScript, etc.... They tell you this because create-react-app didn't always support the easy addition of this functionality so people would eject to be able to use preprocessors and TypeScript.

    You're correct that in order to use SASS all you have to do is:

    1. Install the node-sass module with a: npm install node-sass
    2. Then just create your .scss files and import your desired .scss file in the component you wish to use the styling at. Alternatively, you could also just have a "main" .scss file whose only job is to import other .scss files relevant for your app. Then import this "main" .scss file within your App.js file.

    Now as for this part of the eject warning message:

    This git repository has untracked files or uncommitted changes:

    You're probably getting this because you've set up a git repository for a parent folder where you ran the create-react-app CLI. Basically, in one of your parent folders where your create-react-app interface is located at is a .git/config that points upstream to one of your remote repositories.

    Hopefully that helps!