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
> location#0.1.0 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?
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:
Install the node-sass module with a: npm install node-sass
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!
Between what I read in the documentation suggested in the error message and from tinkering with it, all you have to do is:
npm install node-sass
and then you can start changing css files to scss and creating other scss files for your project. No npm run eject necessary.
Related
I forked a React Native npm library react-native-calendars to make some changes to it. I now want to implement these changes in my project. I have installed it in my project using:
npm i git+<my_forked_git_repo_url>
This successfully added the package to my node_modules, however I still get an error in my code when I try and import react-native-calendars saying Cannot find module. After doing some research I found (here) that I must create a build using npm run build and add it to the forked repository.
However, when I run npm run build it creates a build directory in my ios/ directory (since I am targeting iOS). Is this expected, or should I have a new build/ directory in the root directory? The contents of this build/ directory include a ...-buildRequest.json, ...-desc.xcbuild, ...-manifest.xcbuild, ...-targetFile.txt, and a BuildDescriptionCacheIndex-....
You could:
install the original package
paste your changes into the package's code in node_modules
install patch-package if you don't already have it (follow the instructions here)
run npx patch-package react-native-calendars
This will create a diff between the original package and your changes. Then your changes will be applied every time you run yarn or npm.
I have a react boilerplate that configures a nodejs server for background api calls and a create-react-app for the frontend.
I wanted to create a npm package that would prepare the whole environment when installing.
Eg.: npm i myPackage
This would create all the files and folders based on the structure I have defined, just like cloning the repository...
How could achieve that?
I just need some directions on how to start this, I published an npm package based on my repository and it only downloaded two files but not the whole structure.
Try adding a postinstall script like
"scripts": {
"postinstall": "./executable-script or cp dir/* $INIT_CWD/"
}
into the package.json file. It will run right after the package is installed.
For more documentation read https://docs.npmjs.com/misc/scripts and https://docs.npmjs.com/cli/run-script.
I never used it before, but it would likely solve it for you.
I have created a css folder in my public folder of my project. Is it handy to npm install bulma-start directly in the css folder? Currently project links to Bulma via CDN link but I want to install it on my local machine so the project can run it locally. Can you please recommend the best procedures for installing all dependancies correctly?
Using bulma-start is bit different as compared to working with other npm packages so here are the steps I've followed to work with bulma-start.
Create another folder say temp.
Initiate npm package there by using npm init
Install bulma-start by using npm install bulma-start.
Copy paste all the files inside the node-modules to wherever you want to work with this project.
Again do npm install to install the dependencies of bulma-start i.e. bulma etc.
Feel free to delete temp.
Is it handy to npm install bulma-start directly in the css folder?
bulma-start is a complete package to start working, this includes the whole js, sass, CSS folders and scripts to start working. So bulma-start should be considered as the parent folder of your project.
I've created a react native project with react-native init. Everything is fine, but now I want to save the project to some source control without the large node_modules library (80mb).
So later (when the source is checked out on a different computer for example) when I try to recreate the folder I use npm install.
But now when I run react-native start (i am using windows) i get the error:
"cannot find module '.nodules/es5'"
The react-native init command did something inside the node_modules that the npm install is not doing.
What am I missing?
It's not clear from your description how you have created the project in the first place. I'd recommend using react-native init projectName to properly create a project. To run react-native you need to first install react native globally- npm install -g react-native-cli
If you're using git and github for source control-
react-native init command automatically generates a .gitignore file. Following files are excluded from being added in the source control.
OSX-
.DS_Store
Xcode-
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace
Android/IJ
.idea
.gradle
local.properties
Node.js
node_modules/
npm-debug.log
So even if you run git add . (which tracks all the files recursively in the source control) the aforementioned files will not be tracked.
Next time, if you want to generate your project on a different machine, you can simply run
git clone your_git_repo
and then
npm install.
Is there a way using npm to treat a file in the project as a node-module without linking it and it having it's own package.json?
Ideally I could just have a sub-module definition within my main app package.json and be able to install things to a specific module that way.
Here's an example
/app
/index.js
/file.js
/action.js
What I'd like
npm set-as-module ./action.js "action"
Then within any file in my project I can call
var action = require("action")
Then when I want to install specific dependancies for action I could do this
npm install underscore --save --sub=action
This this kind of feature exist within NPM? Anything close to it?
This would offer the following perks
Easy to branch out or publish into full module
ability to require with module string instead of path
I created something to do this
https://github.com/reggi/npm-link-file
npm install npm-link-file -g
npm-link-file ./action.js "action"
It does not handle linked dependancies.