I have a project that uses a UIKit. The Main project and UI Kit is all in Typescript and React.
Both the main project and the uikit are hosted in git.
In the main project t have a dependency line for the UIKIT that fetches the repo from github.
All this works fine.
When I need to make changes to the uikit, I make change in the code, then run the build steps and upload to git (on a dev branch)
In the main project t then modify the dependency link for the project
I will change it from
"#something-libs/uikit": "somegit/someprojectuikit",
to this (add the branch name at the end)
"#something-libs/uikit": "somegit/someprojectuikit#dev",
this works fine and when I run yarn install, it fetches the latest version of the dependency.
Now, say I need to make another change? I do that and upload to git.
The changes are then not reflected in the main project because yarn is not fetching the latest version. As a work around y just change the link back to the old version without the #dev part, rerun yarn install and then change it back to "#something-libs/uikit": "somegit/someprojectuikit#dev" and rerun install again.
Any suggestions how i can tell yarn "hey, the package has changed, go fetch it again"
There are several options for how to solve this, the easiest one is to use the command
yarn upgrade {package_name}
In your case, the command will look like this:
yarn upgrade #something-libs/uikit
After running the upgrade command, you will get the latest commit from your github repository in node_modules/#something-libs/uikit
Related
I am trying to work on a package locally that is a dependency in a react project. I want to debug an issue while it's running in the main react project.
simply using yarn link creates duplicate versions of react that breaks hooks. (I also tried yarn linking react and react-dom and it get's harry and I was seeing other issues with that)
So I thought to myself, I have an idea. I can just do this:
rm ./node_modules/<my-package>/dist
ln -s /<path-to-my-dev-package>/dist ./node_modules/<my-package>/dist
And that would be the equivalent. I just need to run yarn build on my package before testing it in my app.
The problem is, I cannot get yarn to "see" the changes.
I have verified the symlink is there. I have verified the changes in the built files.
yet no matter what I do, the old non symlink'd version is what I see.
I tried:
yarn cache clean
yarn start
But it still see the old/deleted version of my pacakge (that no longer even exists) when I run my project
How can I get it to "refresh" to the new symlink'd build files?
TLDR
Even if I don't use symlinks.. any change I make to a package in node_modules is not reflected when I run the app.
So real question is, how are these node_modules being cached in create-react-app and how can I clear it so that my changes in node_modules are seen, so I can debug them.
After poking around in the source of react-scripts
It seems I need to remove ./node_modules/.cache/default-development to clear it and reload the changes.
I just started working with vscode and npm/git. Someone on my team added a package and I did a pull to get his latest changes which put that package in my package.json file. When I ran the project I got errors for a module not being found. Obviously I need to install that package locally. Do I simply use npm install w/no arguments to get it? Or do I install it manually myself with npm install and version info? I ask because I don't know if npm install w/no args will create a new package.json or cause any issues.
What is the correct way to get a new package installed that someone added in the repo?
npm install can be run as many times as you like, and is what you should be doing here :)
npm install's purpose is to get your node_modules folder up-to-date with whatever is written in package.json
So, if your colleague has changed package.json (by installing something new and pushing the change to git), you can just run the command again to get up-to-date.
Provided you haven't directly fiddled with any files in node_modules (this folder should be left alone), it is always safe to run npm install as many times as you like, even if nothing has changed.
I'm developing an npm package for custom React Hooks. And using yarn for package management. The custom hooks are in the src directory, and to prevent posting the wrong code to npm, I've created a new demo folder locally at the same level as src.
To test my hooks code locally, I bundled my hooks and used yarn link to link it in my demo project smoothly as if I installed it from the registry. And next I run yarn start in my demo folder to run my test project. But it reminded me Invalid Hook Call Warning in the Chrome console.
After reading this article I knew that it is because I used duplicate React, So I tried to this command: yarn link ../node_modules/react but it just told me
error No registered package found called "../node_modules/react".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.
But when I tried to use npm link ../node_modules/react there is no error reported. I can start my test project smoothly.
But here comes the problem: I am using yarn for package management and it has its own lock file yarn.lock. If I want to run my test project, I had to run npm link ../node_modules/react, this step will generate a npm lock file which is a Redundancy for me.
So how can I use yarn link ../node_modules/react instead of npm link ../node_modules/react to link a same version React?
Here is the whole repository
I will assume this question is still relevant because I stumbled upon it while looking for the answer myself. I managed to figure it out eventually.
The yarn link docs state the following:
This command is run in the package folder you’d like to consume.
In order to create a link for React, you have to cd ../node_modules/react and then yarn link while in that directory. You can then use yarn link react from the other side to consume the linked package.
For the record, it doesn't look like it matters which side you create the link from (the library or the consumer) as long as the other side makes use of it.
I was running my project finely, but I merge my code with other which contain a package called react-modal, after that my code doesn't work. I revert that code from my project, but it doesn't work, I can't even run my project. "cannot read properties of undefined" error is occuring. I upgrade all my packages like webpack, webpack cli etc, but it doesn't helps. What I need to do to run my project?
Well you can do two things here.
First to revert your code back to your latest code before merge.
Run the below command to delete Node_modules npm prune --production
and then run npm install and then build your project.
I'm trying install a React module into my Symfony 4 project. I already have the React entry point setup and running with webpack encore, and now I want to add a module to the React app.
The React module has a github and can be installed through npm, but how do I install it into Symfony? How do I deal with the webpack.config.js and package.json files in the package, since Symfony has its own for these files.
I have compared the webpack.config.js and it seems like the Symfony one can override the other one, since it already covers React entry point and babel setup. What do I do?
Another problem I have is that the original module was outdated, so I forked the project to my repository, updated it and filed a pull request. But since the PR is still pending, I wanted to install my fork for now, what do I need to do?
NPM supports installing dependencies directly from github (or other git host) https://docs.npmjs.com/cli/install so executing npm install github:<githubname>/<githubrepo>[#<commit-ish>] should work fine from the package.json directory.
The React module has a github and can be installed through npm, but how do I install it into Symfony? How do I deal with the webpack.config.js and package.json files in the package, since Symfony has its own for these files.
I'm not familiar with Symfony, does it manage your NPM dependencies after install? If so you will have to determine how to accomplish the npm install via Symfony.
Another problem I have is that the original module was outdated, so I forked the project to my repository, updated it and filed a pull request. But since the PR is still pending, I wanted to install my fork for now, what do I need to do?
As per above, just specify your git path until your PR is pulled, then update package.json to the original repo