I have multiple React repos cloned from gitlab within my work folder. I want to implement a work-wide eslint configuration, whereby every project has the same eslint rules. As such, I want to first npm install eslint#7 --save-devevery repo (this repo comes with React best-practice eslint recommendations).
Is there way to npm install for every repo once from one folder above? I don't want to install it globally.
I will then use a bash script to add a eslintrc file to each repo at root level.
example of repos:
work dir
├── react-app-one
├── react-app-two
├── app-three
├── app-four
├── app-five
Look at npm workspaces since this does exactly what you ask for
Related
I want to delete version 6.0.2.
npm list react-router-dom
zkzk1123#0.1.0 /Users/123/Desktop/
├─┬ #storybook/addon-links#6.4.8
│ └─┬ #storybook/router#6.4.8
│ └── react-router-dom#6.0.2
└── react-router-dom#5.3.0
I tried both npm uninstall react-router-dom, npm uninstall react-router-dom#6.0.2 but #5.3.0 is deleted but #6.0.2 is not, what should I do? I want to delete it.
Your question is not clear. Do you want to delete a version of npm or a version of react-router-dom? To delete a version of react-router-dom, I would suggest you run ‘’’npm uninstall react-router-dom’’’ and then install the required version by running ‘’’npm i react-router-dom#5.3.0’’’
If you are using vscode, you can directly search your folder for the react-router-dom#5.3.0 you should see it in a package.json file -> delete that line from the dependencies -> delete yarn.lock or npm.lock -> delete node_modules -> run npm install or yarn if using yarn
It's resolved.
After changing all #storybook libraries to #5 version, deleting node_modles and package-lock, and reinstalling with yarn , react-router-dom#6 was not installed.
npm uninstall react-router-dom
restart npm, finally
npm i react-router-dom
I run into a problem when installing gatsby plugins.
My Setup:
npm install -g gatsby-cli
gatsby new my-app
gatsby develop
When I try to install a plugin from the Gatsby library im getting this error message after installing the plugin:
Error: Invalid hook call. Hooks can only be called inside of the bo
dy of a function component. This could happen for one of the follow
ing reasons:
You might have mismatching versions of React and the renderer (s uch as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See fb.me/react-invalid-hook-call for tips about how to deb ug and fix
this problem.
Is there something wrong with my dep tree?
├─┬ gatsby#2.23.10
│ └─┬ gatsby-cli#2.12.50
│ └── react#16.13.1 deduped
└── react#16.13.1
According to the comments above the solution was:
Removing node_modules and .cache folder, reinstalling dependencies via npm install and gatsby develop.
Most of the times I use Docker with volumes. But Now I am trying bind mounts for the first time and they are not working as I expected. I'm probably missing something or maybe not understanding completely they way they work.
Let's take this example. I have a React app created with create-react-app and it will run with a Rails backend based on a MySQL database.
My directory structure is:
App
├── docker
│ ├── api
│ │ └── Dockerfile
│ └── fe
│ ├── Dockerfile
│ ├── package.json
│ ├── package-lock.json
│ ├── public
│ ├── README.md
│ └── src
├── docker-compose.yml
I started by creating the docker-compose.yml file like this:
version: "3.7"
services:
web:
build: ./docker/fe/.
ports: ["80:3000"]
volumes:
- type: bind
source: "./docker/fe"
target: "/app"
As you may see, I am mapping the directory ./docker/fe, where the React frontend is, to /app.
Inside ./docker/fe is the Dockerfile:
FROM node:8
WORKDIR /app
RUN npm install
CMD ["npm","start"]
I was expecting this to work, because my app files are all inside /app, mapped to ./docker/fe. At least I thought they would be! But when I run the docker-compose up --build command at the command line I get a build error, because it says there is no package.json file inside the /app directory.
On the other hand, when I use this other version of Dockerfile
FROM node:8
WORKDIR /app
ADD package.json .
ADD package-lock.json .
RUN npm install
ADD . .
CMD ["npm","start"]
this problem won't happen. It will find the package.json file and build the app correctly. But it won't run!
The fact is, it will say it can't find the React scripts. And it is no surprise, since when it is finished there is no node_modules directory inside ./docker/fe as it would be expected after running npm install.
I am confused.
Am I missing something about the bind mounts?
Why do I need to ADD package.json to the WORKDIR if this directory is associated with the host directory where this file already is?
Why I don't have a node_modules directory inside ./docker/fe after npm install?
Docker volumes are only mounted when image is run, not during build phase.
Add these back in to your Dockerfile:
ADD package.json .
ADD package-lock.json .
And/or:
ADD . .
I learned about Yarn and wanted to try it with React so I installed Yarn, and now when I run create-react-app hello, one of the scripts appear to be yarn add v0.24.6, which installs 879 dependencies into my node_modules directory.
Why is this happening and how do I make it stop? Or do I just not understand Yarn and this is supposed to be something I want?
Were you using npm2 before? With it, you'd only see your app's direct dependencies in node_modules and their dependencies (i.e. your app's transitive dependencies) would be tucked away in nested node_modules dirs.
Yarn and npm >= 3 flatten dependencies in node_modules, so you're seeing all of react-scripts' direct dependencies and all of its transitive dependencies.
Every package we use might depends on others packages.
yarn and npm > 3 use flat structure for resolving dependencies of other packages dependencies. So, your node_modules folder container long list of folders.
npm < 3 use nested tree structure. So, your node_modules folder container few list of folders and dependencies of other packages nested inside package/node_modules folders.
so, why use npm > 3 or yarn?
Those are fast for resolving dependencies. I hope you have not yet experience on waiting for 1hours or more after npm install :D.
why yarn over npm?
There are lots of articles written on this topic. Just google it.
So that's it. Weird stuff... Since this morning, when I type for example bower install angular-sanitize, I only get these files:
.bower.json
angular-sanitize.min.js.map
bower.json
package.json
README.md
If I download the package with npm install there's no problem at all:
angular-sanitize.js
angular-sanitize.min.js
angular-sanitize.min.js.map
bower.json
index.js
package.json
README.md
The same applies to any other package. It's like bower couldn't get the .js files or something. Any idea?